Cascading Style Sheets/Fonts and Text

Font Properties

 * &mdash; Sets the typeface.
 * &mdash; Sets the style of the text, common values are normal and italic.
 * &mdash; Modifies the text, e.g. small-caps.
 * &mdash; Sets the thickness the text will be, values like bold and normal.
 * &mdash; Sets the font size.
 * &mdash; Sets the spacing between the baselines of adjacent lines of text.

Each of these is examined below in detail.

W3C Specification CSS1 CSS2.1

The following is a simplified description of CSS font matching. See the CSS1 font matching or CSS2.1 font matching specification for the definitive description.

The value for the property is a comma separated list of fonts in a prioritized order. The web browser will attempt to use the first font in the list. If the first font isn't available to the web browser it will attempt to use the second, and so on through the list. If none of the fonts are matched the web browser will use a default font. This might be a font selected by the user.

In the example below the web browser would try to use Verdana. If Verdana was not installed (or not available in an appropriate variant if is also specified) the web browser would try to use Helvetica. If Helvetica was not available it would try to use Arial.

Since there isn't a standard set of fonts that is available in all web browsers and operating systems it is possible that none of the named fonts will be matched. Five generic font families are defined to allow for this possibility. Web browsers will replace a generic font with the closest available font. The five generic families are: serif, sans-serif, monospace, cursive and fantasy.

You should always end a font-family list with a generic text-family. Otherwise you might, for example, end up with the user's default serif font where you wanted a sans-serif font. A generic font is always guaranteed to match so there is no point specifying alternative fonts after a generic font. On systems with a limited range of fonts it is possible that two or more generic fonts may be mapped to the same font. You can check which fonts your web browser uses for the generic fonts by looking at the example below. Are there five distinct fonts?

serif sans-serif monospace cursive fantasy

An ongoing problem for web designers is that they are not able to specify exactly the fonts that they require, because that they don't know which fonts the user will have installed. The way around this is to specify in the font-family list a more-or-less equivalent font from each possible client system. There are a number of useful references for determining this equivalence (here, for example).

For example, to use the font known on Windows as Impact, the following declaration is used.

W3C Specification CSS1 CSS2.1

CSS1 and CSS2.1 define three values for this property:, and. The initial value for this property is. Many font families do not define a separate italic version of the font, in which case the oblique version is used when is set to.

CSS rules:

Sample HTML:

Example rendering:

W3C Specification CSS1 CSS2.1

CSS1 and CSS2.1 define two values for this property: and. The initial value for this property is. When is applied lowercase letters appear as scaled down uppercase letters. Uppercase letters and other characters are unaltered. The effects of these values is shown below.

CSS rules:

Sample HTML: .     Other characters: 1 2 3 % ! This sentence shows the effect of setting the Cascading Style Sheets property. Other characters: 1 2 3 % !

Example rendering:

W3C Specification CSS1 CSS2.1

The property sets the darkness of the font. CSS currently defines nine levels of darkness from, the lightest, to , the darkest. The number of distinct levels depends on the. Some families may define all nine levels while most will only define one or two. The value is a synonym for  and  is a synonym for.

The list below shows the different weights for the current family:      or     or  </li> <li style="font-weight:900"></li> </ul>

The final two possible values for are  and. When these values are used the web browser tries to pick a font from the current family that is lighter or darker than the font of the parent element.

Since most font families only have one or two weights it is usual to only use the values and.

For example, to make  elements red instead of the bold used by most web browsers apply the following rule.

As another example you can make all hyperlinks bold.

Sample HTML:

Example rendering:

W3C Specification CSS1 CSS2.1

Before reading this section make sure you know how to change the default font size in all the browsers you use for testing web pages.

'''Make sure you understand the difference between screen pixels and CSS pixels. See CSS Lengths and units.'''

Font size is one of the more problematic areas of web design. The most common complaint of web surfers is that the font size is too small on many pages. (See Jakob Nielsen's Top Ten Web Design Mistakes of 2005.) A frequent request from customers buying a web site is for the font to be made smaller so more information can be crammed on to the page. To make matters worse, most users aren't taught how to change the default font size used by their web browser. (If you ever teach a class how to use a web browser, changing the font size and colors is one of the most important things you can teach.) Another issue is that web designers tend to be young with comparatively good eyesight. Just because you prefer to read text that is 60% of the out-of-the-box default font size doesn't mean your target audience can read text at that size.

Some users do change their default font size and web pages should respect their choices. Ideally all the important information on a page should be at least as large as the user's default font size. Important information includes publication dates, links to the site's privacy policy, etc. Small print should be reserved for unimportant text such as statements that the page is valid HTML, conforms to WCAG Double-AA, etc. and effects such as superscripts that are normally rendered in a smaller size.

Lengths in CSS pixels or absolute units (,  ,  ,   and  ) do not respect users' preferences. In fact using these units prevents users from easily changing the size of the font if they find it too small or too large. For example, in Internet Explorer for Windows the user has to select 'Internet Options...' from the 'Tools' menu, then click on the 'Accessibility...' button on the 'General' tab and check the box to 'Ignore font sizes specified on web pages' if they want to change the size of a font given in any of these units. This isn't user friendly.

The values that do respect users' preferences are length in s or  s, percentages and keyword values. There are seven 'absolute' keyword values that scale the font relative to the user's default font size and two 'relative' keyword values that scale the font relative to the parent element. The 'absolute' keywords are The two relative keywords are and.
 * – the user's default font size in IE/win v6 Quirks Mode and IE/win v5 regardless of rendering mode.
 * – the user's default font size in Standards Mode.
 * – the user's default font size in IE/win v6 Quirks Mode and IE/win v5 regardless of rendering mode.
 * – the user's default font size in Standards Mode.

Most web designers prefer to use s. Font sizes in  s,  s and percentages are calculated relative to the font size of the parent element. is equal to. The following example demonstrates this.

Sample HTML:

Example rendering:

Since 0.5 times 5 times 0.4 equals 1 the text in the last  should be the same size as the text in the parent paragraph.

Using ems in Internet Explorer
If you use s for the  in a page viewed with Internet Explorer you need to be aware of a quirk of Internet Explorer. On a Windows PC save the two files given below in the same directory and view IE_font_size_bug.htm with Internet Explorer. (This example has been tested in IE/win v5.0, v5.5 and v6.0.)

IE_font_size_bug.css

IE_font_size_bug.htm

Set the default font size to medium, smaller and smallest. (Use the 'Text Size' submenu of the 'View' menu if you don't have the Size button on your toolbar.) The height of the text is shown in the following table. At six pixels high letters become blurred splodges on the page and are effectively unreadable.

There is a simple fix. Add an extra rule to IE_font_size_bug.css like so:

In theory setting the to  shouldn't change anything. However, if you view the page with the new stylesheet you will find the size of 'smallest' text has changed. Nine pixel high letters are quite readable if you have good eyesight and/or a large monitor.

It is a good idea to always set the of the   to a percentage to deal with this quirk. It is also a good idea to leave a comment explaining why the font size declaration is there so that someone else doesn't remove an apparently redundant rule when they take over responsibility for your stylesheet.

Problems with nesting
You can run into problems using s or percentages when you set the  property using a type selector. In the example below each of the nested  elements matches the selector and so the size of the text is halved each time. The text in the innermost division is 1/16 of the user's default font size. You will probably struggle to read the example rendering unless you increase your default font size significantly.

CSS rules:

Sample HTML:

Example rendering:

This problem is often found with lists where it is tempting to set the of the   element. When someone adds a sub-list in the future the text of the sub-list is far too small or far too large depending on the scale factor. The solution is to use an ID selector to target the outermost element of the nested group, e.g. the outermost  element for nested lists.

Problems with tables and forms
If you are using tables or forms you may find you need to use the following rule to get the text in these elements to scale properly with the user's preferences:

W3C Specification CSS1 CSS2.1

The property defines the minimum distance between the baselines of adjacent lines of text. The distance may be increased if necessary to fit images, etc. on the line. It is expressed as a ratio between the height of the font and the line spacing. The height of a font is defined as the distance between the baseline and the top of a capital letter. Some letters may have descenders that drop below the baseline. In some fonts there may also be ascenders the rise above the top of a capital letter.

In the example below the green band behind each line runs from the baseline up to the font height. The first line shows capital letters. The second line shows lowercase letters with descenders. The third line shows capital letters with accents.

The can be given as either a simple number, a length or a percentage. If it is given as a simple number or a percentage this is multiplied by the font height to determine the space between the lines. The next example demonstrates how this paragraph appears with four different values for the. The font is enlarged in the example to make the line spacing easier to see.

Look closely at the descenders in the example with a of 1. You will probably notice at least one point where a descender touches a letter in the line below. Most web browsers default to a of 1.2. A number of web designers feel that a of 1.6 is more readable, particularly if the font size is relatively small.

Shorthand property
W3C Specification CSS1 CSS2.1

The shorthand property can be used to set the five individual font properties and the  property in a single declaration. The has two methods for setting the individual properties, by specifying a combination of individual properties or by giving a single keyword that selects a predefined set of individual values. The second option is only available in CSS2.1.

Combination of individual properties
The syntax for combining individual properties is a little complicated. The properties are given in the following order:
 * none, one or more of, and  in any order;
 * optionally followed by ;
 * if is present it may be followed by a slash, , followed by the ;
 * followed by the, which must be present.

An example containing all the components is: Notice that the  means that the font size is one and half time the font size of the parent element. The  then sets the line height to 1.4 times the font size of the current element. Also notice that the font family is a comma separated list of families in order of preference.

If some of the properties are omitted they are set to their initial values. For example, is equivalent to

Keyword
The keyword values refer to the system fonts used by the web browser for items such as menus. The keyword values are:
 * ; the font used for buttons, drop-down lists, etc.
 * ; the font used to label icons.
 * ; the font used by drop-down menus.
 * ; the font used by dialog boxes.
 * ; the font used for labelling small controls.
 * ; the font used in the status bar.

The keyword values set all the individual properties to match the corresponding system font. The individual properties can then be overridden by additional declarations.

Example:

W3C Specification CSS1 CSS2.1

This property is used to justify blocks of text. The four possible values are, , and. The values are demonstrated below.

CSS rules:

Sample HTML:

Example rendering:

This property interacts with the following other properties:
 * : If the value of is  when  is   or   the web browser must treat  as being  if the current text direction is left to right (this is the normal for English) or  if the current text direction is right to left.
 * : If this is set to anything other than the web browser may only adjust the inter-word spacing when justifying text.
 * : If this is set to anything other than the web browser must try to honor the specified value when justifying text.

W3C Specification CSS1 CSS2.1

The property is used to increase or decrease the space between letters. Web browsers are not required to support decreasing the letter spacing or may only allow a limited decrease.

The value can be used to remove an inherited value from an element. If the value is set to anything other than the spacing between letters can not be altered when using  to justify the text. You can set to zero if you don't want the letter spacing altered by justification but don't want to add any extra space.

CSS rules:

Sample HTML:

Example rendering:

W3C Specification CSS1 CSS2.1

The property is used to increase or decrease the space between words. Web browsers are not required to support decreasing the word spacing or may only allow a limited decrease.

The value can be used to remove an inherited value from an element.

CSS rules:

Sample HTML:

Example rendering:

W3C Specification CSS1 CSS2.1

The may either be set to  or any combination of, ,  and. It is considered bad practice by many web designers to use. It is also considered bad practice to underline anything other than a hyperlink. Consider the second and third examples below as examples of what not to do.

If you use to indicate deleted text consider using a semantic element such as (X)HTML's   element either instead of or in combination with this property.

The most common use of is to change the appearance of hyperlinks to remove the underline from links in the main content whilst preserving them in navigation menus or vice versa.

CSS rules:

Sample HTML:

Example rendering:

An example of using all four values together. is not supported by some browsers so you may be spared that effect.

CSS rule:

Sample HTML:

Example rendering:

Any applied to an element is drawn over all of its content including any child elements, regardless of the value  set on those elements. Any additional decoration specified for child elements will be applied as well as the parent's decoration.

CSS rule:

Sample HTML:

Example rendering:

Notice that the underlining in the second paragraph is in red, the color assigned to the  element that is underlined. However, the line through the  element is black because it belongs to the parent   element, which has its color set to black.

W3C Specification CSS1 CSS2.1

The property specifies the indent for the first line of a block level element. Use, , or  to indent an entire block. The indent may be negative but web browsers are not required to support negative indents or may limit the size of a negative indent. The property is inherited. In the example below the is applied to the   elements containing the paragraphs rather than directly to the paragraphs themselves.

Note that the indent is only applied at the start of a block level element. Line breaks caused by inline elements do not cause any additional indents to appear within a block.

CSS rules:

Sample HTML: property. If you want to recreate a novel-like appearance you will need to set both properties. This paragraph has a line break in it, created with the  element. Since this doesn't start a new block level element there is no indent or undent after the line break. The line break was immediately before this sentence. You may need to adjust the width of your browser window to make the line break obvious. This paragraph should have an undent. This is a more unusual style but it can be useful. It is most often used with lists to emphasis the start of a list item either instead of        or in conjunction with a bullet. This paragraph has a line break in it, created with the  element. Since this doesn't start a new block level element there is no indent or undent after the line break. The line break was immediately before this sentence. You may need to adjust the width of your browser window to make the line break obvious.

Example rendering:

W3C Specification CSS1 CSS2.1

There are four values for the property:
 * : do nothing.
 * : converts any lowercase characters to uppercase. Other characters are unaltered.
 * : converts any uppercase characters to lowercase. Other characters are unaltered.
 * : converts the first character of each word to uppercase. Other characters are unaltered. In particular uppercase characters elsewhere in a word remain uppercase.

The exact effect of depends on the language of the element. How the language is determined depends on the document being styled. HTML documents use the attribute to specify the language for an element. The language is inherited by child elements unless a attribute is used to alter the language. XML documents use  in the same manner. XHTML 1.0 documents may use either the HTML attribute or the XML   attribute.

Note that copying transformed text to the clipboard may vary throughout browsers. Firefox copies the text to the clipboard as if it were not transformed, and Chrome copies it to clipboard as it appears.

CSS rules:

Sample HTML:

Example rendering:

Compare the effect of setting to  with setting  to.

CSS rules:

Sample HTML:

Example rendering:

W3C Specification CSS1 CSS2.1

The property only applies to elements whose  value is  or. The behaviour of is significantly different for s and is described in the section on ../Tables.

What not to do
The most common mistake when using is to apply it to a block-level element and then wonder why it doesn't work. The following example shows what goes wrong. CSS rules:

Sample HTML:

Example rendering:

As you can see the red inner division is firmly aligned with the top of the blue division.

Correct usage
The correct usage of is to adjust the relative positions of sections of text and embedded content within a line of text. To understand you need to understand CSS line boxes. The following example shows two block-level elements, paragraphs. Each block-level paragraph contains an inline element,. A border and background are applied to the inline elements so the line boxes are visible.

CSS rules:

Sample HTML:

The property adjusts the alignment of inline elements relative to other items in the same line box. The next example illustrates how it can be used to create superscripts and subscripts.

CSS rules:

Sample HTML:

Example rendering:

The full set of values for is:

CSS2.1
CSS2.1 also allows the value of to be a length or percentage.

W3C Specification CSS1 CSS2.1

The property controls the handling of whitespace (normal spaces, tabs, form feeds and newlines but not non-breaking spaces or other special spaces). In the absence of CSS, HTML and XML documents are rendered with runs of whitespace replaced by a single whitespace character. Blocks of text are word-wrapped so that the text fits within the width of the containing block. For example, the two paragraphs in the sample HTML below would be rendered in the same way.

Example rendering:

The property has five values. The value specifies that text should be handles as usual for an HTML or XML document. The table below shows how the other values compare to normal rendering.

The two values added in CSS2.1, and, aren't widely supported at the moment.

Internet Explorer for Windows versions 5.0 and 5.5 does not support. IE/win v6.0 only supports in standards mode.

The HTML  element behaves as though the following CSS rule is applied.

The example below compares and.

CSS rules:

Sample HTML:

text-shadow
Text shadow is a new effect that is part of CSS3. It's arguments are the same as box-shadow's and supports multiple shadows.


 * text-shadow: x-offset y-offset blur/diffusion color [, repeat for multiple];

<p style="text-shadow: 4px 4px 4px black; font-size: x-large;">Text with Shadow! Bold! Italic! Underline! Strike!

<p style="text-shadow: 2px 2px 1px black; font-size: x-large;"> Text with Sharp Shadow! Bold! Italic! Underline! Strike!

Now let's try multiple shadows, note that you must keep moving the shadows to prevent them from all being drawn in the same place (unless that is what you want ;) ): <p style="text-shadow: 2px 2px 2px red, 4px 4px 2px blue, 6px 6px 2px green; font-size: x-large;">Text with Many Shadows! Bold! Italic! Underline! Strike!

anaglyphs
You can use  to generate three-dimensional (stereoscopic) red-cyan anaglyphic text.

" " makes the un-shadowed text transparent, so that only the red and cyan  shadows are visible. Note that the cyan shadow is called "aqua" in CSS. The number of pixels offset left or right is then the amount of three-dimensional depth, or how far away from the screen that the text will appear to float. You should only need a small number of pixels. Also know that with red-cyan anaglyphic text, you will not be able to use  or   for hyperlink or background colors.

<p style="color: rgba(0,0,0,0); text-shadow: -1px 0px 0px red, 1px 0px 0px aqua; font-size: large;">This text has two pixels of red-cyan separation. <p style="color: rgba(0,0,0,0); text-shadow: -2px 0px 0px red, 2px 0px 0px aqua; font-size: large;">This text has four pixels of red-cyan separation. <p style="color: rgba(0,0,0,0); text-shadow: -3px 0px 0px red, 3px 0px 0px aqua; font-size: large;">This text has six pixels of red-cyan separation.

You will need to be wearing red-cyan 3D glasses in order to see the 3D text. Since most visitors to a website will not be wearing 3D glasses, make sure that a non-anaglyphic version of the text is accessible.

Web Fonts
Web fonts are a feature of CSS2 that allow a rule to be set to allow an embeddable font in a web page, freeing a designer from having to rely on a subset of fonts that ship with most OSes. Fonts supported by this feature are either TrueType (.ttf) or OpenType (.otf). Web fonts are currently only supported by WebKit (Safari, Shiira, Chrome, et al.). Internet Explorer supports web fonts only with the Embedded Open Type (.eot) format, something unused by any other browser.

Sample CSS:

Now, to use the font we simply go about business as usual:

Then any headings in that document would display in our example "WikiFont" in a supporting browser.