Best unit for font-sizes in CSS

Question

What are the advantages & disadvantages of each? em, px, % and pt ?

My current choice are percentages, the only reason is because I can globally change the font-size of all elements, just by modifying the font size on the root element (body)

Solution 1

I would recommend EM — simply because I use Baseline CSS for my basic set up of forms, layout and most importantly type.

Can't recommend it enough : http://baselinecss.com/

Solution 2

My original design training said em's where possible.

I believe a main reason was that different browsers and devices have different resolutions, which is once again becoming a big issue.

I think it's frequently better to use em's and %'s as they are an abstraction layer particularly when compared to pixels. Both are similar in some respects as "100%" = "1em". Another problem with the pixel unit is that it does not scale upward for visually-impaired readers.
Today, for mobile, pad, etc. consideration it's often better to have specific stylesheets / rules for each one.

Also, for print concerns, em works well.

I have seen em unit called a standard for font sizes on the web, but the percent unit often gives a more consistent and accessible display. When user settings are changed, percent text scales well preserving readability, accessibility, and visual design.

Solution 3

Here is a link to one of my favorite articles on proper sizing of text with css from AListApart:

http://www.alistapart.com/articles/howtosizetextincss

Semantically, em is preferred, but I've always found it problematic because it impacts each child element inclusively. If your design nests 4 or 5 divs and each is at .75 em, by the time you get to the last child div your text is almost unreadable.

My preference is pt because it works with various operating systems (allowing the system itself to decide what a pt is) rather than using px which can really put a pinch on the readability of a site depending on resolution. Em is considered the "standard" for css, but it has just as many problems as the others, but it does have the advantage of cascading globally.

Solution 4

I always use ems. Using % is kind of the same, but they mean something else when using them in a padding or margin statement (padding:1em 0; is not the same as padding:100% 0;). So just use ems I you mean relative to the current font size, and avoid any confusion.

Added benefit or using ems is you could e.g. use a media query and body{font-size: 120%} to give mobile users a slightly bigger fontsize.

View more solutions

Comments

[Michael Bylstra]

maybe it has changed since this answer was posted, but baselinecss.com uses pixels for font sizes (nov 2012)

[thdoan]

Yes, it appears that the author of Baseline has since moved away from using em, as quoted from the Baseline homepage: "Baseline is built with pixels, it’s almost impossible to create a regular baseline using ems due to browser unit rounding-up bugs that cause ems-based baselines to shift slightly in unpredictable ways."