Internet memes have popped up deriding the use of Comic Sans on signs and business documents. The Impact font has taken on additional life powering Lolcat images (including the iconic “I Can Haz Cheezburger”) and other such amusements. Steve Jobs was recognized as being obsessed with typography, and many believe that his attention to type as a critical detail is one of the reasons why Apple-designed interfaces are so clean and beautiful.
In the world of the web, however, type wasn’t always that important – in fact, the lack of font choices was apparent. A pairing of Arial/Helvetica, or Times/Times New Roman, were the stock choices for most websites. If you were adventurous, you might break out Georgia, Verdana or Lucida, if you were willing to have your site look a bit different on a few screens. The reasons had largely to do with the tech of the time – you could only display a font on a screen if the user had it installed on their computer. You could do fallbacks, telling the browser to display the default serif font if they didn’t have it installed. For logos and headers you’d lean on graphic representations of fonts made in Photoshop or other image editing programs, something that required a bit of know-how to do.
Thankfully, that’s all changing. There are thousands of fonts, made by talented foundries and individuals, that can create a unique feel for your site. Thanks to newer technologies, we can break out of using flat graphics and switch to web fonts.
Web fonts make it easier to make an SEO-friendly site without trickery, allowing headlines, body type and navigation to be rendered in a different font instead of using graphical elements to accomplish the goal. Fonts can be embeddable via CSS (when allowed by a font’s license) or using third-party tools such as TypeKit or fonts.com. Google offers up a free option with their Google Web Fonts.
The power of a well-crafted custom font was on display recently during a vacation I took down to Virginia. Earlier this decade the federal government approved a new font for use on highway signage, called Clearview, appropriately enough, that was designed to be more legible without making highway signs bigger or more cluttered. While I haven’t seen this in use in the Northeast other than an occasional sign here or there, in Virginia and Maryland many of the signs had been updated. As someone who wears glasses for driving, I immediately noticed the difference and was able to appreciate the changes the new font allowed.
Any site launching or redesigning should consider fonts as one factor of what they want their design to invoke. Here are some things to consider:
- If using multiple fonts, make sure the fonts blend well together as a package. Blending fonts that don’t go well together can make a site feel disjointed. There are websites that suggest fonts that go well together; it’s not an exact science, so part of it is finding a set that both matches your aesthetic and looks good to you.
- Picking good fonts can help a page feel less cluttered while garnering you the appropriate impact. When the new highway font was developed, their original instinct was to just make the existing font bigger, but that would require more cluttered (and larger) highway signage. Good font selection helps avoid the clutter.
- Know your audience. If you’re targeting an older crowd, bigger, bolder fonts that are easier to read will go a long way to making the site more navigable. If you’re targeting a younger crowd, you have more leeway. The same goes for font sizing.
- Know your brand. If you already have a design direction for other media, such as print, leveraging the same fonts will create a brand unity. But also be willing to break the mold when it’s just not working out on screen; some fonts are not web friendly.
- Know your licenses. Some foundries do not currently offer web fonts; technologies like Cufon allow for embedding of fonts that don’t otherwise have it, but there are technical limitations and not certain fonts are allowed to be embedded at all.
- Font weights render quite differently depending on the OS and the version. Windows XP is particularly bad at rendering fonts, but given that web fonts were just a glimmer in the eye back then, that’s to be expected. Windows Vista and later have ClearType, which helps a lot, and Mac OS has nicer type rendering across the board, thanks to Jobs and co.
- Make sure the fonts you’re selecting mesh well with the design; this is especially critical if you’re planning on rolling out web fonts on top of an existing design.
- Don’t go crazy with fonts and weights; remember that you’re embedding files to the page to make that happen, and the more you embed, the longer a page takes to load. Worse, you may get a “flash of unstyled type” where a different font appears for a brief moment before the web font appears, if the fonts lag behind the rest of the page. You can mix and match, but limit the number of variants of each font you’re using (bold is one, italic is another, light is another, bold italic is yet another, etc.).
Web design has become even more exciting with the addition of web fonts. If you’re planning to update your website, it’s something to consider, as even a subtle use of fonts can go a long way in making a site pop. Just be sure to use them judiciously and carefully and you’ll end up with an attractive site that looks quite modern!
Questions or comments? Share them below, or tweet us @Pixafy!
