Overview of This Lesson

In this lesson, you'll learn a few of the more common CSS properties used to style text content and customize the fonts used in the page.


Before doing this lesson, make sure you're already familiar with the syntax of CSS, and how to use CSS in your projects. You probably also want to have the CSS Values tutorial/reference open in another tab.

Text Properties

CSS contains several properties that you can use to format text and text elements in your document. You can read about most of them in the MDN tutorial Fundamentals of Text and Font Styling..

Here are some quick links to the MDN documentation for the properties discussed in this part of the lesson:

Text Colour

The color property allows you to set the colour of the text (or foreground) inside an element. It takes any valid colour value. Note that any colour settings on the foreground affect not only the characters, but any text decoration you add to the characters, such as underline, strike through, etc.

You can play with the color property using the following CodePen:

See the Pen Untitled by Wendi Jollymore (@ProfWendi) on CodePen.

Colour property Codepen (opens in the pen tab)

Text Decorations

Text decorations are settings that enhance text, such as underlining, strike through, displaying text in title case, etc.

The text-decoration property allows you to change the line that appears on text. It supports each of the following values (I've added a style to teach one, so you can see what each one does):

We often use text-decoration: none; to turn the underline off on links when we want them to look like buttons, as demonstrated in this codepen:

See the Pen Use-Case: text-decoration: none by Wendi Jollymore (@ProfWendi) on CodePen.

Text-decoration: none use-case Codepen (opens in the pen tab)

The text-transform property changes the text's capitalization. The possible values are:

Here's a CodePen you can play with that demonstrates the uses of text-decoration and text-transform.

CodePen: decoration, transform

See the Pen CSS: Text Properties - decoration, transform by Wendi Jollymore (@ProfWendi) on CodePen.

Text-decoration and text-transformation Codepen (opens in the pen tab)

Text Horizontal Alignment

You can use the text-align property to change the horiziontal alignment of text within its container. Possible values include:

You can play with the text-align property in the following CodePen:

CodePen: Text Align

See the Pen CSS: Text Properties - Align, Colour by Wendi Jollymore (@ProfWendi) on CodePen.

text-align property Codepen (opens in the pen tab)

Text Spacing

There are several properties that you can use to customize the word spacing, letter spacing, and line height of text. These properties can help you make the text content of a page more readable when the font is difficult to read to accommodate users with specific disabilities.

The letter-spacing defines the amount of horizontal space between characters. The word-spacing property defines the amount of horizontal space between words.

Both properties take any valid length measurement, which consists of a number followed by a dimension that measures size (such as px or em). Using a positive measurement increases the amount of spacing and using a negative measurement decreases the amount of spacing.

Both properties can also accept the value normal, which sets the property to the font's default spacing or the user's browser (the user may have changed the browser default).

The line-height property defines the amount of space between lines of text. This property takes a numeric value (integer or floating point) but it can also take a dimension that measures size (such as px or em). For example, using line-height: 1.5 sets the line height to 1.5 times (or 150%) of the font size , and line-height: 10px sets the line height to exactly 10 pixels, regardless of the font size. Using the numeric value with no units is the preferred way to use the line-height property.

CodePen: letter spacing, word spacing, line height

See the Pen CSS: Text Properties - indent, letter spacing, line height by Wendi Jollymore (@ProfWendi) on CodePen.

text spacing properties Codepen (opens in the pen tab)

Font Properties

CSS also contains several properties that you can use to customize fonts. Pages without font settings will always display using the user's browser default (each browser generally allows you to set a default font and a default mono-space font). You can override those defaults by using font properties in CSS. Note however, that you shouldn't use a font that is hard to read! You don't want your users leaving your web site because they can't read it! For accessibility, stick to regular fonts (the most accessible fonts for visually impaired users are Arial and Verdana).

Font Terminology

It's important to understand the different terms when working with fonts: many people are confused by terms like "font", "font family", and "typeface" - what do these terms mean, what's the difference? What's a glyph and why is it important?


A glyph is a representation of a single character. For example, F is the glyph for upper-case letter f, and * is the glyph for the asterisk symbol. 0 is the glyph for 0 in a monospaced font (I told the browser to use Courier or Courier New, but it might be different in your browser, it depends on your browser settings).

Typeface vs. Font

A lot of people will define typeface as a specific font, and that's somewhat true. A typeface is the name given to a specific style and size of a set of glyphs. For example, this part of this sentence is in the Courier New typeface, although if you configured an override of the default monospaced font in your browser, it might render in a slightly different typeface. A typeface consists of a specific glyph for each character, so you might notice that some fonts/typefaces don't support some characters: that's because the designer didn't create a glyph for that character.

A font is a file for a specific typeface in a specific style. For example, the typeface "Courier New" might be in the file called "courier.ttf". As you probably know, you can write some text in a specific typeface and then make it bold, or italic, or both bold and italic. When you type something in a word processor in the Courier New typeface and then make it bold, you're actually using a different font. The Courier New Bold font might be in a file called "courierbd.ttf".

Each style of a particular typeface is in a different file. On a computer, there would be several files for a specific typeface. For example, one file might be for Courier New with no embelishments (i.e. "regular"), one file for Courier New in bold, another one for Courier New in italics, and a third file for Courier New in both bold and italic. Therefore, the Courier New typeface has four different fonts (font files) on a standard computer.

This means that for a specific typeface, a character will have several glyphs. For example, the number 0 (zero) in regular Courier New, the 0 in Courier New bold, the 0 in Courier New italic, and the 0 in Courier New bold-italic. Each set of glyphs is stored in the font file for that typeface/style combination.

an example showing the four files for the Courier New font
The four fonts or font files for the Courier New typeface on my computer

Font Family

A font family is a collection of fonts for a specific typeface. So on my computer, the font family "Courier New" is made up of Courier New (the regular one with no bold/italic), Courier New Bold, Courier New Italic, and Courier New Bold Italic

Generic Font Families

In addition, CSS defines generic font families. Generic font families are collections of typefaces with specific characteristics. CSS has five different font families:

For example, the Courier New font family fits into the monospace generic font family. The Times New Roman fonts fit into the serif generic font family, and Arial font family fits into the sans-serif generic font family.

For web sites and applications, you would generally stick with serif or sans-serif fonts, and use monospace fonts for specific purposes (e.g. displaying sample code or output from code/programs, etc). Cursive and fantasy fonts are difficult to read and are not considered good for accessible web design.

Font Properties

Here are various CSS properties you can use to customize fonts: be sure to read the MDN documentation for each so you can learn the various values each one accepts.

CodePen: Various Font Properties

See the Pen CSS: Font Properties by Wendi Jollymore (@ProfWendi) on CodePen.