C H A P T E R 10
Styling Text
This is the first of three chapters containing design patterns that style text. The next chapter discusses
how to put space around text. Chapter 12 discusses how to align text. Strictly speaking, this is the only
chapter that actually styles text. The following two chapters style inline elements, which can contain text
or be replaced by images, objects, controls, movies, and so on.
Chapter Outline
- Font shows how to style text using fonts.
- Highlight shows how to highlight text using color and tiled background images.
- Text Decoration shows how to create custom styles for underlines, overlines, and
line-throughs. - Text Shadow shows how to automatically generate shadows behind text in
Internet Explorer 6 and Safari. - Text Replacement with Image shows how to replace text with an image. The text
is readable by screen readers and degrades nicely when the image is unavailable.
This is an essential tool for making sites beautiful and accessible. - Text Replacement with canvas and VML (Vector Markup Language) consists of
two separate parts: a font generator, which converts fonts to a proprietary format
using VML, and a rendering engine. An advantage of this technique is that users
can select and copy the text, whereas this is impossible with the image-
replacement method. - Font Embedding is a CSS3 alternative to the text-replacement techniques, which
uses the @font-face attribute to directly download a font file from the server
before applying it to an element. - Invisible Text shows how to hide text without adding markup. It isn’t as useful as
Text Replacement but requires no additional markup. - Screenreader-only shows how to make text readable by screen readers while
completely hiding it from sighted users. This is an essential tool for making sites
accessible for nonsighted users while keeping them uncluttered for sighted users.