Typography is so important to user experience. The book you’re reading
right now has fonts that were carefully selected by people who understand
how choosing the right fonts and the right spacing can make it
much easier for people to read this book. These concepts are just as
important to understand on the Web.
The fonts we choose when conveying our message to our readers impact
how our readers interpret that message. Here’s a font that’s perfectly
appropriate for a loud heavy-metal band:
But that might not work out so well for the font on the cover of this
book:
As you can see, choosing a font that matches your message is really
important. The problem with fonts on the Web is that we web developers
have been limited to a handful of fonts, commonly known as “websafe”
fonts. These are the fonts that are in wide use across most users’
operating systems.
To get around that, we’ve historically used images for our fonts and
either directly added them to our page’s markup or used other methods
like CSS background images or sIFR,8 which renders fonts using Flash.
CSS3’s Fonts module offers a much nicer approach.
@font-face
The @font-face directive was actually introduced as part of the CSS2
specification and was implemented in Internet Explorer 5. However,
Fonts and Rights
Some fonts aren’t free. Like stock photography or other copyrighted
material, you are expected to comply with the rights
and licenses of the material you use on your website. If you
purchase a font, you’re usually within your rights to use it in
your logo and images on your pages. These are called usage
rights. However, the @font-face approach brings a different kind
of licensing into play—redistribution rights.
When you embed a font on your page, your users will have
to download that font, meaning your site is now distributing
this font to others. You need to be absolutely positive the fonts
you’re using on your pages allow for this type of usage.
Typekit* has a large library of licensed fonts available, and they
provide tools and code that make it easy to integrate with your
website. They are not a free service, but they are quite affordable
if you need to use a specific font.
Google provides the Google Font APIf, which is similar to Typekit
but contains only open source fonts.
Both of these services use JavaScript to load the fonts, so you
will need to ensure that your content is easy to read for users
without JavaScript.
As long as you remember to treat fonts like any other asset, you
shouldn’t run into any problems.
Microsoft’s implementation used a font format called Embedded Open-
Type (EOT), and most fonts today are in TrueType or OpenType format.
Other browsers support the OpenType and TrueType fonts currently.
AwesomeCo’s director of marketing has decided that the company
should standardize on a font for both print and the Web. You’ve been
asked to investigate a font called Garogier, a simple, thin font that is
completely free for commercial use. As a trial run, we’ll apply this font
to the blog example we created in Redefining a Blog Using Semantic
Markup, on page 27. That way, everyone can see the font in action.
Font Formats
Fonts are available in a variety of formats, and the browsers you’re targeting
will determine what format you’ll need to serve to your visitors.
Format and Supported Browsers
Embedded OpenType (EOT) [IE5-8]
TrueType (TTF) [IE9, F3.5, C4, S4]
OpenType (OTF) [IE9, F3.5, C4, S4, 010.5J
Scalable Vector Graphics (SVG) [IOSJ
Web Open Font (WOFF) [IE9, F3.6]
Internet Explorer browsers prior to 9 only support a format called
Embedded OpenType (EOT). Other browsers support the more common
TrueType and OpenType fonts quite well.
Microsoft, Opera, and Mozilla jointly created the Web Open Font Format,
which allows lossless compression and better licensing options for
font makers.
To hit all of these browsers, you have to make your fonts available in
multiple formats.
Changing Our Font
The font we’re looking at is available at FontSquirrel9 in TrueType,
WOFF, SVG, and EOT formats, which will work just perfectly.
Using the font involves two steps—defining the font and attaching the
font to elements. In the style sheet for the blog, add this code:
@ f o n t – f a c e {
f o n t – f a m i l y : ‘ G a r o g i e r R e g u l a r ‘ ;
s r c : u r l ( ‘ f o n t s / G a r o g i e r _ u n h i n t e d – w e b f o n t . e o t ‘ ) ;
s r c : u r l ( ‘ f o n t s / G a r o g i e r _ u n h i n t e d – w e b f o n t . w o f f ‘ ) f o r m a t C ‘ w o f f ‘ ) ,
u r l C ‘ f o n t s / G a r o g i e r _ u n h i n t e d – w e b f o n t . t t f ‘ ) f o r m a t ( ‘ t r u e t y p e ‘ ) ,
u r l ( ‘ f o n t s / G a r o g i e r _ u n h i n t e d – w e b f o n t . s v g # w e b f o n t e w 0 q E 0 0 9 ‘ ) f o r m a t ( ‘ s v g ‘ ) ;
f o n t – w e i g h t : normal;
}
We’re defining the font family first, giving it a name, and then supplying
the font sources. We’re putting the Embedded OpenType version first
so that IE sees it right away, and then we provide the other sources.
A user’s browser is going to just keep trying sources until it finds one
that works.
Now that we’ve defined the font family, we can use it in our style sheet.
We’ll change our original font style so it looks like this:
body{
f o n t – f a m i l y : ” G a r o g i e r R e g u l a r “;
}
With that simple change, our page’s text displays in the new font, like
the example in Figure 8.6, on the next page.
Applying a font is relatively easy in modern browsers, but we need to
consider browsers that don’t support this yet.
Falling Back
We’ve already provided fallbacks for various versions of IE and other
browsers, but we still need to ensure our pages are readable in browsers
that lack support for the @font-face feature.
We provided alternate versions of the Garogier font, but when we applied
the font, we didn’t specify any fallback fonts. That means if the
browser doesn’t support displaying our Garogier font, it’s just going to
use the browser’s default font. That might not be ideal.
Font stacks are lists of fonts ordered by priority. You specify the font
you really want your users to see first and then specify other fonts that
are suitable fallbacks afterwards.
When creating a font stack, take the extra time to find truly suitable
fallback fonts. Letter spacing, stroke width, and general appearance
should be similar. The website Unitlnteractive has an excellent article
on this.10
Let’s alter our font like this:
f o n t – f a m i l y : ” G a r o g i e r R e g u l a r ” , Georgia,
” P a l a t i n o ” , ” P a l a t i n o L i n o t y p e ” ,
” T i m e s ” , “Times New Roman”, s e r i f ;
We’re providing a large array of fallbacks here, which should help us
maintain a similar appearance. It’s not perfect in all cases, but it’s better
than relying on the default font, which can sometimes be quite hard
to read.
Fonts can go a long way to make your page more attractive and easier
to read. Experiment with your own work. There are a large number of
fonts, both free and commercial, waiting for you.
The Future
In this chapter, we explored a few ways CSS3 replaces traditional web
development techniques, but we only scratched the surface. The CSS3
specification talks about 3D transformations and even simple animations,
meaning that we can use style sheets instead of JavaScript to
provide interaction cues to users, much like we do with :hover.
In addition, some browsers are already supporting multiple background
images and gradient borders. Finally, keep an eye out for improvements
in paged content, such as running headers and footers and page number
support.
The CSS3 modules, when completed, will make it much easier for us to
create richer, better, and more inviting interface elements for our users,
so be sure to keep an eye out for new features.