The last thing any designer or website owner wants is to find out after finalizing a new branding style guide or website mockup that one or more of the fonts they’ve painstakingly selected is not available for the web, or has a prohibitively expensive web font license. I’ve seen it happen, and it’s disappointing for everyone involved.
What’s a Webfont, Anyway?
You may be wondering why you suddenly have these additional licenses and types of font files to deal with when we’ve been building websites for a long time and webfonts are newer technology. We must have had some way of dealing with this before, right?
Well, yes and no.
Body Copy: The Old Way
We used to recommend that the main text of a site be in a “web-safe font,” as you can see in this excerpt from the Aeolidia archives:
For the main text on a site, it’s important to use a font that most computer users have on their system (or they will see the default font instead), and that will be readable at small sizes without anti-aliasing. There are only a few fonts designed for the computer screen that will still look clear and readable at 10-12 pixels.
There’s still some good advice in that excerpt. You do still need to be careful about readability at small sizes – not all premium fonts work well for body copy across browsers – and it’s still always a safe bet to use one of those original web-safe fonts (Verdana, Arial, Helvetica, Georgia, Times New Roman, etc.).
That said, there are now plenty of other fonts we can use for the web, so we certainly don’t have to limit ourselves to those old standards. There are even some really great free fonts suitable for body copy, and good designers (like all the great Aeolidia folks) are well-versed in selecting the good ones.
Headlines & Display Text: The Old Way
The other strategy we used to use was putting text into images. This has been retired as a technique for a variety of reasons, including:
- It’s usually a nightmare for anyone trying to use the site with a screen reader
- It can really increase loading time to have all those extra images
- It looks terrible on retina unless you were to individually optimize every image
- It’s much less flexible for updates and text edits
- It’s hard for search engines to index the content on the page when it’s all trapped in images
You can see why that’s not a technique we recommend anymore, except in some very specific instances (ads, for example).
The New Way
Instead of limiting ourselves to those few standard fonts or using the (now dreaded) text-as-an-image method, we’re now able to actually load certain types of font files along with all our other website files and display those fonts for our visitors via a technology called webfonts. These are basically font files that have been reformatted to work in the browser (this also required changes to the way browsers work to make it happen).
Webfonts are awesome because we can apply them to any text in the site, including text generated by a content management system (like WordPress). Also, all that text is clearly laid out in the code which means it’s accessible for various assistive devices and can be read and indexed by search engines.
What to Look For
Not all fonts are available with all the file types and formatting needed for use online – that’s why we occasionally run into that problem described earlier where we can’t exactly match a design or branding guide. When you’re looking through fonts online, you’ll want to make sure they’re marked as having a webfont available. Different sites do this in different ways:
Again, a good designer will help you navigate all of this – that’s one great reason to work with someone who’s familiar with the landscape of webfonts and providers. The key is to make smart choices as early in your project as possible about which fonts you’re using, and to understand that webfont licenses are often part of what you’ll need to budget when you take on a new site project.
Now you know why we web folks are so excited about webfonts. In an upcoming post, we’ll dive deeper into what you need to know about licensing to start using them.