Web Fonts Tutorial

A short introduction to web typography

Text has always been a fundamental web component. The first web documents contained mainly (if not exclusively) text with black fonts over a white background. In the next few years, the web gradually transformed to a full multimedia platform. At the same time, more sophisticated whitespace handling and character encoding have appeared.

In contrast to books and other printed media where proper type arrangements and type design have always been ensured by typography, until recently the Web lacked these features.

After the introduction of TFT monitors and the ClearType fonts designed for them, characters have become really clear on the screen. With the increasing popularity of web fonts, an endless variety of fonts appeared on the web.

You must be careful to provide not only eye-catching fonts and type but also legible text. The technique required to achieve that aim is known as web typography, which should also guarantee the proper appearance of characters and whitespace. This tutorial focuses on Web Fonts.

Web Fonts

Originally, the Web was developed as a text-based medium. Initially, the selection of fonts available to web designers was limited to the intersection of fonts natively installed on all major platforms. In 1998, the CSS2 specification introduced a font matching and downloading mechanism (which has been dropped in CSS 2.1). In CSS3, external fonts can be applied, along with the declaration of multiple (similar) fonts as a fallback option if the specific fonts cannot be downloaded or are not installed on the user’s computer. The technique has both legal and technical issues, however.

Fonts are generally copyrighted; thus, their font files cannot be stored and used on web sites. Even the ones that are advertised as free fonts cannot be used for web sites in many cases [1]. Since a standard font pack has been released under the “Core fonts for the Web” program by Microsoft, the fonts Arial, Georgia, and Verdana (among others) have become de facto fonts on the Web.

Caution! The character repertoire of typefaces varies greatly. While the English alphabet and the common punctuation marks are supported by most font files, the list of supported characters should be a major concern for sites written in a natural language other than English. Multilingual sites should not apply font files that do not support the full range of required characters, which makes it possible to apply the same fonts for the different language versions. One of the options to avoid nonsupported characters is to apply Unicode fonts. However, not all fonts presented on font collection sites as “Unicode fonts” support a really wide range of Unicode characters. In fact, the ones that do are typically 20MB to 25MB in size (compared to the typical font file size of 50KB to 300KB), which is inadequate for web publishing: the fonts won’t appear while the font files are being downloaded, and this would take much more time than downloading the entire page with all of its components, including images.

From the technical point of view, the browser support for font embedding and downloading varies from browser to browser. However, the differences are decreasing because of standardization and the growing popularity of implementations. Embedded OpenType (EOT) font embedding is supported by Internet Explorer from version 4. Other browsers have introduced font linking for TrueType (TT) and OpenType (OT) fonts (Firefox 3.5+, Opera 10+, Safari 3.1+, Google Chrome 4.0+). Internet Explorer 9+ also supports TT/OT fonts but only those that have embedded permissions set to installable. TT has been extended to support additional metadata and gzip compression, known as the Web Open Font Format (WOFF). WOFF is a cross-browser, web-only format being standardized by the W3C [2] and supported by Internet Explorer 9+, Mozilla Firefox 3.6+, and Google Chrome 5+.

Note. The semistructural details appearing on the ends of certain strokes of letters and symbols are known as serifs in typography. The typefaces that use serifs, such as Times New Roman, Cambria, Garamond, and Georgia, are known as serif typefaces. The typefaces that do not have these small projecting features are the sans-serif typefaces, for example, Verdana, Tahoma, and Helvetica. Declaring one of the generic font families (serif, sans-serif, cursive, fantasy, monospace) is an excellent fallback mechanism [3].

Two different fonts (or the same font in two different formats) can be declared with a fallback mechanism, as shown in Listing 1, and can be applied as demonstrated in Listing 2.

Listing 1. Using Fonts Stored in Different Formats

						
@font-face {
  font-family: "Csuff";
  src: url("http://example.com/fonts/csuff.ttf");
  src: url("http://example.com/fonts/csuff.eot");
}

Listing 2. Applying Web Fonts with a Fallback Mechanism

						
p {
  font-family: "Csuff", "Helvetica", sans-serif;
}

Note that a widely available font is also provided, along with the font family declaration that always works, in case neither of the external fonts can be used.

Tip. Serif fonts are easy to read and adequate for long text blocks published on web pages in medium or large font size, as well as for printer style sheets. Sans-serif typefaces are more suitable for short texts in small font size, such as copyright information in the page footer, which is often written in Verdana or a similar font. Monospace fonts like Courier and DejaVu Sans Mono are ideal for preformatted text, computer codes, and typewriter effects. Cursive fonts, such as Comic Sans MS and Brush Script, are used for cursive handwriting such as signatures. Fantasy fonts are best used for headings and artistic texts (for example, Impact and Copperplate).

The normal, bold, and italic versions, as well as the bold and italic fonts, of a typeface are generally stored in separate files. Consequently, multiple declarations are needed to download and apply the appropriate font styles of the selected typeface (Listing 3). Without that, the content of headings and strong elements will be rendered using normal fonts rather than bold ones, em elements will be displayed with normal rather than italic fonts, and so on.

Listing 3. Multiple Declarations for the Same Typeface

						
@font-face {
  font-family: Calluna;
  src: url('fonts/Calluna-Regular.otf');
}

@font-face {
  font-family: Callunab;
  src: url('fonts/Calluna-Bold.otf');
}

@font-face {
  font-family: Callunai;
  src: url('fonts/Calluna-It.otf');
}

body {
  font-family: "Calluna", "Helvetica", serif;
}

h1, h2, h3, strong {
  font-family: "Callunab";
}

em {
  font-family: "Callunai";
}

There are also some alternatives for web fonts. A technique called image replacement, which is considered legal by many, is applied by some web designers to use rendered images of fonts. However, image replacement prevents text selection, has searchability and accessibility issues, and increases bandwidth use.

Another approach applies the Flash-based solution Scalable Inman Flash Replacement (sIFR). It is similar to image replacement, but the text is selectable and rendered as a vector graphic. A big disadvantage is that this method relies on a Flash plug-in on the client side.

The text can also be replaced by SVG or VML (for Internet Explorer up to version 8) with JavaScript.

In SVG 1.1, fonts can be created within the SVG document. SVG fonts can improve the semantics of graphics that represent texts, such as logos. SVG fonts are partly supported by Safari 3+ and Opera 8+.

Similar to (X)HTML documents, CSS can also be applied in SVG documents. Consequently, the @font-face rule can be used for SVG texts too [4]. Listing 4 shows an example.

Listing 4. An Example for Using the @fontface CSS Rule in SVG

											
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <style>
      <![CDATA[
        @font-face {
          font-family: Calluna;
          src: url('fonts/Calluna-Regular.otf');
        } 
        ]]>
    </style>
  </defs>
  <text x="20"  y="40" style="font-family: Calluna, serif; font-size: 1.2em; stroke: #0f0;
   fill: #0f0;">SVG text with Web Fonts</text>
</svg>

Free Web Fonts to download

Open source typefaces and fonts

Here is a small collection of open source typefaces and fonts.

**Table 1** Open source typefaces and fonts.
Typeface	Category	License
Allerta	Sans-serif	SIL Open Font License [5]
Beteckna	Sans-serif	GNU GPL [6]
Bitstream Vera	serif/sans-serif/monospace	Liberal license [7]
Cantarell	Sans-serif	SIL Open Font License
Chandas	Sans-serif	GNU GPL
Gentium	Serif	Open Font License
GFS		SIL Open Font License
Inconsolata	Monospace	SIL Open Font License
Junicode	Serif	GNU GPL
Kochi font		Public domain
Liberation fonts	Sans-serif/serif/monospace	GNU GPL
Linux Libertine	Serif	GPL / OFL
M+ Fonts	Sans-serif/monospace	Free software
Nimbus	Serif/sans-serif/monospace	GNU GPL
OCR-A font	Sans-serif	Free version available
OCR-B	Monospace	Free version available
PT Sans	Sans-serif	SIL Open Font License or ParaType Free Font License
Tiresias	Sans-serif	GNU GPL
Ubuntu-Title	Sans-serif	GNU Lesser General Public License
WenQuanYi fonts	Depends on the font	GPL
XITS font project	Various	SIL Open Font License

More fonts coming soon…

For more information on CSS3 and Web Fonts, read the book “Web Standards – Mastering HTML5, CSS3, and XML”.

Web Fonts

A short introduction to web typography

Web Fonts

Free Web Fonts to download

Open source typefaces and fonts

See also

References

Reply