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.
Web designers are finally coming out of the type coma of the last 15 years and using a variety of typefaces in their compositions. With the wide adoption of the @font-face CSS rule and the rise of Web font service bureaus, there are now close to 50,000 fonts available for your designs that will work on virtually all Web browsers – yes, even the Internet Explorer® platform. IE has supported Web fonts since version 4.
We've entered into a renaissance of the visual appearance of pages all over the Web. Designers are now experimenting with new ways of displaying text that were previously impossible or only achievable through the use of text in images.
2011 was a period of intense experimentation – some more successful than others – but there are some clear trends emerging in how Web typography will evolve and how it will differentiate itself from print typography.
1. Typographic Voice Diversity
Kitchen Sink Studios uses five different typefaces in their home page, but it works to create a unique voice, showing off their services.
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.
Some worry that this will lead to an explosion of fonts in designs, with inexperienced designers mixing a smorgasbord of typefaces, creating a cacophony of voices rather than a chorus. Time will tell, but at least the era of monotone typographic voices is finally at an end.
2. Larger Font Sizes
Information Architects website, informationarchitects.jp speaks softly, but carries a big font.
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
I start all my projects with a base font size 100 percent, which uses the browser's default size, generally 16px unless otherwise set by the user. I then use sizes set using the em unit to scale text larger or smaller as needed. Smaller text – like footer text and notes – can go as low as .625em (~10px assuming the base size is 16px), but body copy should be a minimum of .875em (14px) to 1em (16px) and headers start at one em and go to two em, three em, and even four em or larger. If you need help converting to PXs or PTs, PXtoEM.com is a great resource.
The transition to larger text may seem awkward at first – I've actually had to convince clients that the text is not too large – but once you adjust, small text will begin to feel cramped and amateurish.
3. Slab Serifs Fonts
German Website Pixelbäker uses the popular Museo Slab™ slab serif font (Exljbris).
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.
Egyptian Slate (Monotype), already popular in print, base become a popular slab serif Web font.
Slab serif fonts have serifs that are square and of generally uniform width, thus with little or no tapering at the ends. These fonts can have a strong typographic voice. Often feeling heavy and constructed, but because of this they are clear, stand out on a page and are easy to apply typographic effects to using text shadows, especially the letterpress effect.
4. Letterpress and Other Text Shadow Based Effects
British Design Firm Facio Designs Blog uses a paper texture background with a light letterpress effect.
A long time coming, text shadows are now available to Web typographers using CSS. Even better, since you can add multiple shadows to a single text block, there are a variety of new effects that are quickly becoming common on the Web, most notably the letterpress effect.
The letterpress effect up-close
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.
I put together a list of some interesting text-shadow effects
Aside from straightforward text shadow effects, letterpress is the effect I see most frequently, but there are many others, all achieved through the judicious application of text shadows.
5. Color Contrast
Contrast Rebellion is a site with a cause: fight low contrast text.
There's debate in the design community about the need for contrast in type – whether it's acceptable for the font color to be closer to the background color. Several argue that this is bad design, harming legibly and readability. However, many designers believe in reducing contrast in text, feeling that it adds an understated sophistication to the appearance, also allowing them to better guide the viewer's eye by mixing contrast on the page.
Recent studies support the notion that decreasing legibility can actually increase viewer focus and cognition. The logic goes something like this: if you force the viewer to take more time to read something by decreasing the legibility, then they are forced to pay more attention and retain the information longer. This argument is something of a mixed bag, however, since some of the studies have used the Comic Sans® face to prove the point.
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.
Still, there's a point at which low contrast goes from forcing readers to focus to just becoming unreadable. Colour Text Legibility is a great resource for testing foreground and background combinations, and will alert you based on the W3C's guidelines for color readability and Web accessibility guidelines to ensure you do not stray too far.
6. Mixing Font Weights
The Aspen Ideas Festival mixes different weights of the Futura® typeface (Neufville).
A lot of Web designers I meet think that "bold" is the font weight, but bold is actually a font 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.
The Neue Helvetica font family with weights ranging from ultra light to black
Additionally, many fonts use a base 100 number scale to indicate weight, with 100 being the lightest, up to the heaviest at 1000.
CSS, though, only has limited capabilities to directly access these weights. The font weight includes values for regular, bold, as well as 100, 200, 300, 400, 500, 600, 700, 800, 900, and 1000. However, if you use the @font-face rule, you can still use any of the font weights available by simply assigning each weight its own font-weight value or, alternatively, a unique font name for each weight.
7. More Space
The Future of Car Sharing site uses a lot of space and a horizontal scroll.
Along with larger font sizes, there is a trend toward more white or negative space in Web designs. This is partially in response to the realization that the above-the-fold rule was actually a myth (people do scroll and expect to, as explained in 2007 by Melissa Tarquini) as well the fact that larger monitors have become ubiquitous over the last several years.
More space in designs is a very good thing, allowing for easier scanning and cleaner, less cluttered designs. Many designers have started playing around with layouts that really only work on screens that scroll, and this trend will only continue as we begin to master the new powers that @font-face and CSS3 provide.
8. Responsive Typography
The Boston Globe reformats its layout and typography to fit desktop screens, tablets, and smartphones.
Although desktop monitors have gotten larger, the display screens on which we expect our design to be viewed are getting smaller, as more people view the Web through tablet devices and smartphones. The good news is that rather than returning to tight designs for our Web pages, we can create designs that "respond" to the device on which they are displayed.
Responsive Design (sometimes called "Reactive Design") is a development methodology which forgoes the one-size-fits-all philosophy of the past, and instead leverages CSS media queries and the JavaScript™ language to deliver designs that are tailored to the capabilities of the user's device. This means not only resizing images and interface elements but also tweaking the typography of designs so they scale up or down as needed. This applies to font sizes as well as column widths, line height and even justification in some instances.
Although it might seem like a pain at first to have to consider your designs as scalable, it will soon be a necessity. It is predicted that by 2015, mobile use of the Web will surpass desktop use and desktop use will begin to decline.
In addition to mobile, there are future screen types to consider. Although the fabled WebTV seems to be always just on the horizon, there is some very real movement in that arena with Google and Apple working hard to find the right formula. It may not be too much longer until you need to consider how your designs will look in a 62″ HDTV.
9. Handwritten Fonts
Lilac Creative uses the Coral™ Regular handwriting font (Scholtz Fonts) to give the site a friendly appeal.
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.
JasonSpeaking01 is my own homegrown handwriting font I created using the iFontMaker™ app. Download it free and let me know what you think.
In addition to the numerous commercial and free fonts available, it's also now relatively easy to make your own handwriting font, using the iPad® app, iFontMaker, vLetter's custom handwriting font service or other options.
10. 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.
The Frames and Borders Font (Outside the Line) contains a variety of images and symbols and is available as a Web font.
However, if you are using @font-face to embed properly encoded fonts, there is a close to 100 percent chance the font will be used. The advantage of using a font for a dingbat, in place of an image is scalability and styles. Whereas image-based icons are a fixed size, fonts can be quickly scaled up or down to any size, altered in color or have other styles changed on the fly without any loss of fidelity.
