StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Do not specify the font-size in absolute length units for screen stylesheets. They render inconsistently across platforms and can't be resized by the User Agent (e.g browser). Keep the usage of such units for styling on media with fixed and known physical properties (e.g print)</p> <p>If you will use this method, no need to calculate</p> <p>You can set the font-size of the body to 62.5%(that is 62.5% of the default of 16px), which equates to 10px, or 0.625EMs. Now you can set your font-size in EMs with an easy to remember conversion, divide the px by 10.</p> <pre><code>* 12px = 1.2EMs * 13px = 1.3EMs * 16px = 1.6EMs * 8px = 0.8EMs * etc… </code></pre> <p>This makes everything SUPER easy to remember and eliminates the need for conversion tables. Of course, you will still need to use a conversion table for nested elements when using EMs, if you are not being specific in your CSS, which is a whole separate issue.</p> <p><em>But 76% is much better and you can use this to calculate <a href="http://pxtoem.com/" rel="nofollow noreferrer">http://pxtoem.com/</a></em></p> <p><strong>Yes it's still relevant:</strong> </p> <p>IE6 is still widely used and is unable to resize the fonts defined in px. => Usability issues. That alone is a no-no.</p> <p>and</p> <p>IE 7 and 8 don't resize text sized with pixels either, actually. They do have page zoom, but some people prefer to incease text size only.</p> <p>Here's a summary of what's good and bad about font sizing in general.</p> <p><a href="http://easycaptures.com/fs/uploaded/213/2470522253.png" rel="nofollow noreferrer">Font size in css http://easycaptures.com/fs/uploaded/213/2470522253.png</a></p> <p>I personally like ems. Others, like Chris Coyier over at CSS-Tricks.com likes pixels. (<a href="http://css-tricks.com/css-font-size/" rel="nofollow noreferrer">Chris has an excellent article on the different font units</a>).</p> <p>It really comes down to personal preference.</p> <p><strong>Almost similar or related questions on SO</strong></p> <p><a href="https://stackoverflow.com/questions/1890970/should-we-still-use-em-and-for-defining-the-font-size-of-the-website-elements">Should we still use em and % for defining the font-size of the website elements?</a></p> <p><a href="https://stackoverflow.com/questions/293247/is-there-really-any-point-to-using-relative-font-sizing-in-css">Is there really any point to using relative font sizing in CSS?</a></p> <p><a href="https://stackoverflow.com/questions/609517/why-em-instead-of-px">Why em instead of px?</a></p> <p><a href="https://stackoverflow.com/questions/132685/font-size-in-css-or-em">Font size in CSS - % or em?</a></p> <p><a href="https://stackoverflow.com/questions/520939/css-font-size-relative-vs-absolute-values-which-to-use">CSS font size: relative vs. absolute values. Which to use?</a></p> <p><strong>Problem with EM</strong></p> <p><a href="https://stackoverflow.com/questions/1377449/problem-with-em-unit/1377477#1377477">Using relative instead of fixed size in CSS</a></p> <h2>Helpful online tool for px to em</h2> <p><a href="http://pxtoem.com/" rel="nofollow noreferrer">http://pxtoem.com/</a></p> <p><a href="http://riddle.pl/emcalc/" rel="nofollow noreferrer">http://riddle.pl/emcalc/</a></p> <p><a href="http://convert-to.com/pixels-px-to-em-conversion.html" rel="nofollow noreferrer">http://convert-to.com/pixels-px-to-em-conversion.html</a></p> <p>Convert entire site from px to em (This tool is still in development)</p> <p><a href="http://converter.elementagency.com/" rel="nofollow noreferrer">http://converter.elementagency.com/</a></p> <p><strong>EM Calculator AIR application (will work on all os)</strong></p> <p><a href="http://jameswhittaker.com/journal/em-based-layouts-vertical-rhythm-calculator/" rel="nofollow noreferrer">http://jameswhittaker.com/journal/em-based-layouts-vertical-rhythm-calculator/</a></p> <p><a href="http://jameswhittaker.com/projects/apps/em-calculator-air-application/" rel="nofollow noreferrer">http://jameswhittaker.com/projects/apps/em-calculator-air-application/</a></p> <p><strong>Windows apps</strong></p> <p><a href="http://www.thebrightlines.com/2009/11/16/pixem-pixel-to-em-converter/" rel="nofollow noreferrer">http://www.thebrightlines.com/2009/11/16/pixem-pixel-to-em-converter/</a></p> <p><a href="http://www.storkas.com/Projects.aspx(go" rel="nofollow noreferrer">http://www.storkas.com/Projects.aspx(go</a> at bottom)</p> <p><strong>Pixels to Ems Conversion Table for CSS</strong></p> <p><a href="http://jontangerine.com/silo/css/pixels-to-ems/" rel="nofollow noreferrer">http://jontangerine.com/silo/css/pixels-to-ems/</a></p> <p><a href="http://reeddesign.co.uk/test/points-pixels.html" rel="nofollow noreferrer">http://reeddesign.co.uk/test/points-pixels.html</a></p> <p><strong>emchart</strong></p> <p><a href="http://aloestudios.com/tools/emchart/" rel="nofollow noreferrer">http://aloestudios.com/tools/emchart/</a></p> <p><a href="http://aloestudios.com/code/emchart/" rel="nofollow noreferrer">http://aloestudios.com/code/emchart/</a></p> <p><strong>Some more articles on this issue</strong></p> <p><a href="http://www.d.umn.edu/itss/support/Training/Online/webdesign/type.html" rel="nofollow noreferrer">http://www.d.umn.edu/itss/support/Training/Online/webdesign/type.html</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload