Menu
When setting the size of fonts in CSS, should I be using a percent value (%) or em? Can you explain the advantage?
982
Use EM where you have to make more scaling than the root font size. And use REM where you need value according to the root there you can use REM units.
An em is a unit of measurement, relative to the size of the font; therefore, in a typeface set at a font-size of 16px, one em is 16px. The em square is the “box” that each glyph is sized relative to. So, at 12 points, the em square is 12 points wide.
Set Font Size Using ems Another common way of setting the size of a font in CSS is to use em sizes. The em unit of measurement refers to the font size of a parent element. If you set a font's size to 2em , the font size will be twice that of the parent element.
For most font-relative units (such as em and ex ), the font size is relative to the parent element's font size. For font-relative units that are root-based (such as rem ), the font size is relative to the size of the font used by the <html> (root) element.
There's a really good article on web typography on A List Apart.
Their conclusion:
Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers.
191
Both adjust the font-size relative to what it was. 1.5em is the same as 150%. The only advantage seems to be readability, choose whichever you are most comfortable with.
21
From http://archivist.incutio.com/viewlist/css-discuss/1408
%: Some browsers doesn't handle percent for font-size but interprets 150% as 150px. (Some NN4 versions, for instance.) IE also has problems with percent on nested elements. It seems IE uses percent relative to viewport instead of relative to parent element. Yet another problem (though correct according to the W3C specs), in Moz/Ns6, you can't use percent relative to elements with no specified height/width.
em: Sometimes browsers use the wrong reference size, but of the relative units it's the one with least problems. You might find it interpreted as px sometimes though.
pt: Differs greatly between resolutions, and should not be used for display. It's quite safe for print use though.
px: The only reliable absolute unit on screen. It might be wrongly interpreted in print though, as one point usually consist of several pixels, and thus everything becomes ridiculously small.
26
The real difference comes apparent when you use it not for font-sizes. Setting a padding of 1em is not the same as 100%. em is always relative to the font-size. But % might be relative to font-size, width, height and probably some other things I don't know about.
35
Given that (nearly?) all browsers now resize the page as a whole, rather than just the text, previous issues with px vs. % vs. ems in terms of accessible font resizing are rather moot.
So, the answer is that it probably doesn't matter. Use whatever works for you.
%is nice because it allows for relative resizing.
pxis nice because it's fairly easy to manage expectations when using it.
emcan be useful when also used for layout elements as it can allow for proportional sizing related to the text size.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
