David Kendall

Many years ago we used to size text using pixels, we knew where we were with them. Tell a web browser to set the text size at 12px, voila it was done. But then the web grew up, we realised we had to start to change the way we develop websites, accessibility and usability was key and pixel text sizing just didn`t do the job.

So what was wrong with pixel text sizing?

Nothing in theory, most web broswers are capable of scaling the text up and down depending on the local browser/operating system settings. Great, lets develop websites towards those – wrong! The most popular (well, most commonly used) web browser our old friend Internet Explorer cannot scale pixel text size. So what do we have available?

Ems text sizing

Ems was frowned upon back in the day, it had the reputation of being unreliable and a general pain in the ass to use. But on closer inspection it is just as easy as pixels but gives you increased flexibility, lets look at it…

Most modern browsers default text size is 16px, a little eager on the text sizing methinks. So by default, 1em = 16px. We liked pixel text sizing because it was easy to use, 10px, 12px, 14px etc etc. So lets adapt the browsers default text size in one line of code to make ems text sizing more familiar.

By using the body tag to resize the default text size of 16px, we can then use ems in a much simpler and easier way. lets look at the code first;

BODY {font-size:62.5%}

So why did we do this? We want to use a base pixel size of 10px for it’s simplicity, 10px is 62.5% of 16px, hence the line of code above. Now we have set the em text size 1em = 10px for all child elements i.e. everything. You want a paragraph to be 12px, simple we now use 1.2em. A header should be 16px, you get it, we now use 1.6em. Last example, your footer text needs to be 8px, we use 0.8em.

There must be a catch?

Well actually yes there is, although some would argue that this is a great feature os em text sizing. Em text sizing takes it’s size from it’s parent element (which is why we placed the 62.% text size declaration within the body css). Lets say we have a content area within our website and we set the text height of this content area to be 1.2em (12px).

#CONTENT {font-size: 1.2em}

Within this content are we now have a list menu that we want to be slightly larger than the main body text. As the li element will be a child of the #CONTENT div with a text size of 1.2em, we are now working on the basis that 1.0em is now 12px, not the 10px we set via the body tag. So to make the li text size 14px we use 1.2em again.

#CONTENT LI {font-size: 1.2em}

Similarly, if we wanted the list text to be back down to 10px, we need to use some maths. 1.0em will set the text size as 12px because the parent div sets the text size as 12px using it;s own declaration of 1.2em. To get the size back down to 10px we need to use

10 / 12 = 0.8333

So our css looks like this

#CONTENT LI {font-size: 0.83em}

One more tiny problem, again it is down to the fact that em text sizing takes it’s value from it’s parent element. What happens if this list contains another child list? The text within it would be sized at 83.3% of the text above it and so forth for subsequent lists. This is easily corrected however using another simple css tag

LI LI {font-size:1em}

This will ensure that all child lists are the same size as the parent, you may want to use this technique for other tags within your website such as paragraphs should you nest other tags.

So to conclude

Yes on the surface em text sizing is a little extra work but the benefits by far outweigh the two seconds it will take to add the extra lines of css. Your text can be resized across all browsers and platforms which makes the visitors to your website happy. Give them a go, and why stop at text, size your layers using em, you will never look back to pixels again.