Last year, 2011, was the year that Web typography finally came of age as Web fonts have grown in popularity. The history of Web design
has been full of inspiration and innovation, but little of that has
been around typography, in large part due to the lack of font choices
available.
To be sure, typography is about far more
than just the font, but when you only have five fonts to choose from
for most of your work, imagine a culinary world where you could only
choose from five ingredients. Here are some typography trends for your
inspiration.
Mixing Font Weights
A lot of Web designers I meet think that
“bold” is the font weight, but bold is actually afont weight. Although
certainly the most common, bold is not the only weight available for
fonts. There are also thin, light, medium, heavy, black and many others.
For example, the Neue Helvetica® design includes weights ranging from
ultra light to black.
Dingbats Instead of Images
Although the Webdings® font is one of
the Microsoft® core Web fonts preinstalled on virtually every computer
in existence, using this font for icons in Web pages has never caught
on. There is a simple reason for this: the font will not display in the
Firefox® browser. The reason has to do with how the font is encoded, but
the upshot is that you can’t use them.
Handwritten Fonts
Handwriting fonts are another design
type that’s becoming increasingly popular. Despite how many feel about
Comic Sans – the most notorious handwriting font of them all – type that
looks as if it were written by hand gives a friendly, open, and
approachable feel.
Letterpress and Other Text Shadow Based Effects
The letterpress effect is achieved by
placing text on a contrasting, but not 100 percent contrast background
color (i.e. not 100 percent black or 100 percent white), and then
offsetting a text shadow with a color lighter than the background down
and to the right and a darker drop shadow up and to the left. The offset
should be only slight – one to three pixels depending on the text size –
to avoid having the corners show a gap. Smaller type will not need any
blur, but larger type may need a slight blur added to soften the effect
slightly.
Slab Serifs Fonts
One important concern for Web typography
is legibility, making sure that characters are as easy as possible to
discern. There are a lot of factors that go into making a legible font,
but two of the most important are consistent strokes and either thick
serifs or no serifs at all. Thinner serifs tend to get fuzzy at the
edges, as they are blurred for anti-aliasing. For this reason – as well
as general style reasons – we are seeing a lot of slab serif fonts
being used in Web designs over the last year.
Typographic Voice Diversity
Type is to text what voice is to speech.
The fonts you choose have a dramatic impact on the tone and emotion of
the message you are presenting. As the famed book designer Richard
Bringhurst put it, “When the type is poorly chosen, what the words say
linguistically and what the letters imply visually are dishonest,
disharmonious, out of tune.” Now that we are no longer limited to the
“Fatal Five” families – the Arial®, Georgia®, Trebuchet® MS, Times®, and
Verdana® faces – we are free to explore, mix and match a wider variety
of typographic voices.
Larger Font Sizes
Text on the Web has been too small for
far too long. For a variety of reasons including the “above the fold”
myth and the belief that small type looks more sophisticated, most type
on the Web is set on the screen at 12px or lower. However, as a clever
yet simple experiment by Information Architects has shown, 12-point
printed type is visually the same size as 16-pixel screen type.
Color Contrast
Designers intuitively know that perfect
contrast can be visually dull. Black text on white background is much
like making everything bold; everything is important so nothing stands
out. You need contrast to engage the viewer’s eye and help them
prioritize what they are looking at, and one way to do that is with
different color contrasts.