Web fonts are bringing the aesthetics of print design to the web. Here's how to make best use of them.
Over the last few years, the possibilities for using type on the web have expanded enormously. In the bad old days of the web, designers were restricted to a few 'web safe' fonts, which meant everything looked pretty much the same, or using images to replace the type – a clunky solution that caused problems for the reader and technical problems in the browser. Nowadays, though, you can access an astonishing array of professional typefaces for use on your sites, bringing the aesthetics of print design to the web.
Since around 2010, widespread support of @font-face in all the major browsers, plus a new web open font format, WOFF, has led to a technical revolution and the rise of a number of web font hosting services. These companies allow users to pay a subscription to host an enormous range of web fonts on their website. Popular services include Typekit, Fontdeck, WebINK and Fonts.com.
Tim Brown is the type manager at Typekit. Here are his tips for getting started with web fonts.
01. Be selective
Typekit fonts rock out in these digital posters from Voltage Fashion. Left: Hellenic Wide, League Gothic and Bello Caps; right: Vinyl
Pick a typeface that is appropriate for your content (read it, and know your font through and through); appropriate for its context (use text faces for body copy, and so on); and web-ready (both properly licensed, and optimised for the medium).
02. Put type first
Once free from traditional 'web safe' fonts like Verdana and Georgia, make design choices based on the typefaces you use. Building a composition outward from the type produces very different results to swapping fonts into an existing design. The principles of 'Typography First' are explored in this article by type guru Elliot Jay Stocks.
03. Take your time
The web may move at lightning speed, but quality typesetting requires lots of patience. If you don't stick up for the time it takes to do a job with precision and diligence, who will?
04. Know what's out there
At Typekit, we do several things to help point out typefaces that are worth a look. For example, Jason Santa Maria spearheads a column called About Face, in which we profile specific fonts. While Lists are used for finding alternatives to common fonts, and grouping web fonts in ways metadata can't.
Typekit also recommends web fonts for Paragraph or Heading use within its font-browsing interface. When you've found fonts you like, you can mark them as favourites, or add them to kits and get right to work on your website.
With around 100,000 fonts available, 99.9 per cent of them are created for high-resolution print outputs. So, what now for web designers? Peter Bil'ak, founder of Typotheque adds five more tips to help you create the best web font designs for your online needs:
06. Be mindful of file size
Typotheque fonts can support as many as 200 languages, which results in fairly large files. A single style of Fedra Sans can be as large as 400K. While this may not appear large, serve it thousands of millions of times and it starts making sense to optimise it.
One approach is to strip out unnecessary characters from the web font version. Most web browsers can access only a small fraction of those characters anyway.
07. Stay across browser updates
Bear in mind that browsers are constantly changing. For instance, the latest version of Firefox can now display advanced OpenType substitutions such as small caps, ligatures, swashes and different numerals. This means some options that are usually stripped out can now be included if required.
08. Design for the medium
The Lost World’s Fairs site was praised for the personality afforded by its use of web fonts
Consider what kinds of web fonts will function best on screen. Sturdy sans serifs usually work well. But they also need to have proportions that are suited for reading in small sizes, which generally means having larger x-height and omitting finer details that can't render well on screen.
09. Explore new scripts
There are over 400 languages in India. While in the West we have plenty of fonts for the Latin script, I've encountered writing scripts that have limited or no digital fonts at all.
My company, Indian Type Foundry, is one of the first to do so, and the country is becoming increasingly design-conscious - so the opportunities there will grow.
10. Test, test and test again
As a designer using web fonts, be sure to test their appearance across different platforms and different browsers. It sounds an obvious thing to do. But it's all too common to design a page on a Mac when most readers use Windows and will see something quite different from how it was originally designed.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
