A Multi-Face Strategy Is Often the Right Approach
In the list of website types that follows, we’ll describe sites in very broad terms. Actual sites, however, are not so easy to define. Complex sites often use various typefaces. They do that to represent a particular mood for that aspect of the site. They also do it as a visual cue; for instance, some news sites use one font for headlines and another for text. When using a multi-face approach, the concept of pairing is very important. Font faces must complement each other to work well.
Website Types and “Optimal” Font Faces
1. Business
In business, there is an important concept called branding. Typography is often an important aspect of that branding. The font should be readable and usable over a wide range of mediums. Times New Roman is a strong choice but perhaps too common. A font like Calibri is an excellent alternative.
Example of Calibri:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel eros libero. Nullam et gravida nunc. Etiam ornare metus eget augue pulvinar nec tempor erat imperdiet. Sed vel enim accumsan sapien rhoncus commodo eu ut tellus. Donec in convallis augue. Vestibulum mollis nibh diam. Proin dictum massa nec mi rhoncus ac fermentum ante hendrerit. Integer suscipit blandit metus sit amet scelerisque.
2. Government
Government websites are less concerned about branding. Their primary goal should be readability and professionalism. Powerful yet basic choices include Arial and Helvetica.
Example of Helvetica:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel eros libero. Nullam et gravida nunc. Etiam ornare metus eget augue pulvinar nec tempor erat imperdiet. Sed vel enim accumsan sapien rhoncus commodo eu ut tellus. Donec in convallis augue. Vestibulum mollis nibh diam. Proin dictum massa nec mi rhoncus ac fermentum ante hendrerit. Integer suscipit blandit metus sit amet scelerisque.
3. Store
An online store is a business, but it has much more going on than your average business site does. Amazon is a great example: It uses Veranda as its base and sprinkles in a wide range of other fonts for effect.
Example of Veranda:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel eros libero. Nullam et gravida nunc. Etiam ornare metus eget augue pulvinar nec tempor erat imperdiet. Sed vel enim accumsan sapien rhoncus commodo eu ut tellus. Donec in convallis augue. Vestibulum mollis nibh diam. Proin dictum massa nec mi rhoncus ac fermentum ante hendrerit. Integer suscipit blandit metus sit amet scelerisque.
4. Newspaper
Although Web-based newspapers are the wave of the future, they shouldn’t try to reinvent the wheel. Newspaper fonts are proven readable and effective. The most popular newspaper fonts in the U.S. for both print and digital editions include Poynter, Franklin Gothic and Century Old Style.
Example of Poynter:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel eros libero. Nullam et gravida nunc. Etiam ornare metus eget augue pulvinar nec tempor erat imperdiet. Sed vel enim accumsan sapien rhoncus commodo eu ut tellus. Donec in convallis augue. Vestibulum mollis nibh diam. Proin dictum massa nec mi rhoncus ac fermentum ante hendrerit. Integer suscipit blandit metus sit amet scelerisque.
5. Entertainment
The Rolling Stone website is an excellent example of an effective entertainment site. They have a custom font for their logo (Royal Acid) and splashes, but they use sans serif for text and serif for visual cues. These two fonts are particularly successful at complementing images and other media.
Example of Times New Roman - Serif:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel eros libero. Nullam et gravida nunc. Etiam ornare metus eget augue pulvinar nec tempor erat imperdiet. Sed vel enim accumsan sapien rhoncus commodo eu ut tellus. Donec in convallis augue. Vestibulum mollis nibh diam. Proin dictum massa nec mi rhoncus ac fermentum ante hendrerit. Integer suscipit blandit metus sit amet scelerisque.
6. Multimedia
A multimedia site is a bit different from an entertainment site. Here, the focus is almost entirely on the video, music or images. Therefore, the font is used sparingly, and when it is used, it should make a statement. Arial is a strong option, and emphasis can be used frequently.
Example of Arial:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel eros libero. Nullam et gravida nunc. Etiam ornare metus eget augue pulvinar nec tempor erat imperdiet. Sed vel enim accumsan sapien rhoncus commodo eu ut tellus. Donec in convallis augue. Vestibulum mollis nibh diam. Proin dictum massa nec mi rhoncus ac fermentum ante hendrerit. Integer suscipit blandit metus sit amet scelerisque.
7. Blog
With a blog, it depends entirely on the statement being made. A blog should be, above all else, readable, but beyond that, you have some options. For serious professional, use a newspaper font face. For casual professional, use a font like Georgia. To emulate a journal, consider a thin script font, such as Coventry Script.
Example of Georgia:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel eros libero. Nullam et gravida nunc. Etiam ornare metus eget augue pulvinar nec tempor erat imperdiet. Sed vel enim accumsan sapien rhoncus commodo eu ut tellus. Donec in convallis augue. Vestibulum mollis nibh diam. Proin dictum massa nec mi rhoncus ac fermentum ante hendrerit. Integer suscipit blandit metus sit amet scelerisque.
8. Portfolio
For a portfolio, the font should be audacious, and you should be willing to sacrifice some readability. The focus here, after all, is your work. A portfolio is a great opportunity to use custom font, but if you want something premade, consider using Broadway or Cooper Black.
Example of Broadway:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel eros libero. Nullam et gravida nunc. Etiam ornare metus eget augue pulvinar nec tempor erat imperdiet. Sed vel enim accumsan sapien rhoncus commodo eu ut tellus. Donec in convallis augue. Vestibulum mollis nibh diam. Proin dictum massa nec mi rhoncus ac fermentum ante hendrerit. Integer suscipit blandit metus sit amet scelerisque.
9. Kids
Sites for kids can be difficult because they have to achieve a balance between readable and fun and parents and children. For text, use simple fonts like Lucida Bright. For fun, consider a custom font or a font like Comic Sans, which is modeled after a common comic book font.
Example of Lucida Bright:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel eros libero. Nullam et gravida nunc. Etiam ornare metus eget augue pulvinar nec tempor erat imperdiet. Sed vel enim accumsan sapien rhoncus commodo eu ut tellus. Donec in convallis augue. Vestibulum mollis nibh diam. Proin dictum massa nec mi rhoncus ac fermentum ante hendrerit. Integer suscipit blandit metus sit amet scelerisque.
10. Social Interaction
For sites where the focal point is social interactions, such as forums, Facebook and Twitter, uses a font that is highly readable yet very relaxed. Twitter uses Lucida Grande, which is a superb choice.
Example of Lucida Grande:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel eros libero. Nullam et gravida nunc. Etiam ornare metus eget augue pulvinar nec tempor erat imperdiet. Sed vel enim accumsan sapien rhoncus commodo eu ut tellus. Donec in convallis augue. Vestibulum mollis nibh diam. Proin dictum massa nec mi rhoncus ac fermentum ante hendrerit. Integer suscipit blandit metus sit amet scelerisque.
11. Resource
On informational sites, you need consistency and flexibility. Optimally, a single font should do it all. For this reason, many resource sites use a font like Hoefler Text. It has classic appeal, can be comfortably read for long periods, and includes a full range of font features.
Example of Hoefler Text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel eros libero. Nullam et gravida nunc. Etiam ornare metus eget augue pulvinar nec tempor erat imperdiet. Sed vel enim accumsan sapien rhoncus commodo eu ut tellus. Donec in convallis augue. Vestibulum mollis nibh diam. Proin dictum massa nec mi rhoncus ac fermentum ante hendrerit. Integer suscipit blandit metus sit amet scelerisque.
12. Search Engine
Optimally, a search engine requires a font that can be read equally well at small and large sizes. Verdana works particularly well, which is why Google uses it. In addition, this kind of font is appealing on smartphones and tablets when zooming in and out.
Example of Verdana:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel eros libero. Nullam et gravida nunc. Etiam ornare metus eget augue pulvinar nec tempor erat imperdiet. Sed vel enim accumsan sapien rhoncus commodo eu ut tellus. Donec in convallis augue. Vestibulum mollis nibh diam. Proin dictum massa nec mi rhoncus ac fermentum ante hendrerit. Integer suscipit blandit metus sit amet scelerisque.
Conclusion
The right fonts must read well and pair well. They must also support the right sizes and features. Before you choose a typeface, define what the visual needs of the site are or will be. Then you can select a font that is aesthetically pleasing but also meets those requirements.
