Great typography use is one of the most important factors in creating beautiful design. Unfortunately, at the same time web typography has been the most limiting and frustrating technology in web design and development for some time. Not too long ago, nearly every creative brief or brand conversation with clients would include the topic of which fonts we could use on their website. The answer would always lead to the depressing answer of choosing between Arial, Verdana, or a half dozen other typically supported fonts. Modern browsers and modern techniques are finally changing that.
There have been many different font replacement techniques over the years but each has had critical limitations that made them only practical for certain uses with certain designs. Image replacement using CSS looks and works great and is great for SEO but it could only be used sparingly because it requires creation of a new image and CSS changes to implement. sIFR was an ingenious workaround using Flash to replace text on the fly with beautifully rendered text, but alas it had many performance and occasional display issues and was difficult to maintain as new browser updates were released.
So, are we just stuck with Georgia headings until the end of time? Thankfully, no…
CSS3 and @font-face to the Rescue.
There are finally new tools at our disposal (and more importantly browsers that actually support them) that are helping create a more beautiful web. Newly supported CSS3 properties and some clever web services give us the ability to easily and securely embed thousands of different fonts that we were never able to use before. And using the @font-face rule these fonts are treated no differently* by the browser from the websafe fonts we’ve been using for so long.
Check out this example using CSS (rendered in your browser):
The quick brown fox jumps over the lazy dog.
As you can see from the example, there is a lot of power in using regular HTML text and CSS for the typography. And almost all of it works in every modern browser. The cool Lobster font is embedded from Google and then just like any other text we’re able add a link with a hover effect, a CSS3 text-shadow, and a dotted underline with a tooltip to define the word. And of course it’s as easy to change as any other text on the website using a CMS.
What Fonts Can I Use?
From a technical standpoint, any font you have on your computer could be uploaded and used on a website with this method. Of course it isn’t quite that simple. Without taking extra steps to secure the font, anyone who visited your site could easily download and use the fonts you embedded. Obviously this is a big issue to font foundries who spend many, many hours creating a new typeface. That essentially leaves us with two choices:
- Use a site like FontSquirrel or Google Web Fonts to find free fonts with progressive licensing that permit web embedding.
- Use a font delivery service such as TypeKit or Fontdeck that licenses, hosts, secures, and delivers the fonts while you pay an annual fee to use.
While it’s not every font you can think of or need, there is an already amazing selection of great (and sometimes free) fonts to choose from when designing your site. TypeKit alone has relationships with some of the top foundries out there including Adobe, FontFont, and Veer. The font choices get better and more diverse every week. If you design with these services in mind you can select fonts that both look great and are easy to implement in any system. With the quick adoption of the @font-face property there are suddenly a lot of competing font delivery services, fortunately there’s a handy chart to help us compare them.
What’s the Catch?
With great power comes great responsibility. Just because you have the ability to use whatever font you’d like doesn’t mean you should. It is important to consider a few things whenever your using this technique:
- Each custom font you include carries with it a pretty hefty page load impact. It depends on the service, settings, and the font itself, but each typeface you load will be about 50kb in weight.
- The effort required to browser test and debug will increase. As developers we’re used to picking Verdana for Windows and Helvetica for Mac and knowing they’ll look great. Other fonts vary more from browser to browser and could render better, worse, smaller, or larger in different situations. Also be sure to choose a comparable fallback font so if for whatever reason the font you want doesn’t load the site still looks good.
- Font selection can have a huge impact on the success of your site. Basic typographic principles are a much longer conversation than we have time for here, but in short your visitors should be able to discern at a glance what content is most important, be easily able to read copy, and know what to click on to get the information they want.
These aren’t huge issues but they do introduce factors that you previously didn’t have to spend much time on. As long as you follow best practices and properly test your site there is no reason you can’t introduce some fresh new typographic ideas on your website.