My Drupal Blog

Today I'd like to show you an easy way to use relative font sizes in your Drupal theme.

Basically, there are just two types of font sizing:

• Fixed - usually defined in px or pts
• Relative - usually defined in ems or %.

The big difference is that relative font sizes can be re-sized by users, whereas fixed font sizes cannot in IE6 or earlier. So, if you design a theme with fixed font sizing and someone with a visual impairment who is using IE6 or earlier wants to manually re-size the text on your site they aren't going to be able to. Not good, especially considering that according to W3 Schools the majority of users still browse with IE6.

So how, then, do you go about implementing relative font sizing?

I start by setting a global font size of 1em on the body.

This means that any text on the website will be shown at 100% of the default size that the user has their browser set to. Firefox, Internet Explorer, and many other browsers have a default font size of 16px. So, by setting a global font size on the body of 1em our font will show up at 16px in most peoples' browsers.

This might be okay if you're going for a classic big text web 2.0 look, but I generally fancy something a touch smaller so I then set a relative font size of 75% on the next largest element, like this:

This means that my text is now 75% of 1em. Or, to put it another way, my text is 75% the size of the users default browser font size.

As the majority of users will have left the default browser size of 16px, this means that my website font will be 75% of 16px = 12px.

Importantly, however, as I am now using relative font sizing the font will automatically show up larger in a user's browser if they have manually increased their default browser font size. So, for example, if a visually impaired user has set their default browser font size to 20px, instead of the usual 16px, the relative font size that they see on the screen will now be 75% of 20px = 15px.

So remember, as Tarzan probably once said, "Fixed bad, relative good".