Typography is one of the most important elements of design.
The right typeface can add the perfect look and feel to your Web site, appeal letter, or annual report. But until recently designers were constrained by a very limited choice of fonts that could be used online. As a result, most designers relied on standard Web fonts like Arial and Verdana.
But with some exciting changes in technology, nonprofits now have more options than ever before when they’re choosing fonts for their Web sites and online communications.
New online resources such as Typekit, Google Web Fonts, and @Font-Face have changed Web design by offering hundreds of great fonts that render correctly on any Web browser. That change makes it easier for a nonprofit to find Web-compatible fonts that can help define its image.
Below are three examples of Web sites that are taking advantage of these options to make good use of typography. To show just how important typography is to each design, I have accompanied screen shots of the real size with an image of what the page would look like if the designer had chosen a different font.
The Noun Project. This site is creating a huge library of icons, most of which have Creative Commons licenses, so anybody can use them free. For a site that is focused almost exclusively on icons and typography, picking the right font was critical. Helvetica, one of the all-time classics, does a great job.
When this site is reworked with another standard Web font, Courier New, it changes dramatically as you can see below. With small point Arial in the search box —a common font in many Web forms—it’s just not as enticing to play around with. Within the classic Web-friendly fonts, the simple beauty of Helvetica seems to fit best.
826 Seattle. This site, which showcases a writing program for young people, has a classy look thanks to its use of the beautiful fonts Museo Slab and Futura.
When these two well-paired fonts are replaced with a universally available—and overused—Times New Roman shown below, the page instantly flattens from a severe lack of contrast. While all the other design elements remain the same, the site loses its elegance. This is a great example of how the availability of new Web fonts can open up a ton of new design possibilities.
Central Park Sydney. The Web site for this new mixed-use development in Australia combines the trendy Knockout font with the playful but elegant Archer to produce a modern, creative, and original look.
When the fonts are replaced by Georgia, an early Web font shown below, the site feels less unified and clean. Changing all capital headers for upper- and lower-case letters takes away from the elegance of the design.
Here are a few of the fonts I’m using a lot right now:
Futura, Gotham, Proxima Nova, Museo Sans.
What are some of your favorite fonts?