Web typography

File:3 Core Fonts for the web.png

Since being released under Microsoft's Core fonts for the Web program, Arial, Georgia, and Verdana have become 3 de facto fonts of the Web.

Web typography refers to the use of fonts on the Web. When HTML was first created, there was no control of what fonts or styles would be used to display the text. To allow web designers to specify fonts, weights, and colors, Netscape introduced the Template:Tag tag in 1995, which was then standardized in the HTML 2 specification. However, the exact font named had to be installed on the user's computer, or a fallback font, such as sans-serif or monospace, would be used. The CSS1 specification was published in 1996 and provided the same capabilities.

The CSS2 specification was released in 1998 and attempted to improve the font selection process by adding font matching, synthesis, and download. These techniques did not gain much usage, and were removed in the CSS2.1 specification. However, Internet Explorer continues to support the font downloading feature since Internet Explorer 4. The font downloading specification was re-added in the CSS3 Working Draft, and has since been implemented in Safari 3.1, Opera 10 and Mozilla Firefox 3.5. This has subsequently increased interest in web typography, as well as the usage of font downloading.

CSS1

In CSS, authors specify font characteristics via a series of font properties like 'font-family', 'font-style', and 'font-weight'. In CSS1, all fonts were assumed to be present on the client system and were identified solely by name. Beyond the properties mentioned above, designers had no way to propose other fonts to the user other than generic default fonts.

Web-safe fonts

Web-safe fonts are those fonts likely to be present on a wide range of computer systems, and are used by web content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a website does not have the specified font, their browser will select an alternative — in the case of dingbat typefaces the alternative is unlikely to have similar characters at the same code points.

Microsoft's Core fonts for the Web

Main article: Core fonts for the Web

In order to ensure that all Web users had a basic set of fonts, Microsoft started Core fonts for the Web initiative. The released fonts including Arial, Georgia, Times New Roman, and Verdana under an EULA which made them freely distributable. Most of them come installed with all operating systems, and their high penetration rate has made them a staple for web designers.

Examples: Arial, Georgia, Times New Roman, and Verdana.

CSS2 attempted to increase the tools available to web developers by adding "intelligent font matching", "font synthesis", and "font download".

The procedure how the user agent handles these properties when there is no matching font on the client has been expanded. CSS2 offers client-side font matching, font synthesis and progressive rendering for this, and fonts can be downloaded over the Web.

Some CSS2 font properties were removed from CSS2.1 and pushed back to CSS3.

Fallback fonts

The CSS specification allows for multiple fonts to be listed as fallback fonts. In CSS, the font-family property accepts a list of comma-separated font faces to be used, like so:

font-family: Arial, Helvetica, "Liberation Sans", sans-serif;

The first font specified is the preferred font. If this font is not available, the web browser will attempt to use the next font in the list. If none of the fonts specified are found, the browser will resort to displaying its default font face. This same process also happens on a per-character basis if the browser is trying to display a character which is not present in the specified font.

CSS generic font families

In order to give web designers some control over the appearance of fonts on their web pages even when the specified fonts are not available, the CSS specification also allows the use of several generic font families. These generic families are designed to split fonts into several categories based on their general appearance. These generic families are commonly specified as a last resort if none of the fonts specified by the author are available. These families are:

Sans-serif: fonts which do not have decorative markings, or serifs, on their letters. These fonts are often considered easier to read on screens.
Serif: fonts which have decorative markings, or serifs, present on their characters.
Monospace: fonts in which all characters are exactly the same width.
Cursive: Fonts which resemble cursive writing. These fonts may have a decorative appearance, but they can be difficult to read at small sizes, so they are generally used sparingly.
Fantasy: Fonts which may contain symbols or other decorative properties, but still represent the specified character.

Web fonts

File:Web fonts.png

Web fonts allow web designers to use fonts that are not installed on the viewer's computer.

History

Web fonts is a technique where fonts are downloaded off the web server whenever a user requests a page. This ensures that the fonts specified by the web designer are available to the user, which allows web designers to use fonts which aren't widely installed. This technique was first specified in the CSS2 specification, which introduced the @font-face rule.

It is controversial because using the font as part of a web page also allows the font to be freely downloaded. This could result in fonts being used against the terms of their license or be illegally spread through the web. The formats PFR, EOT and WOFF have been designed to address these issues, in different ways.

Since the introduction of Internet Explorer 4 font embedding, employing EOT, has mainly been in use for scripts that are not supported by fonts installed by default in operating systems or browsers, e.g. in India. Usage on English-language websites was virtually non-existent. With the releases of Firefox 3.5, Opera 10 and Safari 3.1, usage employing other formats is expected to increase.

File formats

TrueDoc

Bitstream developed TrueDoc, the first standard for embedding fonts. TrueDoc was natively supported in Netscape Navigator 4, but was discontinued in Netscape Navigator 6 and Mozilla because Netscape could not release Bitstream's source code. A WebFont Player plugin was available for Internet Explorer, but the technology had to compete against Microsoft's Embedded OpenType fonts natively supported by Internet Explorer 4 and up (Windows versions only).

Embedded OpenType

Internet Explorer 4 and above have supported font embedding through the proprietary Embedded OpenType standard. They use digital rights management techniques to help prevent fonts from being copied and used without a license. A simplified subset of EOT has been formalized under the name of CWT (Compatibility Web Type, formerly EOT-Lite)

Scalable Vector Graphics

Web typography applies to SVG in two ways.

Firstly, since version 1.1, the SVG specification has supported the creation of fonts in the SVG language, using font, font-face and glyph elements. Safari introduced support for SVG fonts in version 3, and the Opera added support in version 10.{

Secondly, the SVG specification allows for CSS to be applied to SVG documents in a similar manner to HTML documents, and the CSS2 @font-face rule can be applied to text in SVG documents. The Opera browser added support for this in version 10, and WebKit also supports this method using SVG Fonts only.

TrueType/OpenType

Main articles: TrueType and OpenType

In 2009, Mozilla Firefox (version 3.5), Opera (version 10) and Apple Safari startet to support linking to industry-standard True Type (TTF) and Open Type (OTF) fonts.

Web Open Font Format

The Web Open Font Format (WOFF), a format developed during 2009, is essentially a wrapper that contains sfnt-based fonts (TrueType, OpenType or Open Font Format) that have been compressed using a WOFF encoding tool to enable them to be embedded in a web page.. The format uses zip compression, typically resulting in a filesize reduction from ttf of over 40%

The format has received the backing of many of the main font foundries and, on October 20th, 2009, Mozilla announced that it would provide support for WOFF in Firefox 3.6. During the October 2009 Typ09 conference, Microsoft were reported as saying that they were 'considering' supporting WOFF in Internet Explorer 9. WOFF is "a strong favourite" for standardization by the W3C Web Fonts Working Group.

Browser support

Support for OTF and TTF web fonts was first introduced in Safari 3.1. Firefox added support in version 3.5. Opera added support in version 10. Google Chrome added support in version 4.

@font-face support in (X)HTML documents

Browser	Internet Explorer	Gecko	Safari	Chrome	Opera	Netscape
EOT	4.0	No	No	No	No	No
TTF	No	1.9.1	3.1	4.0	10.0
OTF				No
SVG		No		0.3
WOFF		1.9.2	No	No	No
PFR		No				4.0–4.8

Internet Explorer 4 can support PFR with a third-party plugin. EOT is not supported in Mac OS versions 4 and 5 of Internet Explorer.

By using a specific CSS @font-face embedding technique it is possible to embed fonts such that they work with IE4+, Firefox 3.5, Safari 3.1, Opera 10 and Chrome (Chrome 2 and 3 need a command-line option to be specified in order for this to be enabled). This allows the vast majority of web users to access this functionality.

@font-face support in SVG documents

Browser	Gecko	Safari	Chrome	Opera
EOT	No	No	No	No
TTF				10.0
OTF
WOFF				No
SVG		3.1	0.3	10.0

Unicode fonts

Only two fonts available by default on the Windows platform, Arial and Lucida Sans, provide a wide Unicode character repertoire. A bug in Verdana (and the different handling of it by various user agents) hinders its usability where combining characters are desired.

Alternatives

A common hurdle in web design is the programming of mockups that include non-web-safe fonts. There are a number of solutions for situations like this. One common solution is to "slice" out the text and reference the particular font along with a similar replacement. For instance, if a heading contains a Windows Vista-specific font, the programmer would write the code such that the heading is physical text (rather than an image) and references the particular font. If the font is not present on a viewer's computer, the website falls back on a similar font or set of fonts that are similar or are suitable replacements.

Another practice is to use image replacement techniques. These methods store the text in question as physical text and then overlay the text with an image containing the text typed out in the correct font. This is good for search engine optimization and aesthetic purposes, though the text cannot be selected (for say, copy and pasting). However it should be noted that Mozilla Firefox for instance has the option Copy on the right click contextual menu for a highlighted image which copies the alt attribute to the clipboard.

Image replacement techniques can be easily done with the php/JavaScript library Facelift Image Replacement (FLIR). It can automatically replace any text on the webpage with an automatically generated picture, if the font is missing from the client machine. FLIR is open-source itself, and does not require any other tools to be deployed or used, besides a php-interpreter. (which is also open-source). Nor does it require any plugins on the user's computer. The only things that the client's browser needs to implement is displaying of images and JavaScript. Any true-type or open type font can be used to automatically generate text.

Another technique in the web design community is the use of Flash-based solutions such as sIFR. They work similar to image replacement techniques, though the text is selectable and rendered as a vector. The downsides to this method are that the tools needed to create sIFR files are generally not readily available for free, and the technique requires a proprietary plugin on the client's device.

There is anothers solution called cufon. It is javascript-only library. It works by compiling ttf font to compressed javascript code that defines the look of each symbol needed using included tool.

See also

• Scalable Inman Flash Replacement
• List of RFC as mentioned in WOFF (draft of 2009-10-23)
  • RFC 1950 ZLIB Compressed Data Format Specification
  • RFC 2119 Key words for use in RFCs to Indicate Requirement Levels
  • RFC 4647 Matching of Language Tags

External links

• CSS @ Ten: The Next Big Thing (By Håkon Wium Lie) (In A List Apart)
• W3C Working Draft for CSS Fonts
• Common fonts across browsers and platforms
• Font Descriptions and @font-face
• Font embedding for the Web
• Microsoft's forgotten monopoly
• "I have seen the shadow of the moon" by Golden Krishna