Control text appearance with fonts, sizes, spacing, and alignment
Typography in CSS controls how text appears on your website. It includes font selection, sizing, spacing, alignment, and styling. Good typography improves readability and establishes visual hierarchy.
Key Principle: Typography is about making text easy and enjoyable to read.
Specifies which font to use for text.
font-family: Arial, Helvetica, sans-serif;
Fallback fonts: List multiple fonts in order of preference
Generic families: serif, sans-serif, monospace, cursive, fantasy
Web fonts: @font-face or Google Fonts for custom fonts
Sets the size of text.
font-size: 16px;font-size: 1.2rem;
Units: px (pixels), rem (relative to root), em (relative to parent), % (percentage)
Best practice: Use rem for scalability
Controls the thickness of text.
font-weight: bold;font-weight: 700;
Keywords: normal, bold, lighter, bolder
Numeric: 100-900 (400 = normal, 700 = bold)
Applies italic or oblique styling to text.
font-style: italic;
Values: normal, italic, oblique
Sets the vertical spacing between lines of text.
line-height: 1.6;
Unitless preferred: Multiplies font size (1.6 = 160% of font size)
Readability: 1.4-1.6 is ideal for body text
Controls horizontal alignment of text.
text-align: center;
Values: left, right, center, justify
Default: left (or right in RTL languages)
Adjusts space between characters.
letter-spacing: 0.05em;
Positive values: Increase space
Negative values: Decrease space
Use: Headers, logos, emphasis
Adjusts space between words.
word-spacing: 0.2em;
Less common than letter-spacing
Changes text capitalization.
text-transform: uppercase;
Values: uppercase, lowercase, capitalize, none
capitalize: First letter of each word