CSS Typography

What Is CSS Typography?

CSS typography is the way you design and control text on a website using CSS. It includes the visual style of headings, paragraphs, links, buttons, labels, captions, navigation items, code blocks, and article content.

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #212529;
}

Good typography makes content easier to read, scan, understand, and trust.

Why CSS Typography Is Important

• Improves readability for articles, tutorials, blogs, and documentation.
• Creates clear visual hierarchy between headings and body text.
• Supports accessibility through readable sizing, contrast, and spacing.
• Improves mobile reading experience.
• Strengthens brand identity and visual consistency.
• Helps users scan content faster.
• Supports SEO-friendly user experience and engagement.

CSS Typography Cheatsheet

The following table explains the most important CSS typography properties and concepts.

CSS Typography Foundation

A good typography foundation starts with body text. Body text should be readable, scalable, and comfortable across devices.

html {
  font-size: 16px;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #212529;
  background-color: #ffffff;
}

This setup uses system fonts, readable size, comfortable line height, and strong contrast.

Typography Font Family

The font-family property defines the typeface used for text. Always provide fallback fonts.

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

code,
pre {
  font-family: "Fira Code", Consolas, monospace;
}

Use simple, readable fonts for body text. Decorative fonts should be used only for short headings or branding.

Font Size and Type Scale

A type scale creates consistent font sizes for headings, body text, captions, labels, and small text.

:root {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
}

body {
  font-size: var(--text-base);
}

h1 {
  font-size: var(--text-3xl);
}

h2 {
  font-size: var(--text-2xl);
}

Type scales help maintain consistency across large websites and design systems.

Responsive Typography

Responsive typography adapts text size to different screen sizes. The clamp() function is commonly used for fluid typography.

.hero-title {
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1.1;
}

.article-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
}

This keeps text from becoming too small on mobile or too large on desktop.

Line Height for Readability

Line height controls the vertical spacing between lines of text. It is one of the most important typography settings for readability.

p {
  line-height: 1.6;
}

h1,
h2,
h3 {
  line-height: 1.2;
}

Body text usually needs more line height than headings.

Font Weight and Visual Hierarchy

Font weight helps separate headings, labels, buttons, and important text from normal content.

h1,
h2,
h3 {
  font-weight: 700;
}

.lead {
  font-weight: 400;
  font-size: 1.125rem;
}

.label {
  font-weight: 600;
}

Use bold text for emphasis, but avoid making every element bold.

Paragraph Spacing

Paragraph spacing improves readability by creating clear separation between ideas.

.article-content p {
  margin-block: 1rem;
}

.article-content h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

Good spacing helps users scan articles and tutorials more easily.

Readable Line Length

Long lines are hard to read. The ch unit is useful for setting readable text widths.

.article-content {
  max-width: 70ch;
}

A common reading width is around 60ch to 75ch.

Letter Spacing and Word Spacing

Letter spacing and word spacing can improve style, but too much spacing hurts readability.

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.readable-copy {
  word-spacing: 0.03em;
}

Use letter spacing mainly for short labels, badges, and uppercase headings.

Creating a CSS Typography System

A typography system keeps fonts, sizes, weights, line heights, and spacing consistent.

:root {
  --font-sans: system-ui, sans-serif;
  --font-mono: "Fira Code", monospace;

  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;

  --leading-tight: 1.2;
  --leading-normal: 1.6;

  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

Typography tokens are useful for design systems, reusable components, and large websites.

Typography for Headings

Headings should create clear hierarchy. CSS controls the visual hierarchy, while HTML heading tags should keep the semantic structure.

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
  font-weight: 800;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.2;
  font-weight: 700;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
}

Do not choose heading tags only for visual size. Use headings for document structure, then style them with CSS.

Typography for Links

Links should be easy to recognize, read, and use with keyboard navigation.

a {
  color: #0a58ca;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a:hover,
a:focus-visible {
  text-decoration-thickness: 0.12em;
}

Avoid removing underlines from content links unless another clear visual cue is provided.

CSS Typography and Accessibility

Accessible typography should be readable, scalable, high contrast, and comfortable across devices and zoom levels.

body {
  font-size: 1rem;
  line-height: 1.6;
  color: #212529;
  background-color: #ffffff;
}

.article-content {
  max-width: 70ch;
}

• Use readable font sizes.
• Use enough line height for paragraphs.
• Use strong color contrast.
• Keep line length comfortable.
• Avoid decorative fonts for body text.
• Support browser zoom and responsive layouts.
• Keep links clearly visible.

CSS Typography and SEO

Typography does not directly create search rankings, but it affects readability, engagement, mobile usability, accessibility, and content quality. Good typography helps users consume SEO content more easily.

• Readable text improves user engagement.
• Clear headings help users scan page sections.
• Comfortable line length improves article reading.
• Responsive typography improves mobile experience.
• Accessible typography supports more users.
• Better content presentation improves trust and professionalism.

Useful Typography Tools

Common CSS Typography Mistakes

• Using too many font families.
• Using tiny body text on mobile.
• Not setting enough line height.
• Using very long text lines without max width.
• Center-aligning long paragraphs.
• Using low contrast text colors.
• Loading too many font weights.
• Using decorative fonts for body text.
• Choosing heading tags based only on visual size.
• Not testing typography at 200% zoom.

CSS Typography Best Practices

• Use one or two font families per website.
• Use rem units for scalable text.
• Use clamp() for responsive headings.
• Use comfortable line height for body text.
• Limit paragraph width with ch units.
• Use strong contrast between text and background.
• Use consistent heading sizes and spacing.
• Use semantic HTML headings and style them with CSS.
• Keep links visually clear and keyboard accessible.
• Test typography on mobile, desktop, and zoomed screens.

Key Takeaways

• CSS typography controls the visual style and readability of text.
• Good typography improves readability, accessibility, branding, and user experience.
• Use readable font sizes, line heights, and line lengths.
• Use fluid typography with clamp() for responsive headings.
• Use typography tokens for consistent design systems.
• Accessible typography supports SEO-friendly content presentation.