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 inpx
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 ...
Get HTML & CSS: The Good Parts now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.