Web typography
Encyclopedia
Web typography refers to the use of font
Font
In typography, a font is traditionally defined as a quantity of sorts composing a complete character set of a single size and style of a particular typeface...

s on the World Wide Web
World Wide Web
The World Wide Web is a system of interlinked hypertext documents accessed via the Internet...

. When HTML
HTML
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....

 was first created, font faces and styles were controlled exclusively by the settings of each Web browser. There was no mechanism for individual Web pages to control font display until Netscape
Netscape
Netscape Communications is a US computer services company, best known for Netscape Navigator, its web browser. When it was an independent company, its headquarters were in Mountain View, California...

 introduced the tag in 1995, which was then standardized in the HTML 2 specification. However, the font specified by the tag had to be installed on the user's computer or a fallback font, such as a browser's default sans-serif
Sans-serif
In typography, a sans-serif, sans serif or san serif typeface is one that does not have the small projecting features called "serifs" at the end of strokes. The term comes from the French word sans, meaning "without"....

 or monospace font, would be used. The first Cascading Style Sheets
Cascading Style Sheets
Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...

 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 use, and were removed in the CSS2.1 specification. However, Internet Explorer
Internet Explorer
Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year...

 added support for the font downloading feature in version 4.0
Internet Explorer 4
Microsoft Internet Explorer 4 is a graphical web browser released in September 1997 by Microsoft, primarily for Microsoft Windows, but also with versions available for Apple Mac OS, Solaris, and HP-UX and marketed as "The Web the Way You Want It".It was one of the main participants of the first...

, released in 1997. Font downloading was later included in the CSS3 fonts module, and has since been implemented in Safari 3.1
Safari (web browser)
Safari is a web browser developed by Apple Inc. and included with the Mac OS X and iOS operating systems. First released as a public beta on January 7, 2003 on the company's Mac OS X operating system, it became Apple's default browser beginning with Mac OS X v10.3 "Panther". Safari is also the...

, Opera 10
Opera 10
Opera 10 is a version of the Opera web browser. The initial version, 10.00, was released in September 2009.This release added a variety of new features, a new skin designed by Jon Hicks, increased standards support, and a new application icon to Opera...

 and Mozilla Firefox 3.5
Mozilla Firefox 3.5
Mozilla Firefox 3.5 is a version of the Firefox web browser released in June 2009, adding a variety of new features to Firefox. Version 3.5 was touted as being twice as fast as 3.0...

. This has subsequently increased interest in Web typography, as well as the usage of font downloading.

CSS1

In the first CSS specification, authors specifed font characteristics via a series of properties:
  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size

All fonts were identified solely by name. Beyond the properties mentioned above, designers had no way to style fonts, and no mechanism existed to select fonts which were not present on the client system.

Web-safe fonts

Web-safe fonts are fonts
Computer font
A computer font is an electronic data file containing a set of glyphs, characters, or symbols such as dingbats. Although the term font first referred to a set of metal type sorts in one style and size, since the 1990s it is generally used to refer to a scalable set of digital shapes that may be...

 likely to be present on a wide range of computer
Computer
A computer is a programmable machine designed to sequentially and automatically carry out a sequence of arithmetic or logical operations. The particular sequence of operations can be changed readily, allowing the computer to solve more than one kind of problem...

 systems, and used by Web
Website
A website, also written as Web site, web site, or simply site, is a collection of related web pages containing images, videos or other digital assets. A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet...

 content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a Web site does not have the specified font, their browser will attempt to select a similar alternative, based on the author-specified fallback fonts and generic families or it will use font substitution
Font substitution
Font substitution is the process of using one font in place of another when the intended font either is not available or does not contain glyphs for the required characters.Font substitution can be aided by:...

 defined in the visitor's operating system.

Microsoft's Core fonts for the Web

In order to ensure that all Web users had a basic set of fonts, Microsoft
Microsoft
Microsoft Corporation is an American public multinational corporation headquartered in Redmond, Washington, USA that develops, manufactures, licenses, and supports a wide range of products and services predominantly related to computing through its various product divisions...

 started the Core fonts for the Web
Core fonts for the Web
Core fonts for the Web was a project begun by Microsoft in 1996 to make a standard pack of fonts for the Internet. It was terminated in 2002. It included the proprietary fonts Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana and...

 initiative in 1996 (terminated in 2002). The released fonts include Arial
Arial
Arial, sometimes marketed or displayed in software as Arial MT, is a sans-serif typeface and set of computer fonts. Fonts from the Arial family are packaged with Microsoft Windows, some other Microsoft software applications, Apple Mac OS X and many PostScript 3 computer printers...

, Courier New, Times New Roman, Georgia
Georgia (typeface)
Georgia is a transitional serif typeface designed in 1993 by Matthew Carter and hinted by Tom Rickner for the Microsoft Corporation, as the serif companion to the first Microsoft sans serif screen font, Verdana. Microsoft released the initial version of the font on November 1, 1996 as part of the...

, Trebuchet and Verdana
Verdana
Verdana is a humanist sans-serif typeface designed by Matthew Carter for Microsoft Corporation, with hand-hinting done by Thomas Rickner, then at Monotype. Demand for such a typeface was recognized by Virginia Howlett of Microsoft's typography group...

, among others, under an EULA which made them freely distributable (but only not for profit and only as unaltered ".exe" executables for MS Windows or ".sit.hqx" archives for Macintosh) but also limited some usage rights (e.g. forbids creation of derivative works, rename or edit files). Their high penetration rate has made them a staple for Web designers. However, these fonts (or some of them) are not included in various operating systems by default.

CSS2 attempted to increase the tools available to Web developers by adding font synthesis, improved font matching and the ability to download remote fonts.

Some CSS2 font properties were removed from CSS2.1 and later included in 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: "Liberation Sans", Helvetica, Arial, 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.

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 allows the use of several generic font families.
Font family (HTML)
In HTML and XHTML, a font face or font family is the typeface that will be applied by a web browser to some text. The font is relevant for the display of text on the screen, on a printer or another device....

 These families are designed to split fonts into several categories based on their general appearance. They are commonly specified as the last in a series of fallback fonts, as a last resort in the event that none of the fonts specified by the author are available. There are five generic families:

Sans-serif
Sans-serif
In typography, a sans-serif, sans serif or san serif typeface is one that does not have the small projecting features called "serifs" at the end of strokes. The term comes from the French word sans, meaning "without"....

Fonts that do not have decorative markings, or serifs, on their letters. These fonts are often considered easier to read on screens.

Serif
Serif
In typography, serifs are semi-structural details on the ends of some of the strokes that make up letters and symbols. A typeface with serifs is called a serif typeface . A typeface without serifs is called sans serif or sans-serif, from the French sans, meaning “without”...

Fonts that have decorative markings, or serifs, present on their characters.

Monospace
Fonts in which all characters are equally wide.

Cursive
Cursive
Cursive, also known as joined-up writing, joint writing, or running writing, is any style of handwriting in which the symbols of the language are written in a simplified and/or flowing manner, generally for the purpose of making writing easier or faster...

Fonts that 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 that may contain symbols or other decorative properties, but still represent the specified character.

History

A technique to download remote fonts was first specified in the CSS2 specification, which introduced the @font-face rule.

It was (and remains) controversial because using a remote font as part of a Web page allows the font to be freely downloaded. This could result in fonts being used against the terms of their license or illegally spread through the Web. TrueDoc
TrueDoc
TrueDoc is an outline font standard developed by Bitstream that compactly encodes font for use in web pages through their TrueDoc system. Embedding a typeface in this way has the aim of eliminating graphics sometimes used in headings or other text, and replacing them by standard text, styled via CSS...

 (PFR), Embedded OpenType
Embedded OpenType
Embedded OpenType fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages. These files usually use the extension ".eot"....

 (EOT) and Web Open Font Format
Web Open Font Format
The Web Open Font Format is a font format for use in web pages. It was developed during 2009 and is in the process of being standardized as a recommendation by the World Wide Web Consortium Web Fonts Working Group....

 (WOFF) are formats designed to address these issues.

Since the introduction of Internet Explorer 4
Internet Explorer 4
Microsoft Internet Explorer 4 is a graphical web browser released in September 1997 by Microsoft, primarily for Microsoft Windows, but also with versions available for Apple Mac OS, Solaris, and HP-UX and marketed as "The Web the Way You Want It".It was one of the main participants of the first...

, font embedding employing EOT has been used mainly for displaying characters in writing system
Writing system
A writing system is a symbolic system used to represent elements or statements expressible in language.-General properties:Writing systems are distinguished from other possible symbolic communication systems in that the reader must usually understand something of the associated spoken language to...

s that are not supported by default fonts. Use on English-language Web sites was virtually non-existent. With the releases of Firefox 3.5, Opera 10
Opera 10
Opera 10 is a version of the Opera web browser. The initial version, 10.00, was released in September 2009.This release added a variety of new features, a new skin designed by Jon Hicks, increased standards support, and a new application icon to Opera...

 and Safari 3.1, usage employing other formats is expected to increase.

File formats

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 4.0+. This allows the vast majority of Web users to access this functionality. Some commercial foundries object to the redistribution of their fonts. For example, Hoefler & Frere-Jones
Hoefler & Frere-Jones
Hoefler & Frere-Jones is an influential type foundry in New York City, run by designers Jonathan Hoefler and Tobias Frere-Jones. With both their similarities and their likings it was only a matter of time that both their paths would come across and would have became business partners. Both Hoefler...

 says that, while they "enthusiastically [support] the emergence of a more expressive Web in which designers can safely and reliably use high-quality fonts online", the current delivery of fonts using @font-face is considered "illegal distribution" by the foundry and is not permitted. Naturally this does not interfere with fonts and foundries under free licences.See Open source typefaces and Free software Unicode typefaces listings for such fonts.

TrueDoc

Bitstream
Bitstream Inc.
Bitstream Inc. is a type foundry that produces digital typefaces . Founded in 1981 by Matthew Carter and Mike Parker among others, it claims to be the oldest such company...

 developed TrueDoc
TrueDoc
TrueDoc is an outline font standard developed by Bitstream that compactly encodes font for use in web pages through their TrueDoc system. Embedding a typeface in this way has the aim of eliminating graphics sometimes used in headings or other text, and replacing them by standard text, styled via CSS...

, the first standard for embedding fonts. TrueDoc was natively supported in Netscape Navigator
Netscape Navigator
Netscape Navigator was a proprietary web browser that was popular in the 1990s. It was the flagship product of the Netscape Communications Corporation and the dominant web browser in terms of usage share, although by 2002 its usage had almost disappeared...

 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
Internet Explorer
Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year...

, but the technology had to compete against Microsoft
Microsoft
Microsoft Corporation is an American public multinational corporation headquartered in Redmond, Washington, USA that develops, manufactures, licenses, and supports a wide range of products and services predominantly related to computing through its various product divisions...

's Embedded OpenType
Embedded OpenType
Embedded OpenType fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages. These files usually use the extension ".eot"....

 fonts, natively supported since version 4.0.

Embedded OpenType

Internet Explorer has supported font embedding through the proprietary Embedded OpenType
Embedded OpenType
Embedded OpenType fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages. These files usually use the extension ".eot"....

 standard since version 4.0. It uses digital rights management
Digital rights management
Digital rights management is a class of access control technologies that are used by hardware manufacturers, publishers, copyright holders and individuals with the intent to limit the use of digital content and devices after sale. DRM is any technology that inhibits uses of digital content that...

 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:
  1. All versions of the SVG 1.1 specification, including the SVGT subset, define a font module allowing the creation of fonts within an SVG document. Safari
    Safari (web browser)
    Safari is a web browser developed by Apple Inc. and included with the Mac OS X and iOS operating systems. First released as a public beta on January 7, 2003 on the company's Mac OS X operating system, it became Apple's default browser beginning with Mac OS X v10.3 "Panther". Safari is also the...

     introduced support for many of these properties in version 3. Opera
    Opera (web browser)
    Opera is a web browser and Internet suite developed by Opera Software with over 200 million users worldwide. The browser handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, chatting on IRC, downloading files via BitTorrent,...

     added preliminary support in version 8.0, with support for more properties in 9.0.
  2. The SVG specification allows for CSS to be applied to SVG documents in a similar manner to HTML documents, and the @font-face rule can be applied to text in SVG documents. Opera added support for this in version 10, and WebKit
    WebKit
    WebKit is a layout engine designed to allow web browsers to render web pages. WebKit powers Google Chrome and Apple Safari and by October 2011 held over 33% of the browser market share between them. It is also used as the basis for the experimental browser included with the Amazon Kindle ebook...

     since version 325 also supports this method using SVG fonts only.

TrueType/OpenType

Linking to industry-standard TrueType (TTF) and OpenType (TTF/OTF) fonts is supported by
Mozilla Firefox 3.5+, Opera 10+, Safari 3.1+, Google Chrome 4.0+. Internet Explorer 9+ will support only those fonts with embedding permissions set to installable.

Web Open Font Format

WOFF has been supported by Mozilla Firefox 3.6+, Google Chrome
Google Chrome
Google Chrome is a web browser developed by Google that uses the WebKit layout engine. It was first released as a beta version for Microsoft Windows on September 2, 2008, and the public stable release was on December 11, 2008. The name is derived from the graphical user interface frame, or...

 5+,
Opera
Opera (web browser)
Opera is a web browser and Internet suite developed by Opera Software with over 200 million users worldwide. The browser handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, chatting on IRC, downloading files via BitTorrent,...

 Presto
Presto (layout engine)
Presto is the layout engine for later versions of the Opera web browser . After several public betas and technical previews, it was released on January 28, 2003 in Opera 7 for Windows, and as of Opera 11 it is still in use. Presto is dynamic: the page or parts of it can be re-rendered in response...

,
and is supported by Internet Explorer 9
Internet Explorer 9
Windows Internet Explorer 9 is the current version of the Internet Explorer web browser from Microsoft. It was released to the public on March 14, 2011 at 21:00 PDT. Internet Explorer 9 supports several CSS 3 properties, embedded ICC v2 or v4 color profiles support via Windows Color System, and...

 (since March 14, 2011). Support is available on Mac OS X Lion's Safari
Safari (web browser)
Safari is a web browser developed by Apple Inc. and included with the Mac OS X and iOS operating systems. First released as a public beta on January 7, 2003 on the company's Mac OS X operating system, it became Apple's default browser beginning with Mac OS X v10.3 "Panther". Safari is also the...

 from release 5.1.

Unicode fonts

Only two fonts available by default on the Windows
Microsoft Windows
Microsoft Windows is a series of operating systems produced by Microsoft.Microsoft introduced an operating environment named Windows on November 20, 1985 as an add-on to MS-DOS in response to the growing interest in graphical user interfaces . Microsoft Windows came to dominate the world's personal...

 platform, Arial Unicode MS
Arial Unicode MS
In digital typography, the TrueType font Arial Unicode MS is an extended version of the font Arial. Compared to Arial, it includes higher line height, omits kerning pairs and adds enough glyphs to cover a large subset of Unicode 2.1—thus supporting most Microsoft code pages, but also requiring much...

 and Lucida Sans Unicode
Lucida Sans Unicode
In digital typography, Lucida Sans Unicode OpenType font from the design studio of Bigelow & Holmes is designed to support the most commonly used characters defined in version 2.0 of the Unicode standard...

, provide a wide Unicode
Unicode
Unicode is a computing industry standard for the consistent encoding, representation and handling of text expressed in most of the world's writing systems...

 character repertoire. A bug in Verdana (and the different handling of it by various user agent
User agent
In computing, a user agent is a client application implementing a network protocol used in communications within a client–server distributed computing system...

s) hinders its usability where combining character
Combining character
In digital typography, combining characters are characters that are intended to modify other characters. The most common combining characters in the Latin script are the combining diacritical marks ....

s are desired.

Alternatives

A common hurdle in Web design is the design of mockups that include fonts that are not Web-safe. There are a number of solutions for situations like this. One common solution is to replace the text with a similar Web-safe font or use a series of similar-looking fallback fonts.

Another technique is image replacement. This practice involves overlaying text with an image containing the same text written in the desired font. This is good for search engine optimization
Search engine optimization
Search engine optimization is the process of improving the visibility of a website or a web page in search engines via the "natural" or un-paid search results...

 and aesthetic purposes, but prevents text selection and increases bandwidth use.

Also common is the use of Flash
Adobe Flash
Adobe Flash is a multimedia platform used to add animation, video, and interactivity to web pages. Flash is frequently used for advertisements, games and flash animations for broadcast...

-based solutions such as sIFR. This is similar to image replacement techniques, though the text is selectable and rendered as a vector. However, this method requires the presence of a proprietary plugin on a client's system.

Another solution is using Javascript to replace the text with VML (for Internet Explorer) or SVG (for all other browsers).

Font hosting services allow users to pay a subscription to host non-Web-safe fonts online. Most services host the font for the user and provide the necessary @font-face CSS declaration.

See also

  • Scalable Inman Flash Replacement
    Scalable Inman Flash Replacement
    Scalable Inman Flash Replacement is an open source JavaScript and Adobe Flash dynamic web fonts implementation, enabling the replacement of text elements on HTML web pages with Flash equivalents. It was initially developed by Mike Davidson and improved by Mark Wubben...

  • 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

The source of this article is wikipedia, the free encyclopedia.  The text of this article is licensed under the GFDL.
 
x
OK