Text styles

Go to Previous Section:
Readable CSSThis is the 7th section of the CSS Getting Started tutorial; it gives more examples of text styles. You modify your sample stylesheet to use different fonts.

Information: Text styles

CSS has several properties for styling text.

There is a convenient shorthand property, font, which you can use to specify several aspects at once—for example:

Bold, italic, and small-caps (small capitals)
Size
Line height
Font typeface

Example

p {
font: italic 75%/125% "Comic Sans MS", cursive;
}

This rule sets various font properties, making all paragraphs italic.

The font size is set to three-quarters of the size in each paragraph's parent element, and the line height is set to 125% (a little more spaced than normal).

The font typeface is set to Comic Sans MS, but if this typeface is not available then the browser will use its default cursive (hand-written) typeface.

The rule has the side-effect of turning off bold and small-caps (setting them to normal).

Font faces

You cannot predict what typefaces the readers of your document will have. When you specify font typefaces, it is a good idea to give a list of alternatives in order of preference.

End the list with one of the built-in default typefaces: serif, sans-serif, cursive, fantasy or monospace.

If the typeface does not support some features in the document, then the browser can substitute a different typeface. For example, the document might contain special characters that the typeface does not support. If the browser can find another typeface that has those characters, then it will use the other typeface.

To specify a typeface on its own, use the font-family property.

Font sizes

Browser users can override the default font sizes or change the text size while they read a page, so it makes good sense for you to use relative sizes wherever you can.

You can use some built-in values for font sizes, like small, medium and large. You can also use values relative to the font size of the parent element like: smaller, larger, 150% or 1.5em. An "em" is equivalent to the width of the letter "m" (for the font size of the parent element); thus 1.5em is one-and-a-half times the size of the font of the parent element.

If necessary you can specify an actual size like: 14px (14 pixels) for a display device or 14pt (14 points) for a printer. This is not accessible for visually impaired users because it does not allow them to change the size. A more accessible strategy is to set a built-in value like medium on a top-level element of the document, and then set relative sizes for all its descendent elements.

To specify a font size on its own, use the font-size property.

Line height

The line height specifies the spacing between lines. If your document has long paragraphs with many lines, a larger-than-normal spacing makes it easier to read, especially if the font size is small.

To specify a line height on its own, use the line-height property.

Decoration

The separate text-decoration property can specify other styles, like underline or line-through. You can set it to none to explicitly remove any decoration.

Other properties

To specify italic on its own, use font-style: italic;
To specify bold on its own, use font-weight: bold;
To specify small capitals on its own, use font-variant: small-caps;

To turn any of these off individually, you can specify the value normal or inherit.

More details

You can specify text styles in a variety of other ways.

For example, some of the properties mentioned here have other values that you can use.

In a complex stylesheet, avoid using the shorthand font property because of its side-effects (resetting other individual properties).

For full details of the properties that relate to fonts, see Fonts in the CSS Specification. For full details of text decoration, see Text.

If you don't want to depend on the typefaces installed on users' systems, you can use @font-face to specify an online font. However, this requires that the users have a browser that supports this rule.

Action: Specifying fonts

For a simple document, you can set the font of the <body> element and the rest of the document inherits the settings.

Edit your CSS file.
Add the following rule to change the font throughout the document. The top of the CSS file is a logical place for it, but it has the same effect wherever you put it:
```
body {
font: 16px "Comic Sans MS", cursive;
}
```
Add a comment explaining the rule, and add white space to make it match your preferred layout.
Save the file and refresh your browser to see the effect. If your system has Comic Sans MS, or another cursive font that does not support italic, then your browser chooses a different font face for the italic text in the first line:

Cascading Style Sheets

Cascading Style Sheets
From your browser's menu bar, choose View > Text Size > Increase (or View > Zoom > Zoom In). Even though you specified 16 pixels in the style, a user reading the document can change the size.

Challenge

Without changing anything else, make all six initial letters twice the size in the browser's default serif font:

Cascading Style Sheets

Possible solution

Add the following style declaration to the strong rule:

  font: 200% serif;

If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden.

Hide solution

See a solution for the challenge.

What next?

Go to Next Section:
ColorYour sample document already uses several named colors. The next section lists the names of standard colors and explains how you can specify others.