Skip to main content

A List Apart: Articles: How to Size Text in CSS

Popularity Report

Total Popularity Score: 0
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Rank

Bookmark History

Saved by 87 people (-12 private), first by anonymouse user on 2007-11-20


Public Comment

on 2007-11-20 by christyinsdesign

Great explanation of text sizes for web design so they resize correctly across multiple browsers. One of the most interesting parts of this article is that it doesn't just show the final product. It gives transparency for the entire process the author took to come up with his solution, with examples for each step in the trial-and-error process along the way.

Public Sticky notes

 

Highlighted by adamghost

A fix to the exaggerated text resizing of IE6 and IE7 is to size the body using a percentage. So retaining the ems on our content, the following styles were tested: 

body {
    font-size:100%;
}

.bodytext p {
    font-size:0.875em;
}

Highlighted by acedeuce

Frequently asserted is the notion that good typography requires accurate control of font size and line-height. But this is the web: it’s a special medium where the reader can have as much control as the designer—the implication being that text on the web, while bending to the designer’s will, must also be reliably resizable across browsers and platforms.

Highlighted by allendog

Frequently asserted is the notion that good typography requires accurate control of font size and line-height. But this is the web: it’s a special medium where the reader can have as much control as the designer—the implication being that text on the web, while bending to the designer’s will, must also be reliably resizable across browsers and platforms.

Highlighted by pabranch

The default text size of the base case is a good starting point, but for most people (designers, clients, and their customers) 16px is too large for body text.

Highlighted by om19bao

Text size in pixels – iteration 1

The default text size of the base case is a good starting point, but for most people (designers, clients, and their customers) 16px is too large for body text.

Highlighted by allendog

The result is that Safari and Firefox still resize the text, whereas IE6 and IE7 do not. The text can be resized in Opera and IE7 by using the page zoom tool, which magnifies the page layout, text and images within.

Highlighted by allendog

it’s safe to say that IE6 is still used by many people. So setting text in pixels would leave many people no means of resizing it. There’s also an argument that says IE7 users should be able to resize text without being forced to use the zoom control.

Highlighted by pabranch

Text size in ems – iteration 2

Highlighted by allendog

across all browsers, text at the medium browser setting is rendered identically to text set in pixels. It also demonstrates that text sized in ems can be resized across all browsers.

Highlighted by pabranch

The results show that, across all browsers, text at the medium browser setting is rendered identically to text set in pixels. It also demonstrates that text sized in ems can be resized across all browsers. However IE6 and IE7 unacceptably exaggerate the smallness and largeness of the resized text.

Highlighted by allendog

A fix to the exaggerated text resizing of IE6 and IE7 is to size the body using a percentage.

Highlighted by pabranch

Body sized as percentage – iteration 3

Highlighted by allendog

The results show that the difference between larger and smaller browser settings in IE6 and IE7 is now less pronounced, meaning we now have all browsers rendering text at an identical size on their medium setting, and resizing text consistently.

Highlighted by allendog

good typography requires a vertical grid, that is to say a solid vertical rhythm achieved with a consistent, measured line-height. The key implication is that line-height should be the same regardless of the size of the text (so that line-height, or the vertical grid, remains consistent, regardless of font size)

Highlighted by pabranch

Setting line height in pixels – iteration 4

Highlighted by allendog

Setting line height in ems – iteration 5

Highlighted by allendog

Safari renders monospace text much smaller than the surrounding text. The inconsistency appears to stem from Safari’s default text sizes, which are 16px for “standard fonts” and 13px for “fixed-width fonts.” Safari 3α on OS X does not appear to suffer from this problem.

Highlighted by pabranch

The Safari monospace problem – iteration 6

Highlighted by allendog

For text set in pixels, Safari renders the monospaced font at the same size as the proportional-width text surrounding it. When text is set in ems, however, Safari renders monospace text much smaller than the surrounding text. The inconsistency appears to stem from Safari’s default text sizes, which are 16px for “standard fonts” and 13px for “fixed-width fonts.” Safari 3α on OS X does not appear to suffer from this problem.

Highlighted by allendog

Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers.

Highlighted by pabranch

Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today

Highlighted by palimadra

This more complex example and its accompanying style sheet demonstrate how to size nested elements using the body as the starting point.

Highlighted by pabranch

retain accurate control of typography, without sacrificing the user’s ability to adjust his or her reading environment

Highlighted by hkeziah