Ems to Pixel Conversion - Why 62.5% and not 6.25%?

Question

I know that a lot of us are familiar with setting the font size on the body element in our CSS to 62.5%. This means that 1em will equal 10px and helps for keeping things pixel p

Answer 1

For anyone who arrives at this useful post, I would like to share a link for a youtube video (approx.48 min.) about good web typography. It's actual and gives everyone a significant insight that changes the way you set type for the web.

I just made some subtle changes based on this conference video, and the results achieved were perceived, even by our users, as surprising.

The presentation is from Richard Rutter, and the link for the presentation is Richard Rutter | Web Typography

Answer 2

Arguably, but then you lose control over your scale. Don't forget that headings will typically inherit those same sizes in proportion to their rank (i.e. <h1> will be largest, <h2> slightly smaller). If you want to decrease those elements, you will need to use em values with a lot of decimal placeholders. Imagine <h4> font-size: 0.005em.

Or worse, if you want fonts to be scaled larger, you could potentially be looking at font-size: 40em or something ridiculous.

In short, 1em = 10px is much more practical for the scaled values of fonts. While a 1:1 scale might make sense on paper, it doesn't lend itself that well to sensible and maintainable CSS.

Answer 3

First of all, do not assume that 1 em will equal 10 pixels. An em unit is in direct correlation to the typography being used. If someone has a font size of 16 pixels, then 62.5% is indeed 10 pixels (16 * 0.625 = 10) but this will obviously change when someone has modified their default font size.

Secondly, this is the first I've ever heard of using 62.5% for the base body font-size. I always use a font-size of 76% as based on Sane CSS Typography by Owen Briggs.

Lastly, to answer your question, yes you could use a font-size of 6.25% and then use 12em instead of 1.2em, for example. However, I would highly discourage this methodology. In the world of typograhy, one em is intended to be the width of the capital letter 'M'. This method completely violates that common practice and will seriously confuse anyone that may maintain your CSS in the future.

Answer 4

Great question.

I see 6.25% as an interesting proposition for adaptive / responsive web design and elastic templates.

In particular font sizing with rem unit's lends it's self to your argument... a 1:1 ratio is just easier.

rem: "root em"... the font size of the root element. http://www.w3.org/TR/css3-values/

See this rem example from: http://snook.ca/archives/html_and_css/font-size-with-rem#c67739

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

And now with your suggestion...

html { font-size: 6.25%; } /* 1em = 1px if browser has 1em = 16px */
body { font-size: 14px; font-size: 14rem; } /* =14px */
h1   { font-size: 24px; font-size: 24rem; } /* =24px */

... Play with my JSBin example: Testing CSS3 "rem" Units for Elastic Content

A 1:1 em to px ratio should lead to less typos.

REM Notes: With proper CSS resets and body declaring the base font-size in both px and rem your styles degrade gracefully... If rem is supported, and declared after px, it's value is applied. Otherwise the browser falls back to px.

Determining support (especially on mobile) for rem. Please hit this page with any/all browsers/devices you can... http://ahedg.es/w/rem.html

Answer 5

You might find this useful as well. http://pixel2em.kleptomac.com This provides an online pixel to em converter and you can also do a complete CSS file conversion.

Answer 6

The whole "62.5%=10px" thing is fundamentally broken anyway - 62.5% may or may not be 10px depending on the browser, the user's settings, and, especially, the minimum font size setting. So you can't just design in pixels and then "convert" to ems on the assumption that 62.5%=10px, because your design will break all the time. If you want a pixel-perfect design, you have to use pixels as the unit. If you want a flexible design, you need to think about the appropriate units for different elements of the web site - ems for elements which should scale relevant to text size, percentages for elements that should scale relative to window size, and pixels for elements (like images) that shouldn't scale at all.

Anyone who includes font-size: 62.5% in their CSS fundamentally doesn't understand how to design for the web.