Typography

CSS Typography Summary

CSS typography controls how text looks. It can change the font, size, weight, style, spacing, capitalization, decoration, and alignment of text.

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

font-family chooses the typeface used for text. It is common to include more than one font so the browser has a backup.

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

font-weight controls how bold text is. font-style is commonly used to make text italic.

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

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

p {
	line-height: 1.6;
}

text-decoration is often used for underlines. Links are underlined by default in many browsers, and CSS can add or remove that underline.

a {
	text-decoration: underline;
}

text-transform changes the capitalization of text without changing the HTML. It is often used for buttons, labels, and navigation links.

.label {
	text-transform: uppercase;
}