Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 perfect but also allows for scaling of fonts.

So wouldn't that mean that setting it to 6.25% would equate to 1em = 1px? Seems like an even simpler conversion rather than having to mess with decimals...


Thanks guys! I'm quite aware of the em and it's history (design degree), but I'm sure others may find it helpful :)

As far as the 1em = 1px, I don't see how this is undesirable. The em is square, regardless of your units (be it points or pixels) and nobody would set their type at 1px (just like nobody would set printed type at 1pt). Furthermore, even your article concedes that in most digital typefaces, the capital "M" is usually smaller than 1em, and that the em is merely a reflection of the point size (48pt type would render a 48pt by 48pt square for the em, 12pt type would yield 12x12, etc.)

Besides, the reason people would do this would be more for setting dimensions of other elements on the page so that everything scales nicely when the user adjusts their font size. Sure, there will always be the rare few who set their default to something other than 16px, but well worth the price to pay for a pixel perfect layout that scales nicely.

like image 818
restlessdesign Avatar asked Dec 22 '08 22:12

restlessdesign


People also ask

How do you calculate pixels from em?

When finding the equivalent in ems, we need to divide the size in pixels by the base size: 32 px / 16 px = 2 em .

Should you use em instead of px?

If you use px as the unit for fonts, the fonts will not resize whereas the fonts with rem / em unit will resize when you change the system's font size. So use px when you want the size to be fixed and use rem / em when you want the size to be adaptive/dynamic to the size of the system.


2 Answers

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

like image 78
Chris Jacob Avatar answered Sep 28 '22 03:09

Chris Jacob


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.

like image 28
cowgod Avatar answered Sep 28 '22 03:09

cowgod