typography for the web
·Index·
A lot has been written and discussed about the exciting developments in font usage on the web - these changes have us all quivvering with joy - envisaging designs which use some of our favourite print fonts. Before you jump straight in and get carried away (which is easily done if you like typography) - let's have a look at a few basics first & then onto a few options for using different fonts for your web designs.
There are a plethora of resources, references, articles and websites out there for the enthusiastic typophile. I would encourage you to read up on the various elements of typography and get more familiar with the terminology used as well as the details of type setting. I will not be able to do this subject justice in one article, of course, and will focus on typography for the web alone and some its core principles.

typeface? font? ~ what’s the difference?
definition: typeface
The typeface is the design, the form. It can have variants, such as bold, italic etc, all of which will keep the form of their original typeface intact, merely becoming a stylistic variation of the original. Designers will consider and decide on typefaces to fit the design and purpose of their project in hand. A typeface is something you see - the actual shape and form of the letters, carefully crafted by a type designer.definition: font
In contrast, the font is the file which allows the final type to be applied to the design. This used to be the collection of metal fonts for a type variant in the old days of print. Since the arrival of digital media, a font is now the file which you need to have installed in order to use your chosen typeface or type variant. A font is something you use - the format which contains the variant of a typeface. This could be .ttf (TrueType font), or .otf (OpenType font), or any other digital font format.
fonts on the web, the early days


font replacement techniques
With these limitations of available fonts to choose from - designers were desparately looking for solutions to use mosre custom fonts. The developers and programmers were listening and over a period of time quite a few different solutions surfaced. The aim was to replace short sections of text, such as headings and short citations, with either an image or a custom font directly. The drawback of most of these solutions remains their reliance on enabled Javascript and/or Flash. Most of the technqiues emerging in the early 2000s work in a similar way: first, the standard (X)HTML page is loaded into the browser. Next, a script is run (Javascript) which checks for browser capability and the selected text section’s type is replaced with a custom setup. This could be replacing the text with a static image, containing the text in its chosen typeface, or replacing the standard font with a server-hosted, embedded file. Though on a fast connection and with a speedy processor - this change is made almost instantly it is not unusual to see the FOUC (flash of unstyled content). If the connection or computer speed it slow then these techniques do give away the game. For a brief instance, the webpage will be rendered using the standard fonts before the replacement is complete, visibly replacing the existing typeface with the final one. Unfortunately there is not much you can do to stop this from happening apart from making sure to use the lightest and most minimal scripts to reduce loading time which by no means guarantees a fast replacement on page load. Due to the disadvantages mentioned above I don’t want to go into much depth with these techniques. But it will be useful to know a little bit about the most popular ones so here is a quick look at the most common ones:- simple text replacement with image
- The most commonly used trick in the past used to be to simply replace the text with an image containing the same text, presented in its preferred typeface. The typical method is to keep the text in the HTML page and use CSS to display an image as background image via CSS. Typically, the text then gets hidden with a negative text indent, allowing it to be accessible still to search engines and screen readers. The advantage of this technique is that it relies only on CSS and no additional scripts.
- sIFR (Scalable Inman Flash Replacement)
- Based on IFR (originally by Shaun Inman) - this technique was developed in 2005 by Mike Davidson, further developed and improved over the following years with the help of others. sIFR allows you to replace text elements with a Flash file via Javascript. The font is embedded into a .fla file and stored on the server. With this setup, the (X)HTML page get loaded first. Then a javascript function checks whether the browser has the Flash player plugin installed and if found proceeds to look for your set tags, ids or classes. Next, the found elements get measured (again, via a Javascript function). A Flash movie gets produced at the same size as the element/s measured, the HTML text gets used in the Flash file and the resulting Flash movie is placed on top of the relevant HTML element. Actionscript then fine-tunes text size. If Javascript is not enabled or the Flash player plugin is missing, or both, the browser will simply show the original text.
- Cufón
- Cufón takes a similar approach and replaces text with a vector graphic via Javascript. This technique relies on your font being converted to a compatible format via their own generator and the resulting file to be hosted on the server. With Cufón, there are two steps: first, you use the Javascript engine to convert your font into the right format, ie the representative vector equivalent. Secondly, you target your chosen elements by editing the Javascript. This technique is relatively easy to implement and relies on one additional script. If Javascript is not enabled the browser will simply show the original text.
- P+C DTR(PHP + CSS Dynamic Text Replacement)
- Based on Dynamic Text Replacement by Stewart Rosenberger - this technique is similar to its original but avoids the use of Javascript. Initally developed by R. Marie Cox - further developed by João Makray, P+C DTR uses output buffering function of PHP to find the heading tags on the page, extract the text and assign inline styles, pointing to the image generation script. This method takes the load of the replacement onto the server, therefore cutting out the reliance on client-side scripts.
font stacks

working with fonts stacks
font families
There are 5 different font families used for text styling via CSS; the examples shown here are styled by applying the generic font family alone.- serif for example: Georgia, Times, Times New Roman
- sans-serif for example: Lucida Grande, Helvetica, Arial, Verdana
- monospace for example: Courier New, Lucida Console, Andale Mono
- cursive for example: Caflisch Script, Snell Roundhand, Zapf-Chancery
- fantasy for example: Impact, Copperplate Gothic, Papyrus
definition: font stack
A font stack consists of a list of fonts, defined in the font-family declaration in CSS. Listed in order of preference, the fonts are used when available via the end user’s computer.commonly used font stacks
Go online and do some research on recommended font stacks and you will find a huge list of various combinations. Opinions vary as much as the font choices. Here are a few of the most popular stacks, some widely used - some as set by default via coding apps, again, the examples shown here are styled by applying the generic font family alone (note the evident differences in typeface appearance):- Arial, Helvetica, sans-serif
- Courier New, Courier, monospace
- Times New Roman, Times, serif
- Georgia, Times New Roman, Times, serif
- Verdana, Arial, Helvetica, sans-serif
- Geneva, Arial, Helvetica, sans-serif
creating your own font stack
- your preferred font If the name of the font family is more than one word, you will need to add quotation marks around the full name.
- a close alternative This could be simply your first alternative, or a font selection based on the availability of the preferred font on different systems
- one or more possible substitutions You can add several alternatives, as many as you think you might need, though you don’t need to many in most cases.
- font family Lastly, always include the correct font family. This will ensure a safe fallback should all other fonts be missing.

@font-face

introduction
web font formats
- EOT : Embedded OpenType : .eot
- This early font format by Microsoft is proprietary and exclusively supported by Internet Explorer. EOT fonts are required for all versions of IE, especially for all earlier versions. Only IE9 includes support for the WOFF format as well.
- TTF : TrueType : .ttf
- Developed by Apple as a competitor to Adobe’s Type 1 format, used in PostScript. TTF fonts were soon widely adopted as the most common format for system fonts and are now compatible with most operating systems.
- OTF : OpenType : .otf
- The OTF format was developed by Microsoft and Adobe and is based on the TrueType format. It does include typographical features such as ligatures though these are not yet fully supported by all browsers.
- WOFF : Web Open Font Format : .woff
- The WOFF format is currently in the process of being standardized and the W3C who published a working draft in July 2010 is expecting it to become the interoperable format which all browsers will use in future. It is important to note that WOFF is not actually a font format per se - but rather a wrapper containing fonts such as TTF and OTF.
- SVG : Scalable Vector Graphics : .svg
- SVG fonts are different to other font formats as they contain the letter outlines as vector objects. SVG fonts are usually quite heavy in file size as they do not have the compression built in as other formats do. The most common use of this format remains either the iPhone and iPad, prior to iOS4.2, or their implementation via web font providers (as covered in more detail later).
using @font-face
STEP 1 - convert font file to appropriate formats:
There are various online tools available to use for font conversions. Some allow you to convert to specific formats only, others are available as downloadable app. For example, the ‘eotfast’ app is a PC only program which converts .ttf fonts to .eot.

STEP 2 - write the CSS:
The CSS code in its most basic form:/* load font */
@font-face {
font-family: font family name;
src: url(http://site.com/fonts/fontname.otf) format('opentype');
}
/* apply font */
p {
font-family: font family name, font family;
}
Starting with @font-face
, first the font-family
is defined. The src
property contains the link to the font file itself, followed by the font format
. The linked font is then applied to the chosen HTML element. This would be all that’s needed if all browsers had the same functionality in regards to font formats.
As browsers however vary - the @font-face rule will need to double up and declare different sources and URLs, linking to the different font formats. For InternetExplorer - the selected font file will need to be in .eot format, for most other browsers the format could be .otf, .ttf or .woff - and iOS prior to 4.2 will require .svg.
@font-face {
font-family:'Vollkorn';
src: url('Vollkorn.eot'); /* just for you, IE */
src: url('Vollkorn.woff') format('woff'); /* for all modern browsers */
src: url('Vollkorn.ttf') format('truetype'); /* for Safari, iOS>4.2 & Android */
}
The problem is that IE will try to implement the second alternative as well and try to download it. By including
format()
- which IE does not understand - it will reverse back to the previous declaration and implement .eot. Developers point out that it will be better to avoid the error which IE encounters when looking up the file name via the url
value.
One solution around this is to include a local reference in the src
property, before the url
. IE can not understand the local()
location nor multiple locations so it will simply implement the last valid declaration, in this case the .eot file. This technique has the added advantage of loading time - both for you while producing the site and for your site visitors should they have your chosen and embedded font installed on their computers. Listing multiple locations you can also list multiple formats within the same src
property.
Bear in mind that Safari will require the PostScript name of the font - you should include it as well if it differs from the full font name.
One solid and widely used solution for this is the "Bulletproof @font-face syntax" by Paul Irish.
You will also need to include the different variants of your typeface, if required. So if you want to use regular, bold as well as italic - make sure to include the correct details as well. As you can see - the use of many variants or many fonts - can add to the length of your CSS considerably, as well as requiring more calls to the server and also increasing the loading time (especially on mobile devices). So plan ahead carefully and choose your select typefaces carefully before collecting your webfonts for conversion and inclusion.
@font-face {
font-family: 'Vollkorn';
src: url('Vollkorn.eot');
src: local('Vollkorn Regular'), local('Vollkorn'),
url('Vollkorn.woff') format('woff'),
url('Vollkorn.ttf') format('truetype')
url('Vollkorn.otf') format('opentype'),
url('Vollkorn.svg#vollkorn') format('svg');
}
As this approach gives control over to the site visitor’s machine and accesses the local version of the font - there were some concerns about the guaranteed use of the chosen font. If, for example, the font name on the local machine was altered or if it is referenced differently - the wrong font might be used. To address this - Paul edited a second version, the ‘smiley variation’ which he recommends over the first version.
Instead of specifying the local font name - a smiley face character gets inserted in place of the name. While this does prevent the local font from being used - the local()
location still prevent IE from trying to read the other font formats and keep it using its allocated format .eot.
@font-face {
font-family: 'Vollkorn';
src: url('Vollkorn.eot');
src: local('☺'),
url('Vollkorn.woff') format('woff'),
url('Vollkorn.ttf') format('truetype')
url('Vollkorn.otf') format('opentype'),
url('Vollkorn.svg#vollkorn') format('svg');
}
Another solution to prevent the error for IE was developed by Ethan Dunham: The New Bulletproof @Font-Face Syntax. It works by appending a question mark to the .eot declaration. This will be interpreted by IE as a query string, causing it to ignore the rest and implement the .eot font.
src: url('Vollkorn.eot?');
While I was learning how to use the @font-face rule - "Bulletproof @font-face syntax" by Paul Irish - was and still is the main article which I refer to and which has informed my understanding and current coding practices. Make sure to read it yourself, it’s brilliant and clearly outlines how this solution was developed.
Thanks, Paul :)
references & reading

typographical references
- The Elements of Typographic Style Applied to the Web
- Typedia
- TypeWiki, on typophile.com
- Font Matrix, Richard Rutter for 24ways.org, 2007
- The most common Linux fonts, Philip Shaw on codestyle.org
- The most common Windows fonts, Philip Shaw on codestyle.org
- The most common Mac fonts, Philip Shaw on codestyle.org
useful reading
- A List Apart: Topic: Design: Typography
- Web Design is 95% Typography, Oliver Reichenstein for iA
- A Web Designer’s Guide to Linux Fonts, Michael Tuck for SixRevisions
- Five simple steps to better typography, Mark Boulton
- type anatomy, typomil
- Increase Your Font Stacks With Font Matrix, Richard Rutter for 24ways
- Better CSS Font Stacks, Nathan Ford for Unit Interactive
- Revised Font Stack, Amrinder Sandhu
- Thinking with type
- Type study: Sizing the legible letter, Ethan Marcotte for Typekit blog
- What makes letters legible?, Ralf Herrmann
- How to use CSS @font-face, Tim Brown
- Bulletproof @font-face syntax, Paul Irish
- The @Font-Face Rule And Useful Web Font Tricks, Ralf Hermann
- Fonts available for @font-face embedding, Ralf Hermann
- @font-face in IE: Making Web Fonts Work, Jon Tan
- Typeface != Font, Jon Tan
tools & games

font tools & helpers
- Font stack builder, Philip Shaw on codestyle.org
- CSS Font Stack, snapsize.com
- TypeChart, Panduka Senaka
- TypeTester, Marko Dugonjić
- Shape Catcher, unicode character recognition, Benjamin Milde
- HTML character codes, Jason Simanek
- WhatFont, bookmarklet for Safari and Chrome, Chenhyin Liu
- FONTDROPPER, bookmarklet: drag & drop web font tester, WebINK
- What the font?, typeface recognition, MyFonts
- TypeIt, type accent marks, diacritics and other characters, Tomasz P. Szynalski.
- modular scale, by Tim Brown
challenge yourself!
- KERNTYPE - a kerning game
- Shape Type - a letter shaping game
- The rather difficult font game
❤ typography

type discussions & showcases
- I love typography, blog by John Boardley
- we love typography, showcasing websites with beautiful typography
- typesites
- nice web type, Tim Brown
- TYPEDECK: "Exploring all things typographic." Imar Krige
exemplars of typographic excellence
- Seed Conference, set in a single typeface: Times
- colly.com, Simon Collison
- jasonsantamaria.com, Jason Santa Maria
- 陳 Jon Tan, Jon Tan
- danielmall.com, Daniel Mall
- trentwalton.com, Trent Walton
Barbara, very glad you like the links, have fun reading :)
And thanks for the fontfriend link – lovely :)
Thanks Prisca for all these links – now I just need to find time to read them all! :)
I found this little tool the other day which I don’t know if you know, but I found it quite handy: http://somadesign.ca/projects/fontfriend/
it’s similar to Fontdropper but works slightly differently, letting you apply the chosen font to specific selectors globally, or take it further with a bit of jQuery – putting it here in case anyone else finds it useful :)