A List Apart, for People Who Make Websites. 
  Fear of Style Sheets 4: Give Me Pixels, or Give Me Death.

GUERRILLA WARFARE pays little heed to niceties, and neither can designers in the trenches. In this article, the fourth in the Fear of Style Sheets series, we will pay little heed to the way things should work. Instead, we will show you what does work in any "CSS-capable" browser, no matter how old, inadequate, or semi-standards-compatible. If you wish to control your web typography with CSS (and why wouldn't you wish to do that?), there are only two things that always work:

  1. Use pixels (not points, not ems, not percentages, not keywords) to specify your font sizes. Or:
  2. Use nothing. Do not specify font sizes at all, and let the browser's stylistic defaults and the visitor's preferences take care of the relative size relationships. This approach has been so well explained in The DAO of Web Design, that we won't bother to summarize it here; instead, we'll merely remind you of the link:
    www.alistapart.com/stories/dao/

"Use pixels" is not what you want to hear, and it's not what the W3C recommends. But this is guerrilla warfare. These two approaches, pixels or "Dao," actually work. All others fail. More accessible options fail because not enough browsers are up to the job. Points, though widely used, fail because they were never intended to do the job. (More on that later.) A JavaScript solution that used to work fails as miserably as anything else in today's browsers. (More about that, later, too.)

When everyone who visits your site is packing IE5+, Netscape 6, or Opera 4 (and when IE/Windows cleans up a few inconsistencies) you'll be able to use CSS the way it was intended. Until then, use pixels to control your sizes (as you must when designing most commercial sites), or use nothing at all.

We're sure that some of you are already screaming, but we'll try to make our case anyway, because this is guerrilla warfare, and it's not about theory, it's about surviving to fight another day. >>>

  1. Give Me Pixels or Give Me Death
  2. Promise vs. Performance
  3. Font Size Challenges: Points vs. Pixels
  4. Keywords to the Wise
  5. Relatives and Percentages
  6. Wrapup

 

 
  Current issue.
Read previous issues.
Join the discussion list.
Search or browse previous discussion lists.
News, help and info.
Web design contest from H5 and ALA2.

"If you wish to control your web typography with CSS, there are only two things that work."

View a text-only version of this article.
Printer-friendly
Version
Plain text

 

Related ALA Stories:
Fear of Style Sheets
Fear of Style Sheets 2
Fear of Style Sheets 3
Fear of Style Sheets 4
Dao of Web Design
Why IE5/Mac Matters

 

Permanent bookmark:
This article is permanently archived at /stories/fear4/

© 2000   A List Apart
[Jeffrey Zeldman & Brian Platz]