I have spend a disproportionate amount of time over the last two weeks reading about setting font-size in css. When Eric Meyer says something about css I listen (and so should you), so when he says that setting font-size in pixels is evil, I decided to go on a mission to figure out why, especially when the Genesis Sample stylesheet sets font-size in px. I have been out of the web design loop for a while with my maternity leave and so I decided to make sure what I knew is still valid.
The main reason why the rule developed to not set font-sizes in pixels in the first place was because Internet Explorer 6 and 7 do not resize them correctly and thus create an accessibility issue.
However now we need to make sure that our content is accessible on mobile devices and here the Google accessibility rules say use legible font-sizes and recommends a base size of 16px.
I googled and I read a number of articles about web typography but I could not find a definitive answer to what was the current best practice. I started to despair and so I reached out on twitter to Russ Max (who pointed me in the direction of an article that he had published in 2003) which argued in favour of using relative font-sizes.
My main concern about using EMs was whether they would still behave properly on a wide variety of devices. The final article that laid my concerns to rest was Confused About REM and EM? by Jeremy Church.
I was discussing my dilemma with Riaan last night and the fact that I am not sure whether to listen to the W3C or Google about setting the font-sizes. These are two giants and both of their voices matter. I have never been faced with a situation where I have needed to choose one recommendation over the other.
The main advantage of setting font-sizes in pixels is the fact that you the designer have control over how your site renders. The main advantage of EMs is that it respects the user’s accessibility choices. EMs are recommended by the W3C. Google only appears to make the recommendation in its page insights and where it recommends a base size of 16px.
Nielsen and Meyer both recommend relative font-sizes. In a 2002 article Nielsen says: “Do not use absolute font sizes in your style sheets. Code font sizes in relative terms, typically using percentages such as 120% for big text and 90% for small text.”
Meyer goes so far as to say “pixel-sized text is evil and wrong”.
Google does not say not to use EM, and the main concern is to make sure that the text is not so small as to be illegible on smaller screens, and so I have decided to use EMs in my style sheets.
Some of the best articles I read about text sizing:
The Noodle Incident: Text Sizing (Best line in the article: Besides, if I was really zen I wouldn’t write a stylesheet.)
Font sizing with REM can be avoided
A list apart: How to size text in CSS
The amazing em unit and other best practices
When I started out I wanted to find an absolute definitive answer to what is the best way to size text using CSS. Unfortunately it does not look as though there is any absolute answer here. It is going to come down to a judgement call, and for me I am making the call that for now, the best practice is to use EM to set the font size. I know that my math is going to be a little bit more complicated than if I used the 62.5% hack but I am confident that avoiding headaches down the line will be worth it. (I will just follow the lead set by Richard Rutter and include my math in my stylesheet).