CSS in Website Design - Tips #3  -  January 12, 2007

Using the “em” Value to Set Font Size in CSS

Font size is sometimes an overlooked attribute when designing a website. If not set by the web developer, it will take default values from whichever browser is being used; and as we know from the current state of the browser industry, these will all be different!

When it is set, it can take values measured in an array of increments such as millimetres (mm), ‘picas’ (pc), ‘points’ (pt) and inches (in). However, these are all ‘absolute’ values and can cause compatibility issues across varying screen resolutions.

It is widely accepted that the best and safest ways of setting font sizes is by using either or both pixels (px) and em’s (em).

I personally prefer to use em’s despite their apparent lack of user-friendliness; it is usually quite difficult to keep track of the current font size as you traverse through the document structure. To get round this it is best to simply set the font size to “62.5%” in the body tag, as any tags deeper in the document will then have 1em be equal to exactly 10 pixels though browser calculations.

This means all em’s are then relatively simple to work out thoughout the page; 2em being 20 pixels, 1.6em being 16 pixels, etc.

Rik Weber
Web Developer

rikweb at 9:27 pm

No Comments

No comments yet.

Leave a comment