HTML & CSS: The Good Parts

Sizing Type

If there’s one thing that gets trained designers excited, it’s control over type. CSS delivers, for the most part; if a font can be rendered by a visitor’s browser, its characteristics can be controlled by the stylist. This is especially important with respect to the size of type, which follows some fairly basic rules:

• Trained designers who are stuck in a print-media mindset fail to grasp the degree of control that most users have over type sizes. For this reason, it’s usually best to set your baseline type size in pixels, for example:

  body { font-size: 14px; ... }

  and then control type size down the cascade with em or percentage units (which are functionally identical). Stylists who work on sites targeted at large numbers of IE 6 users may need to disregard this recommendation for usability reasons, which become important because of IE 6’s complete inability to zoom text ultimately set in px units.

• Heading sizes are set by the browser as a proportion of the base font size. It’s usually best to preserve this behavior by relying on a comparable approach when assigning heading resets, a step that allows headings to better withstand layout changes. If you’re implementing bitmapped headings, you might find yourself adding background-position values to your image replacement rules to account for this change in approach.

• If you need absolute control over the dimensions of an element, set its content as an image and supply the actual text in that image’s alt value. Such situations ...