So, what’s the deal with font-size

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

A very basic guide to hooks, actions and filters for WordPress.

Part of WordPress’s power is the fact that it is so extensible. The tools in the WordPress toolbox to achieve this are hooks, actions and filters. But some of the documentation can be very intimidating, so in less than 200 words I will provide you with a basic guide to hooks, actions and filters.

Hooks simply refer to where your custom code will be executed.

There are two types of hooks: action hooks and filter hooks.
Action hooks do something in your code. (You can either add or remove actions using the very handy and intuitive code: add_action or remove_action)

Filter hooks modify something in the code, so instead of doing something entirely new or different…it simply changes your code. The very intuitive code to add a filter is: add_filter.

That’s it, a very basic guide to hooks, actions and filters for WordPress.

Read more:

CSS Tricks: Using Color


As web designers we sometimes have a tough time figuring out exactly why a particular layout item is behaving that way. Sometimes it’s a matter of the cascade being at play, other times it’s a specific rule that we have set.

One of the best tricks that I have discovered is the use of blocks of color when initially setting up a layout or when debugging it.

There are some important notes about this:

  • Your layout will look as though it was colored in by a 5 year old on a sugar high in a crayon factory. This makes it easy to spot the culprit for breaking the layout, but it can be painful to look at.
  • I use two things to make sure I know that the color is not supposed to survive into the final .css file:
    • I use the color names rather than hex codes.
    • I also include a comment /*debugging*/ next to each item.

This post features one of my examples (in this case with a right sidebar, and navigation across the top of the page). You can view and download the HTML and the CSS from Google Drive.

This is one of the easiest CSS tricks that I have found when playing around with a layout. I picked it up from a tutorial by Russ Weakley a couple of years ago and it has saved my sanity a couple of times.