How to Enhance Your Website's Type Design with CSS3

  • Article

Using the new support for the Cascading Style Sheets, Level 3 (CSS3) Fonts module in Windows Internet Explorer 9, you can upgrade the typographic experience for visitors to your website. This topic shows you how to incorporate new CSS3 Fonts features into your website so that your type design is emphasized in both Internet Explorer 9 and other modern browsers.

Typography is an integral part of web design, and Internet Explorer 9 enables advanced typographical capabilities that are defined in both the CSS Fonts Module Level 3 Working Draft and the Web Open Font Format (WOFF) 1.0 Working Draft. These capabilities include the following:

  • Enhanced font linking by using the @font-face rule
  • New support for web font formats:
    • WOFF
    • Raw installable TrueType and OpenType (no embedded permissions set)
  • Advanced typographical functions that have new and updated font properties:

In addition, Internet Explorer 9 takes advantage of hardware-accelerated Microsoft DirectWrite APIs and sub-pixel Microsoft ClearType font positioning (in IE9 Standards mode) to make fonts render faster and appear smoother than they have before. (For more information about hardware rendering of type in Internet Explorer 9, see Sub-pixel Fonts in IE9 on the IE Team Blog.)

This topic includes the following sections:

  • Starting Out with Web Fonts
    • The font element
    • The CSS font properties
    • Font Embedding
    • Other Solutions
    • The WOFF Format
  • Upgrading Your Web Type with Internet Explorer 9: Quick Start
    • Web Font Services
    • "Free" Fonts
  • Upgrading Your Web Type with Internet Explorer 9: Do-It-Yourself
    • Enabling Basic Font Linking
    • Enabling Variations of Linked Fonts
  • Related topics

Starting Out with Web Fonts

This section is recommended if you design webpages for multiple versions of Windows Internet Explorer. To get a complete view of your options for font styles in your webpages, it is useful to review some of the options that have historically been available in Internet Explorer. For information about what is new for fonts in Internet Explorer 9, see Upgrading Your Web Type with Internet Explorer 9: Quick Start later in this topic. If you are just now learning about typography, see the Fonts for Windows overview on the Microsoft Typography website.

The font element

The concept of web typography began with the now-obsolete font HTML element. For instance, the following markup changes the text inside the font element to be rendered in the font Arial Black:

<p>Lorem ipsum <font face="Arial Black">dolor sit</font> amet.</p>

Though this still works in Internet Explorer 9, the problem with the font element and other formatting-related HTML elements is that they mix presentation with content. This can make content management and maintenance difficult, and was the primary reason why Cascading Style Sheets (CSS) were developed. The font element is a deprecated element in HTML and is not recommended for use.

The CSS font properties

The advent of CSS introduced new ways to manipulate web typography (type). The CSS font properties enable many more options and vastly improved flexibility when designing the type for your websites. The Cascading Style Sheets, Level 1 (CSS1) specification first defined both font families and font styles. There are five generic font families, in which all fonts can be categorized: serif, sans-serif, monospace, cursive, and fantasy. The World Wide Web Consortium (W3C) has a good explanation and visual overview of generic CSS font families: Web Style Sheets - CSS tips & tricks: Font families.

The basic font style properties, defined in CSS1, have been supported since Microsoft Internet Explorer 3.0. They are summarized here for your convenience.

  • font-style: Used to set the style of the font (italic or oblique).
  • font-variant: Used to set whether the font's small capital letters variant (small-caps) should be used.
  • font-weight: Used to set the weight of the font; values can be either a keyword (normal, bold, bolder, lighter) or a number (multiples of 100 between 100 and 900, inclusive; 400 is the same as the normal keyword, and 700 is the same as the bold keyword).
  • font-size: Used to set the size of the font; values can be an absolute size keyword (xx-small, x-small, small, medium, large, x-large, xx-large), a relative size keyword (larger or smaller; compared to the font size of the parent object), a length (in one of the supported length units), or a percentage (of the parent object's font size).
  • font-family: Used to set a list of fonts to use for the text. If the first listed font is not available on the user's system, the next one is used; if that one is not available, the next one is used instead; and so on. Values can be either font names (such as Arial) or generic keywords (serif, sans-serif, cursive, fantasy, or monospace). Typically, font names are listed first, with a generic keyword at the end as the final fallback.
  • font: A shorthand property used to set the previous six listed properties in one property, in the order given.

The W3C has a good visual overview of CSS font styles: Web Style Sheets - CSS tips & tricks: Font styles.

Font Embedding

With Microsoft Internet Explorer 4.0 and Cascading Style Sheets, Level 2 (CSS2) came the concept of font embedding by using the CSS @font-face rule. Font embedding, which is the basis for the concept of font linking in Internet Explorer 9, involves placing Embedded OpenType (EOT) font files on your web server along with your website's other supporting files. Within your CSS, you include an @font-face rule that shows the browser where to find the referenced font object and associates that font object with a given font-family value.

In versions of Internet Explorer before Internet Explorer 9, however, the @font-face rule could only be used with EOT font objects. Though Internet Explorer 9 still works with EOT objects, EOT is considered a "legacy" type technology. Going forward, it is recommended that web designers move away from EOT. (For more information about font embedding in Internet Explorer, see About Font Embedding.)

Other Solutions

Moving beyond web-safe fonts has also required going beyond browser-specific methods such as EOT, which, though it was submitted to the W3C as a potential standard, was never adopted by any other browser vendor. Search the web for web type workaround or some variation of that string and you find hundreds of cross-browser CSS workarounds, graphics-based solutions (such as Cufón), and plug-ins (such as sIFR). However, each workaround hasdrawbacks and tradeoffs, ranging from server storage requirements to increased bandwidth usage to reduced accessibility.

Solving this challenge requires both an interoperable CSS syntax (namely, @font-face), and a common web font format. This is where WOFF comes in.

The WOFF Format

Internet Explorer 9 introduces support for the WOFF. WOFF was developed by Mozilla and submitted to the W3C by Mozilla, Opera, and Microsoft in 2010. As of this writing, it is a W3C Working Draft. WOFF is basically a compressed wrapper for other font formats—TrueType, OpenType, or Open Font Format (known as sfnt-based fonts). That makes it a versatile choice for web type.

Support for WOFF is growing rapidly among both browser vendors and font foundries. The remainder of this topic shows you how to start using WOFF, Internet Explorer 9, and the expanded capabilities of the @font-face rule.

Upgrading Your Web Type with Internet Explorer 9: Quick Start

This section is directed towards developers who have not already licensed fonts specifically for web use. Implementing sophisticated web typography and going beyond "web-safe" fonts is easy to do when you use Internet Explorer 9, CSS3, and the new WOFF. Because of the multiple font foundries and type creators that provide web-ready fonts, you can easily implement impressive web type with just a few clicks and minimal HTML and CSS.

Web Font Services

Major font foundries have made many of their fonts available for web use via web font services. Essentially, when you subscribe to one of these web font services, your webpage displays text using the specific fonts that you designate in your CSS by retrieving them from the web font service. While most services require a subscription, some offer no-cost trials and no charge plans for basic use. Others only require a one-time fee for a download and permanent license for each font.

Note  If you have purchased a license for a web font and need to learn how to display the font on your website, see Upgrading Your Web Type with Internet Explorer 9: Do-It-Yourself.

 

Each web font subscription service has a different method of implementation, but the following list shows the basic steps to get started after you have signed up for the service:

  1. Specify a website domain name (or names) for the site(s) on which you want to use the service's fonts.
  2. Choose the fonts you want to use on the site. Even web services owned by specific font foundries have fonts available from multiple foundries besides their own.
  3. Enter the CSS selectors that correspond to the text elements on which you want to use the fonts you chose, and, using the site's UI, assign a font to each corresponding selector. Generally you need to manually type in the name of the selector from your style sheet, and it can be an element, ID, or class selector.
  4. The web service then generates a script block. This script block has a reference to a JavaScript file that is hosted on the service's server. You paste the script block into the head section of your HTML.

The JavaScript reference that you paste into your webpage in Step 4 makes Internet Explorer retrieve the appropriate font files from the service's server. Internet Explorer then displays the text in the fonts you intended, according to the selectors you entered in Step 3.

Though most web font services are WOFF ready, they are also compatible with multiple platforms and support multiple browsers and browser versions. This makes these services an ideal choice for maximum browser compatibility with your website. Until WOFF support becomes more widespread, the service to which you subscribe will need to provide support for multiple font formats.

When you choose a web font service plan, in addition to cost, consider the maximum allowed number of pageviews, the maximum number of websites on which you can use the service's fonts, and the maximum number of fonts you are allowed to use per site. Also, some services allow you to download desktop versions of the web fonts that you use for testing and design. Following is a list of some popular web font services. It is accurate as of this writing, but keep in mind that links can change.

In addition, webfonts.info has a comprehensive list of web font sources—no cost, paid license, and subscription.

"Free" Fonts

The allure of "free" font downloads is strong, but keep in mind a few points when you consider them:

  • Most importantly, look at the license for the font that you want to use and make sure that your intended use of the font fits within the guidelines of the license. If it is not specifically licensed for use as a web font, do not use it. Similarly, check whether the license is restricted for use by a certain type of organization—for instance, governments or non-profit organizations versus commercial organizations. Adobe, which licenses some of its fonts for web font use via Typekit, has a good overview of web font licensing from the point of view of a font foundry in Understanding Web Font Licensing.
  • Make sure that the font you are considering is available in the appropriate formats. For instance, if a font is only available in WOFF, only users of Internet Explorer 9 and other very recent browsers will be able to experience your site's typography as you intended it. This might be acceptable given your user base, but it is generally best to enable support for the broadest selection of browsers and browser versions as possible.
  • Determine whether the font you want to use has the appropriate language support for your website. If you want to display non-Latin characters, make sure the font you select supports them.
  • Do not steal fonts! Just because you find an unprotected font on the Internet or installed on your computer does not mean you are licensed to use it as a web font. Again, consult the license for the typeface you are considering. If you cannot find a license for the font, do not use it.

With "free" fonts, you will probably need to do a bit more work with your site's CSS than with hosted solutions. You are responsible for writing font rules that will work across your target browsers and browser versions. If you have obtained and are licensed to use WOFF, raw installable TrueType, raw installable OpenType, or EOT fonts on your website, you must use the instructions in the Upgrading Your Web Type with Internet Explorer 9: Do-It-Yourself section to style your website with them.

An increasing number of "free" font sources enable you to automatically create a downloadable "kit" with all the font file formats that you you specify, and sometimes even provide you with the CSS to include in your style sheet.

Following are a few "free" font sources. Keep in mind that each font has its own license (versus a "site-wide" license). Make sure you read the license before deciding to use the font as a web font. This list is accurate as of this writing, but keep in mind that links can change.

In addition, webfonts.info has a comprehensive list of web font sources—"free," paid license, and subscription.

Upgrading Your Web Type with Internet Explorer 9: Do-It-Yourself

You can easily implement sophisticated web typography by using Internet Explorer 9. If you have licensed fonts for use as web fonts, this section shows you what you need to do to link those fonts to your website.

The following screen shot is of the webpage to which we'll be adding web fonts by using HTML and basic CSS.

You can view this page here. You can also download its CSS file.

With the exception of two snippets of text, everything on this page is in Verdana. Verdana is one of the most common web fonts because it is preinstalled on most popular operating systems. During this exercise we leave the body text in Verdana and change the fonts for the headings and titles.

Enabling Basic Font Linking

Font linking is the method by which a style sheet declares and then references a web font family that you "link" to one or more font objects (files). Font linking is distinguished from font embedding because the font object itself is not "embedded" on the webpage, and does not necessarily reside on the same server as the page (for instance, with a subscription font service). Instead, it is "linked" to the page by using CSS.

Tip  Though WOFF is presumably the future of web font formats, Internet Explorer 9 also supports both legacy EOT and, for the first time," raw" installable (no embedded permission bits set)TrueType, and OpenType font files. (To check whether a font is installable, in Windows Explorer, right-click the font file, and then click Properties. In the Details tab, look at the Font embeddability property entry. If Installable does not appear in the Value column, that font cannot be used as a linked font with Internet Explorer 9.) The rest of this topic references WOFF, but the instructions are identical for these other formats. Regardless of their format, be sure you have obtained a license that allows you to use your fonts as web fonts before using these font linking techniques.

 

You use the @font-face CSS rule to declare the font family name (along with any variations, such as in weight and style). For instance, the following CSS declares the basic form of the "MyFont" family, and points the browser to the appropriate font resources. If you have licensed fonts in multiple formats to maximize browser and browser version compatibility, simply include them in a comma-delimited list after the src declaration. In this example, "MyFont" is available in WOFF, TrueType, and EOT formats:

@font-face {
    font-family: MyFont;
    src: url('MyFontFile.woff'), url('MyFontFile.ttf'), url('MyFontFile.eot');
}

Tip  It is a good practice to include all your @font-face declarations together at the top of your style sheet.

 

You then reference this font declaration via the font family you have declared, either in a style sheet, script block, or inline on your page. For instance, the following element selector makes every element with a "mySelector" class render using the MyFont family:

.mySelector {
    font-family: MyFont, Arial, sans-serif;
    font-size: 13pt;
    ...
}

Remember to insert multiple fallback font family names, followed by a generic keyword, as values for the font-family property. This is known as a font stack—a list of fonts in priority order that Internet Explorer 9 iterates through until it finds one that is installed locally. Choose your font stack carefully, though. If the user has a slow connection or there is network interference, Internet Explorer 9 will display your content using the fonts specified in the stack until the font resource has finished loading.

Because of the @font-face declaration, you do not have to bother with the font object's name (MyFontFile.woff) here or anywhere else you reference the MyFont family.

Try this with the coffee company example page. Thanks to our friends at Ascender, we have been granted permission to use their font family "Ayita Pro" for this demonstration.

Important  Proper font licensing is an important part of enabling font linking on your website. The fonts referenced here and in the example pages are not licensed for use anywhere else. You can license these and many other web fonts by using Ascender/Monotype's fontslive.com. For more information about font licensing, see 'Free' Fonts earlier in this topic.

 

For this example, we style the sidebar headings using the regular weight of Ayita Pro. The sidebar headings are currently styled with the "sidebarheading" class selector, which appears in the style sheet as follows:

.sidebarheading {
    font-size: 18px;
}

The sidebar appears on the page as follows:

To style these headings using the Ayita Pro WOFF font, we first add the following @font-face declaration to the top of the page's style sheet:

@font-face {
    font-family: AyitaPro;
    src: url('../fonts/AyitaPro.woff');
}

The font-family property of this declaration indicates that this instance of the font will be called "AyitaPro." The src property of the @font-face rule indicates that the font can be found within the AyitaPro.woff font object, which is located in the fonts folder on this site.

Note  Internet Explorer 9 only accepts relative links to font resources by default. To use fonts from a different domain, the server on which the fonts reside must send access control headers. For more information about access control headers, see XDomainRequest Object.

 

To change the style of the sidebar headings to use Ayita Pro, we add a single font-family property declaration to the "sidebarheading" class selector:

.sidebarheading {
    font-family: AyitaPro, "Times New Roman", serif;
    font-size: 18px;
}

The sidebar now appears as follows in Internet Explorer 9:

You can view the revised page. You can also download its CSS file.

This is the most basic form of a linked font. That is, it has a normal (non-bold) weight, no styling (italics or oblique) applied, and it is neither condensed nor expanded. You can add these variations by using their corresponding property names. The following section describes how to specify font weight, font style, and font stretch.

Enabling Variations of Linked Fonts

You can declare a variation of a linked font that is based on font weight (boldface), font style (italics), and font stretch (condensed/expanded). Most of this section focuses on creating font variations based on weight, but the concepts are similar for style and stretch. (For more information, see Font Style Variations or Font Stretch Variations later in this topic.)

Font Weight Variations

You can declare boldface (or, conversely, light) variations of a font. The simplest way to do this is to declare a new font family. For instance, the Ayita Pro font has a fat weight, meaning the widest available weight for that font. We can change our sample coffee company's page heading (currently styled using the "title" ID selector) to use Ayita Pro Fat by first declaring a new font family, and then referencing that family in the "title" selector.

The page header currently looks like this:

It is styled using the "title" ID selector, shown here:

#title {
    color: navy;
    font-weight: bold;
    font-size: 24px;
    margin: 19px 0;
}

To change the page header to use Ayita Pro Fat, we add a new @font-face rule to the top of the style sheet. This time, we give it a new family name and point it to the appropriate font object (AyitaPro-Fat.woff):

@font-face {
    font-family: AyitaProFat;
    src: url('../fonts/AyitaPro-Fat.woff');
}

Next, we update the "title" ID selector, adding the font-family property. (We also increase the size of the font.) Be aware that we do not need to remove the font-weight property because it is overridden by the @font-face declaration for this font variation. This ensures that browsers that do not support font linking or WOFF still see the title in bold.

#title {
    color: navy;
    font-family: AyitaProFat, "Times New Roman", serif;
    font-weight: bold;
    font-size: 26px;
    margin: 19px 0;
}

The page header now appears as shown here:

You can view the revised page. You can also download its CSS file.

If you have a range of weights of the same font family, it might be simpler to declare a font variation a different way. You can keep the family name the same, but add the font-weight property to a new @font-face rule (along with a pointer to the variation's font object). Take a look at the following example:

@font-face {
    font-family: MyFont;
    font-weight: bold;
    src: url('MyFontBoldFile.woff');
}

This declaration is very similar to the previous sample declaration, except that the font-weight property has been added and assigned a value of "bold", and the referenced font object has a different file name: MyFontBoldFile.woff. Referencing this font variation in a selector looks like this:

.myBoldSelector {
    font-family: MyFont, "Arial", sans-serif;
    font-weight: bold;
    font-size: 12pt;
    ...
}

This method is somewhat analogous to desktop publishing applications such as Microsoft Word or Adobe InDesign: To get a bold variation on a font, you can simply click the Bold button on the formatting palette without having to change the selected font. Contrast this to the first method, where we declared a new font family, which is more like changing the selected font itself to a bold variation—for example, changing MyFont to MyFontBold on the Font menu.

Next, we declare a bold variation of the Ayita Pro font and use it in our coffee company example webpage. We can use it to style the page heading, pictured here:

The page heading has been styled as an h2, which has the following selector:

h2 {
    clear: left;
    color: maroon;
    margin-left: 10px;
    font-size: 18px;
    font-weight: bold;
}

Again, this is a two-step process to style the heading with our linked font. First, we add the following @font-face declaration to the top of the file:

@font-face {
    font-family: AyitaPro;
    font-weight: bold;
    src: url('AyitaPro-Bold.woff');
}

Notice that we have not changed the font family, but we have added a font weight of bold and changed the source for the font object to AyitaPro-Bold.woff. To apply this font to h2 elements, we change the selector by adding the font family name, AyitaPro. (We also increase the size slightly.)

h2 {
    clear: left;
    color: maroon;
    margin-left: 10px;
    font-family: AyitaPro, "Times New Roman", serif;
    font-size: 20px;
    font-weight: bold;
}

Because the font weight was already set in the selector, this is the only change we need to make. Internet Explorer 9 identifies that the font-family property has been set to "AyitaPro" and that the font-weight property has been set to "bold", and displays the bold variation of this font, which corresponds to the font object AyitaPro-Bold.woff.

The page header now appears as shown here:

You can view the revised page. You can also download its CSS file.

You can have different weight variations on the same font. For example, the Ayita Pro family has thin, light, semi bold, black, and fat fonts that could all be used in the same CSS font family. In addition to the keywords normal and bold, the font-weight property within the @font-face declaration can also be set to any multiple of 100 between 100 and 900, with 100 being the thinnest face and 900 being the boldest. Along this spectrum, 400 corresponds to a normal face, and 700 corresponds to a bold face.

Note  At the time of this writing, browser support for font weights other than normal and bold varies. If you are targeting your website to browsers other than Internet Explorer 9, consult the browser vendor's website to determine its level of support for font weights, and test your site thoroughly in these browsers.

 

The following sample @font-face declaration demonstrates how to specify a numerical font weight.

@font-face {
    font-family: MyFont;
    font-weight: 200;
    src: url('MyFontLight.woff');
}

To use a certain variation, include the font-family property and the corresponding font-weight value in the appropriate selector, as shown here for the light (200 weight) variation:

.myNewSelector {
    font-family: MyFont, Arial, sans-serif;
    font-weight: 200;
    font-size: 14pt;
    ...
}

Note  The font-weight property within an @font-face rule does not accept the same set of values as the font-weight property within a selector. Specifically, it does not support the relative values bolder and lighter.

 

If a requested weight is not defined, Internet Explorer selects the closest match, as defined on the font-weight property reference page.

Font Style Variations

You can specify italic or oblique variations of a font. (An oblique font is a slanted version of a normal—or Roman—font, whereas an italic font is a separate subset of a font family that has unique shapes for each character.) The method is the same as for weight, but uses the font-style property.

Just like with font weight variations, to declare a font variation based on style, keep the family name the same, but add the font-style property to a new @font-face rule (along with a pointer to the variation's font object). The following example declaration illustrates this:

@font-face {
    font-family: MyFont;
    font-style: italic;
    src: url('MyFontItalic.woff');
}

Just like with font weight variations, use both the font family name and the corresponding font style type (MyFont and italic, in this case) when referencing the font style variation:

.myItalicSelector {
    font-family: MyFont, Arial, sans-serif;
    font-style: italic;
    font-size: 11px;
    ...
}

Next, we apply a variation of both font weight and style to part of the sample coffee company webpage. We can apply a black italic variation of Ayita Pro to the product headers, which also function as links to the product pages. (A black font weight is typically one or two steps up in thickness from bold. Ayita Pro, for instance, has four weights that are thicker than normal—semibold, bold, black, and fat.) One of these product headers is shown here:

The CSS that styles the product header is contained in the "productlink" class selector, which is shown here:

.productlink {
    text-decoration: none;
    color: #004080;
    font-style: italic;
    font-size: 14px;
}

Note  In the HTML, the product headers are styled by using h3 tags, which automatically cause them to be bold. When we apply a different weight variation, however, the new weight overrides the automatic weight.

 

To apply a black italic variation of Ayita Pro to these headers, we must first create a new @font-face declaration and add both the font-style and font-weight properties to it:

@font-face {
    font-family: AyitaPro;
    font-style: italic;
    font-weight: 800;
    src: url(AyitaPro-BlackItalic.woff');
}

Next, because the selector already has a font style of italic applied to it, we only need to specify a font weight of "800" (one step up from bold) and the AyitaPro font family. We could add font-family and font-weight properties, as we did with the previous example, but instead, this time we replace all the font properties with the font shorthand property. (We also make the text slightly larger.) After we do this, the selector appears as follows:

.productlink {
    text-decoration: none;
    color: #004080;
    font: italic 800 16px AyitaPro, "Times New Roman", serif;
}

This signals to Internet Explorer 9 to use the black italic variation of the Ayita Pro font family, and provides the same functionality as the following selector:

.productlink {
    text-decoration: none;
    color: #004080;
    font-family: AyitaPro, "Times New Roman", serif;
    font-style: italic;
    font-weight: 800;
    font-size: 16px;
}

The product headings now appear as shown here:

You can view the revised page. You can also download its CSS file.

Font Stretch Variations

With Internet Explorer 9, you can now specify font stretch variations. That is, you can specify whether to use a normal, condensed, or expanded face of a font family by using the font-stretch property. Like font weight variations, there is a scale of condensation and expansion, from ultra-condensed to ultra-expanded.

@font-face {
    font-family: MyFont;
    font-stretch: condensed;
    src: url('MyFontCondensed.woff');
}

Just like with font weight and style variations, use both the font family name and the corresponding font stretch type (MyFont and condensed, in this case) when referencing the font stretch variation:

.myCondensedSelector {
    font-family: MyFont, Arial, sans-serif;
    font-stretch: condensed;
    font-size: 15px;
    ...
}

Note  Unlike weight and style, the font-stretch property cannot be specified using the font shorthand property.

 

The font-stretch property within the @font-face declaration can be set to any of nine absolute keyword values, which range from the narrowest to the widest. Their order on this scale is as follows:

  • "ultra-condensed"
  • "extra-condensed"
  • "condensed"
  • "semi-condensed"
  • "normal" (no condensation or expansion)
  • "semi-expanded"
  • "expanded"
  • "extra-expanded"
  • "ultra-expanded"

Note  The font-stretch property within an @font-face rule does not accept the same set of values as the font-stretch property within a selector. Namely, it does not support the relative values "wider" and "narrower".

 

CSS3