CSS Text Properties

Typography

The style and appearance of text on the page is called Typography.

Using CSS, we can control the appearance of the text, including:

• size
• spacing
• line length
• color

Using these properties, we can make the text look good!

You can use CSS to control these properties. The properties are:

• font-size
• line-height
• max-width (for controlling the length of each line)
• color and background-color

Practice: Good Text, Bad Text

Key rules for Typography

• Point size should be 15-25 pixels
• Line spacing should be 120–145% of the point size
• Line length should be 45–90 characters (including spaces)
• Less color is more effective

Body text point size should be 15-25 pixels

font-size is the relevant CSS property, so the recommendation is body text between font-size: 15px and font-size: 25px.

body {
    font-size: 18px;
}

Line spacing should be 120–145% of the point size

line-height controls how tall each line is. You can set it as a multiple of the font-size by using a value without units, like 1.4. Use between line-height: 1.2 and line-height: 1.45.

body {
    line-height: 1.35;
}

The average line length should be 45–90 characters

Line length is determined by the width of the parent element. The max-width on the parent element is often easiest way to control the average line.

body {
    max-width: 500px;
}

Less Color is more effective

The color property in CSS sets the color of text. The background-color property sets the background color. Usually, the best choice is black or dark gray text, on a white or near-white background.

The goal is to create contrast between the background color and the text color. Dark text on a dark background is hard to read. So is light text on a light background.

body {
    background-color: #eee; /* near-white */
    color: #333; /* dark grey */
}

Summary

Combining all the rules above, here's a default style for body text:

body {
    font-size: 18px;
    line-height: 1.35;
    max-width: 500px;
    background-color: #eee; /* near-white */
    color: #333; /* a dark grey */
}

There's lots of wiggle room! You don't need to use exactly these rules.

Further Exploration

What makes good Typography?

Butterick’s page What is good typography? says

"Good typography reinforces the meaning of the text."

There's lots to learn about what makes typography good.

Text and Font Styling

There's also lots more to learn about the CSS properties for text styling.