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

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