HTML and CSS Reference
In-Depth Information
Tight kerning—the spacing between characters—adds to the visual interest due to Cooper Black's round serifs.
By smushing letters together, we get a neat visual appeal.
In contrast, the rest of the site's text will be set in News Gothic
4
, which is significantly less outspoken as far as
fonts go. It has clean, strong lines and is extremely legible—even at small sizes—but doesn't jump out at the reader
like Cooper Black.
To assist with legibility, the kerning should be adjusted outward a bit to let the characters “breathe.” It also forms
a nice contrast with the headline font.
These two fonts complement each other well, and will make for a cohesive presentation that doesn't blend in
with the rest of the sites on the Internet using traditionally web-safe fonts, such as Arial and Georgia.
The final font choices look very nice when we put them together in a sample (see Figure
6-2
).
Figure 6-2.
A sample of the chosen fonts together
FONt reNDerING: PhOtOShOP VS. @FONt-FaCe
A common complaint from designers who don't have experience with web-based fonts is that they don't look
the same as they did in Photoshop. This happens because Photoshop uses different antialiasing than most web
browsers, which means the fonts will be rendered a bit differently. Most people won't notice the difference, but
the difference is enough to cause some heartache for a creative type who has just spent a week getting his
design just right (see Figure
6-3
).
Figure 6-3.
News Gothic rendered in the browser (top) and in Photoshop (bottom)
Fortunately, Photoshop provides options to change the antialiasing for fonts in layouts. One of these
options—strong—is similar enough to the antialiasing used by most browsers that it eliminates the noticeable
difference between a Photoshop layout and its appearance on the Web (see Figure
6-4
).
4
Search WWH ::
Custom Search