This is an older article, so some references and links may be outdated. Keep that in mind while reading. Thank you!
Typography on the Web
When designing for the web, stylesheets (CSS) are used to determine which fonts should be used. This works similarly to a stylesheet in InDesign or Word. The major difference between exporting a typeset PDF and displaying a webpage is that you can only use fonts that are installed on the computer displaying the webpage, while a PDF can embed the font information in the document.
This has meant that for many years, designers were limited to using one of the fonts they knew were installed on all computers to predict how the result would look. However, for some time now, a variety of different fonts can be used on the web.
The Classic Web-Safe Fonts
The list of fonts is quite short and includes fonts that many of you are likely familiar with from various places:
- Arial
- Verdana
- Courier
- Georgia
- Times New Roman
- Verdana
For a long time, this was one of the biggest differences compared to working with analog media, where you always had thousands of fonts to choose from and could play with sizes, kerning, and weights for many years.
Different Methods for Using Other Fonts
To work around this problem, various techniques have been developed over the years.
All headings (and to some extent body text) were created as images in Photoshop. This method produces aesthetically pleasing results, but it requires a lot of manual work, and you cannot select the text to, for example, copy it. It is also far from optimal for search engines that need to index the material.
Different techniques were developed to generate headings (either as images or in Flash from the heading text) and then replace the text when the page loaded. This was a good step forward, but it required that the device supported either Flash or JavaScript and could, in some cases, lead to a so-called Flash of Unstyled Content.
If you are interested in a bit of web history, you can look up the following techniques:
- Fahrner Image Replacement
- sIFR
- Cufón
Special font files. As early as 1997, Microsoft launched something called Microsoft Web Embedding Fonts Tool (WEFT), which created font files in the EOT format. The program made it possible to use special fonts in Internet Explorer, but this only worked in IE.
Some of the methods mentioned above are better than others, but all have their drawbacks. Fortunately, technology is advancing, and today we are well on our way to being able to work with the same typographic possibilities that we have had in the analog world for a long time...
Fonts as a Web Service
For a couple of years now, it has been technically possible to link font files via CSS to display other fonts than those installed on the currently used computer. However, it was not until quite recently that it became possible from a licensing perspective to use quality fonts in the same way.
First and foremost, it was thanks to web-based services like Typekit and FontDeck that act as intermediaries between font companies and websites. This means that, for example, Typekit has an agreement with the font manufacturer and then offers their fonts to all web producers via a subscription model; you simply subscribe to fonts for your website.
The biggest difference is also that in most cases, the font file is not on your server but is something that is loaded directly from Typekit to circumvent piracy and licensing issues.
Some font services for web fonts include:
- Typekit, now acquired by Adobe (loads fonts using both JavaScript and CSS)
- Fontdeck (loads fonts using only CSS)
- Fonts.com by Monotype Imaging
- Google Web Fonts (loads fonts using CSS or JavaScript)
Font Formats for the Future
There is also a new format called Web Open Font Format (WOFF), which is an open format for web fonts. Some font companies already offer their fonts in WOFF format, but both browser support and availability are still quite limited. WOFF can also contain metadata about the font so that it can be optimized for screens.
However, this is something that is sure to gain significant traction in the near future, as it allows for the purchase of high-quality fonts tailored for screens from reputable manufacturers and to have all files on your own server (thus removing third-party dependencies). WOFF has built-in license management, so to speak, so even if you download the font file, it only works on the website for which it is licensed.
Technically speaking, a font in WOFF is a TrueType or OpenType font packaged in a compressed format.
One of the font manufacturers that has been at the forefront of WOFF for a long time is Font Shop, which has many web fonts in its catalog and has also launched fonts specifically designed for mobile screens with a licensing model that allows the use of fonts in apps distributed via the App Store and similar scenarios.
Free Reign?
Not quite, there are still a few different factors that prevent mixing as many different fonts as possible on the same page. The main reason is performance, both in terms of loading times and how quickly the page renders.
Each font that is included must be downloaded to the browser before it can be used, just as each image must be downloaded before it can be fully displayed. More fonts lead to longer loading times and slower web pages.
Older computers may also experience performance issues when running a lot of JavaScript at once, and loading many font files via JavaScript can affect the overall performance of the website. So, as with so much else, there is always a trade-off between appearance and performance where common sense (and testing the results in different browsers) goes a long way.
"Vertical Rhythm"
It is quite common to use a common baseline when working with typography, so that headings, columns, and tables all maintain the same baseline. (A heading might take up 1.5 lines of body text and have 0.5 lines of margin so that headings and body text always align on the same baseline).
This can also be achieved on the web, although it places slightly higher demands on both designers and developers. I personally believe that these are things that will play an increasingly important role as we read more on screens since it is something we are used to from books and magazines.
Effects
There are so-called JavaScript solutions that make it possible to quite easily control many different types of effects on fonts. The most well-known is probably lettering.js, which is a plug-in for jQuery.
Enhanced Reading Experience
There are also services that enhance the reading experience on the web by taking the content on the site and presenting it in a minimalist view with a strong focus on typography and the absence of advertisements and other distracting elements. Check out Instapaper and Readability for two good examples. (Both are also available as apps for a more enjoyable reading experience on your iPhone or iPad.)
E-books and Magazines
In addition to these services, there is a significant investment in various types of e-books, magazines, and newspapers right now.
In the USA, Amazon has released an e-reader called Kindle, which is simply a digital device that can display various e-books purchased from Amazon.com. The major advantage of Kindle compared to, for example, an iPad is that the screen is matte, which means it feels much more like a paper book and works much better for reading in sunlight.
Magazines and interactive newspapers on iPad and Android tablets have also surged recently. For example, check out the magazine Wired on iPad for a great example of how to combine a magazine with interactive components as a complement to the print version.
Tips
Check how the font you have chosen looks in different sizes in various browsers; there can be a significant difference between 12px and 13px in, for example, Internet Explorer 8—so it may be worth double-checking and experimenting with different sizes to achieve the best possible result.
There is a difference between a font in web format and a font that is optimized for the web. The most suitable fonts are redesigned to look especially good on screens, and these are certainly preferable if the option exists compared to a font that has simply been converted to web format.
Links
History
- Flash of Unstyled Content
- Microsoft Typography - Font Embedding for the Web
- Revised Image Replacement
- Fahrner Image Replacement (FIR)
- sIFR
- WOFF