Phone and FAX
Tel: 0845 121 1194
Fax: 0845 121 1195
Archives:
Meta:
Categories:
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.