CSS Typography Summary

CSS typography controls how text looks and reads, including its font, size, weight, line spacing, and alignment.

body {
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

Good typography makes content easier to read. The goal is not decoration first; the goal is readable text.

Font Family Chooses The Typeface

The font-family property chooses the typeface. A font stack lists backup choices in case the first font is unavailable.

body {
	font-family: Arial, Helvetica, sans-serif;
}

The font-size property controls how large text appears.

h1 {
	font-size: 40px;
}

p {
	font-size: 18px;
}

The line-height property controls the space between lines of text. More line height can make paragraphs easier to read.

p {
	line-height: 1.6;
}

font-weight controls how bold text appears. font-style can make text italic.

.lead {
	font-weight: bold;
	font-style: italic;
}

Use these styles deliberately so important text remains easy to recognize.