views:

1969

answers:

7

When setting the size of fonts in CSS, should I be using a percent value or em? Can you explain the advantage?

+5  A: 

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 tough.

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.

Galwegian
About the pt thing. I had a great argument on /. about that (and lost). I had the same point of view as you, good to know someone shares that pov :)
Vincent McNabb
A: 

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.

Liam
Lee Theobald
Thanks Lee, I just tested this in IE6, IE7, Firefox 3, Safari 3, Opera 9.5, and Google Chrome, all on Windows and they all seem the same to me! <p style="font-size:0.6em;">this is a test</p> <p style="font-size:60%;">this is a test</p>
Liam
+27  A: 

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.

Glenn Slaven
Actually `line-heights` are better written *without* any units at all. This is allowed by the spec, and completely avoids certain really annoying browser quirks when it comes to `em`-based line-heights
Már Örlygsson
+1  A: 

Typically, I set a base font size on the body in pixels and then use em from there. There's definitely a readability factor to em as well as an expectation, I think, amongst many designers/developers to work with ems. I've found that both print and web people understand em as a relative unit of measure but using % takes a more conscious mental conversion.

Jeremiah Peschka
+1  A: 

As Galwegian mentions, px is the most reliable for web typography, as everything else you do on the page is mostly laid out in reference to a computer monitor. The problem with absolute sizes is that some browsers (IE) won't scale pixel-value elements on a web-page, so when you try to zoom in/out, everything adjusts except for those elements.

I do not know whether IE8 handles this properly, but all other browser vendors handle pixels just fine and it is still a minority case where a user needs to enlarge/diminish text (this text box on SO perhaps being the exception). If you want to get really dirty, you could always add a javascript function for making your text size larger and offer a "small"/"larger" button to the user.

Christian P.
IE7 scales pixel-values fine, if you use zoom. IE6 didn't have zoom, only text-size. Zoom became a requirement because of designers who used fixed pixel scales rather than allowing the page to reflow with text size changes.
Mike Dimmick
It's still an issue with IE6, but, then again, EVERYTHING is still an issue with IE6.While I avoided px in the past because of that, the concept of web page zooming as a whole (vs. jsut the text) has become standard and I've found myself using px much more often.
DA
A: 

Yahoo User Interface library (http://developer.yahoo.com/yui/) has a nice set of base css classes used to "reset" the browser specific settings so that the basis for displaying the site is same for all (supported) browsers.

With YUI one is supposed to use percentages.

kosoant
A: 

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.

PX is nice because it's fairly easy to manage expectations when using it.

EM can be useful when also used for layout elements as it can allow for proportional sizing related to the text size.

DA