Typography on the Web 41PrinciplesWeb DesignTypography on the WebWeb Design in a Nutshell, eMatter EditionResize Smaller in Increments
Images can be made slightly smaller without much degradation in image
quality; however, drastic resizing (making a snap-shot sized image postage-
stamp size) will usually result in an unacceptably blurry image. When
acquiring an image (whether by scanning or from CD-ROM), it is best to
choose an image that is slightly larger than final size. That way, you don’t
need to make it larger, and you won’t have to scale it down too much. If you
must make a very large image very small, try doing it in a number of steps,
fixing quality at each stage.
Be sure to keep a clean copy of the original image in case you make some-
thing too small. Starting over is better than enlarging the image or resizing
repeatedly.
Use anti-aliased text
In general, to create professional-looking graphics for the Web you should use
anti-aliased text.Anti-aliasingis the slight blur used on curved edges to make
smoother transitions between colors. Aliased edges, by contrast, are blocky and
stair-stepped. Figure 3-4 shows the effect of anti-aliasing (left) and aliasing (right.)
The exception to this guideline is very small text (10 points or smaller) for which
anti-aliased edges blur the characters to the point of illegibility. Text at small sizes
may fare much better when it is aliased.
The trade-off for better-looking graphics is file size—anti-aliasing adds to the
number of colors in the image and may result in a slightly larger file size. In this
case, the improved quality is usually worth a couple of extra bytes.
Typography on the Web
HTML was created with the intent of putting the ultimate control of presentation in
the hands of the end-user. This principle makes its most resounding impact when
it comes to typography. The stark fact of web design as we know it today is that
there is no way of knowing exactly how your text is going to look. Take a look at
Figure 3-4: With aliasing (left) edges are sharp and blocky; anti-aliasing (right)
provides smooth transitions between edges
Aliased Anti-aliased