UsableTypeTypography for the World Wide Web

style guide

Font Sizes

Font sizing is possibly the most complicated and controversial aspect of web typography. No one has the ultimate solution for sizing text, mainly because there is no ultimate solution (not yet anyway). This section provides in depth detail on how to size text using CSS, but does not particularly delve into the pros and cons of various methods. That is attempted in a number of articles in the Font Sizing category.

Introduction to Font Sizing

A little background information on how fonts are sized is extremely beneficial when applying CSS font sizing effectively. Many people comment that different fonts set at the same font size often look different, despite both being set to 12 pixels for example. This is due to the way the different fonts are designed. When fonts are created, they are set in relation to what is called an em square or em box. Some fonts are small and all parts of their characters are contained within the em square; other fonts may have their descenders or ascenders outside the em square. This is best demonstrated by the following diagram.

These three fonts are set to the same point size in our favourite graphics editor. The size of the em box is consistent across all three examples, but the characters themselves all appear as quite different sizes.

When you declare a font size by any method, you are setting the size of the em square. As the relationship between the em square and every font is unique, there can be significant visual differences between various fonts set at the same size. It is always worth keeping in the back of your mind, that the effect of the css property font-size is to provide a size for the em box of the given font, and not the size of actual characters.

Sizing with Keywords

Sizing with keywords in CSS is a simple and relatively familiar concept for those of us accustomed to the depracated font tag. There are seven absolute-size keywords: xx-small, x-small, small, medium, large, x-large, and xx-large.

Setting a general size for you body text would be done as follows:

body {font-size:small;}

These keywords, although likely to generate slightly different sizes on different browsers, are all defined in relation to one another. The CSS 2.1 specification defines a specific scaling factor for each keyword. Many modern browsers such as Mozilla Firefox follow this scaling factor correctly, but most use a scaling factor of 1.2 between adjacent keywords as defined in CSS 2. Therefore if the medium size is 12px, then the large size should be 14.4px.

It is worth noting that the suggested scaling factor in CSS 1 was 1.5. After user feedback proved this to be too large, CSS 2 redefined the factor, but some older browsers still use this old scaling factor to size relative keywords.

Keyword values do not compound in nesting elements. This makes them easier to understand and to implement than percentage methods such as ems. Furthermore, in Gecko and modern Internet Explorer browsers, text should never be smaller than 9px even if it is set to xx-small. Unfortunately, despite the promise of keywords, a few older browsers do not implement the specification correctly. For information on these problems and some ways around them read the article Using Keywords.

The relative sizes, larger, and smaller, cause the font size to be shifted up or down the keyword scale relative to their parent element.

h1 {font-size:x-large;}

h1 strong {font-size:larger;}

The preceeding code would instruct the user agent/browser to style the h1 strong element at a size of xx-large; one step up the scale from the h1 element's x-large size.

Some user agents will allow a font size to become greater than the size for xx-large when styled with the value larger. For example:

h1 {font-size:x-large;}

h1 strong {font-size:larger;}

h1 strong em {font-size:larger;}

This may cause the h1 strong em element to be styled even larger than the xx-larger size of the h1 strong element; although not all user agents will behave this way.

These relative keyword sizes can also be used in tandem with any other method of font sizing.

body {font-size:110%;}

em {font-size:larger;}

<body>This body text is set to 110% of the default size, however text which is set as <em>larger</em> will be 1.2 times the size.</body>

This body text is set to 110% of the default size, however text which is set as larger will be 1.2 times the size.

Relative Sizing with Percentages

There are two ways of of sizing text with percentages. With a percentage value, and with an em value. These two methods are equivalent because 1em is effectively the same as 100% in terms of font sizing; therefore 1.5em is the same as 150%, and 2em is 200%, etc.

These two methods of sizing allow much more fine control of font sizes than the keywords method, and also allow for exact relative sizing, eg. fonts that are twice as big, or half the size of their parent element. With a little basic mathematics it is possible to define font sizes extremely accurately using this method. For example, some designers like to assume that there users browser has a default font size of 16px. If you reduce 16px by 62.5% for the body element, you have a basic font size of 10px. It is then easy to size fonts using ems, ie. 1em is 10px, 1.2em is 12px, 1.5em is 15px, etc.

Inheritance in Font Sizing

Inheritance and the cascade can be a tricky beast to understand at the best of times, this is particularly true in the case of font sizes. In simple terms, font sizes set with a relative system will accumulate as they are inherited through elements.

p {font-size:100%;}

strong {font-size:200%;}

<p>This is a paragraph which contains some <strong>strong text and some <strong>really strong text</strong></strong></p>

This is a paragraph which contains some strong text and some really strong text.

Inherited font-sizes are computed from the font-size of the parent element. This is different to all other css properties, in which ‘em’, ‘ex’ or percentage sizes are calculated with respect to the current font size.

Sizing Fonts with Length Units

Fonts can also be sized with all standard css length units.

Points
Points have been the standard typographical measurement for font sizes for deacades. There are 72 points to the inch.
Picas
A pica, another typographical term, is equivalent to 12 points, meaning there are 6 picas in an inch.
Inches
An inch, is an inch, is an inch. Work it out for yourself.
Centimeters
Pretty self explanatory. There are 2.54 centimeters in an inch, or 0.394 inches in a centimeter.
Millimeters
There are 10 millimeters to the centimeter.

All these units are relative to one another, but it is impossible to predict the way a browser will render the sizes. To do that, we need to know all sorts of information, such as the size and resolution of the monitor on which they are being displayed. Setting font sizes with these length units is not often done as the results can be so varied over different software and browsing platforms.

Sizing Fonts with Pixels

By sizing fonts with pixels we can obtain comparative precision across many different operating systems and browsing platforms. The users default font size is taken out of the equation, and so it is a useful technique for lining up text and graphics accurately. Of course, the user can still resize the text in the browser, so really it is no more accurate a mehtod than any other. Only in IE/Win is the user unable to resize text set in pixels, but this is a major accesibility downfall, and should not be taken advantage of for the reliable setting of font sizes. In fact many authors, including this one, would argue that because IE for Windows is the most popular browser in use today, setting font sizes with pixels is not an acceptable approach.

For more information on sizing fonts on the web, explore the Font Size Articles at Usable Type.

font-size
Values: <absolute-size> | <relative-size> | <length> | <percentage> | inherit
Initial Value: medium
Applies to: all elements
Inherited: yes
Percentages: refer to parent element's font size
Computed Value: absolute length

Latest Links

Joe finds me patronising! Arsenalski Niet

To get in touch, please use the UT form below.

Name:
Email:
Message:

close