Font Size

From CSS Discuss

Jump to: navigation, search
"In high-resolution print typography, designers enjoy considerable freedom and control over the articulation of this [font size] range. In low-resolution screen typography, designers don't".

- Todd Fahrner

How Do I Size Fonts?

This is one of the most commonly asked questions about CSS. The basic answer is that you use the font-size property. For example:

h1 {font-size: 150%;
h2 {font-size: 1.5em;} /* same as 150% -- see [[ Using Ems ]] */
h3 {font-size: 18px;}  /* a bad idea! see [[ Using Pixels ]] */
h4 {font-size: 12pt;}  /* a bad idea! see [[ Using Points ]] */
h5 {font-size: 1ex;}   /* approximately same as 0.5em */

Part of: Using Font Size

The more complicated answer is that setting font sizes involves not only the mechanics of doing so, but also the advisability of various approaches. For example, if you set all of your text with pixels, you could prevent many users from being able to resize the text (see the entry Force Font Size. Some authors argue that text should not be free to be resized anyway, nor should it be based on the user's default font size (which many designers dismiss as being "way too big and ugly"). The flip side of the debate holds that the user's default settings should always be honored, and that while text can be sized, it should be sized relative to the user's settings. This school of thought, which advocates the use of percentage and em-based font-size values, points out the inherent accessibility advantages of relatively-sized text, which can be easily resized by the user.


Both approaches have their strengths and weaknesses, and it is left to the individual to decide which he or she would prefer to use. To assist in making that decision, here are some articles, examples, opinions, and discussions from both sides of the fence:

Owen Briggs: Text Sizing
a collection of 264 screenshots showing how different text sizing methods look in different browsers.
Relative Font Sizing HOWTO
Mark Pilgrim explains relative font sizing using font-size keywords and the various Css Hacks needed to get them working consistently across different browsers.
Size Matters
more on font-size keywords, describing many of the same techniques as Mark Pilgrim's howto.
Give me pixels or give me death
Jeffrey Zeldman's controversial article recommending font sizes in pixels.
This was written before techniques such as the box-model hack became widely known (Simon), but it still has some interesting perspectives on the problem of font sizing.
(This article is now quite old; I believe it dates back to October 2000. - Mark Pilgrim )
Paul Sowden's Style Switcher
a Java Script -and-cookie-based solution useful for providing two or more text-sizing schemes to the user
Agitprop
Todd Fahrner's outstanding collection of essays on font sizing (see the section titled "All about text styling on the Web") and other CSS-related topics
alterior.net : The Font Report
A short overview of the current state (7/02) of font sizing and related pitfalls
Usable Type - Font Sizes
An article about font sizes in in general.
Sizing Fonts on the Web
An article about sizing fonts on the web.
Big, Stark & Chunky
Joe Clark describes ZOOM layouts. These are very flexible layouts which accommodate text resizing well beyond normal expectations.
Let Users Control Font Size
Jakob Nielsen explores the usability issues of setting font sizes (August 2002).

For more information on the use of points in Web design, please visit the entry on Using Points .

Personal tools