Skip to content
beginner Phase 3 · CSS

CSS Typography

Master font properties, line height, letter spacing, and web font loading.

30m
0 problems
Topic Progress 0%

Font Properties

Font Properties

font-family

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.code {
  font-family: 'Courier New', Courier, monospace;
}

font-size

h1 {
  font-size: 2rem;          /* Relative */
  font-size: clamp(1.5rem, 4vw, 3rem); /* Fluid */
}

p {
  font-size: 1rem;          /* Base size */
}

font-weight

.light { font-weight: 300; }
.normal { font-weight: 400; }
.medium { font-weight: 500; }
.bold { font-weight: 700; }

/* Named values */
.bold { font-weight: bold; }
.normal { font-weight: normal; }

font-style

.italic { font-style: italic; }
.oblique { font-style: oblique; }
.normal { font-style: normal; }

font-variant

.small-caps {
  font-variant: small-caps;
}

font Shorthand

/* font: style weight size/line-height family */
body {
  font: normal 400 16px/1.5 Arial, sans-serif;
}

Line Height and Spacing

Line Height and Spacing

line-height

/* Unitless (recommended) */
p {
  line-height: 1.5;  /* 150% of font size */
}

/* With units */
p {
  line-height: 24px;
  line-height: 150%;
  line-height: 1.5em;
}

letter-spacing

h1 {
  letter-spacing: -0.02em; /* Tighter */
}

.subtitle {
  letter-spacing: 0.1em;  /* Wider */
  text-transform: uppercase;
}

word-spacing

.wordy {
  word-spacing: 0.5em;
}

text-indent

p.first {
  text-indent: 2em;
}

text-transform

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

text-decoration

.underline { text-decoration: underline; }
.strikethrough { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* Modern */
.fancy-underline {
  text-decoration: underline wavy red;
  text-underline-offset: 4px;
}

vertical-align

sup { vertical-align: super; }
sub { vertical-align: sub; }
.middle { vertical-align: middle; }

Web Fonts

Web Fonts

@font-face

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2'),
       url('/fonts/custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.heading {
  font-family: 'CustomFont', sans-serif;
}

Google Fonts

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">

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

font-display Values

@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* Show fallback, swap when ready */
}
Value Behavior
auto Browser decides
block Block rendering until loaded
swap Show fallback immediately, swap when loaded
fallback Brief block, then fallback
optional Use only if cached

Font Loading Best Practices

  1. Use font-display: swap for body text
  2. Preload critical fonts
  3. Subset fonts to reduce size
  4. Use modern formats (woff2)
  5. Limit font weights
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Quiz

1. What is the recommended way to set line-height?

Question 1 options

2. What does font-display: swap do (specific to typography)?

Question 2 options

3. What format should web fonts be in?

Question 3 options

4. How do you create fluid typography?

Question 4 options

5. What is the purpose of letter-spacing?

Question 5 options

Flashcards

Question

Why use unitless line-height?

Click to reveal answer

Answer

Unitless line-height scales with the element's font size, preventing unexpected spacing.

Question

What is font-display: swap?

Click to reveal answer

Answer

A CSS property that shows fallback text immediately and swaps to the custom font when it loads.

Question

What is the best font format for web?

Click to reveal answer

Answer

WOFF2 is the most compressed modern format. Use it as the primary format.

Question

How do you create fluid font sizes?

Click to reveal answer

Answer

Use font-size: clamp(min, preferred, max) to scale between minimum and maximum sizes.

Question

What is the font shorthand syntax?

Click to reveal answer

Answer

font: [style] [weight] size[/line-height] family; Example: font: normal 400 16px/1.5 Arial, sans-serif;

Revision Notes

Key Takeaways

  • 1. Use unitless line-height for scalable spacing
  • 2. font-display: swap prevents invisible text during loading
  • 3. WOFF2 is the recommended web font format
  • 4. clamp() creates fluid typography
  • 5. font shorthand combines multiple font properties

Interview Tips

  • • Explain why unitless line-height is preferred
  • • Know the font-display values and when to use each
  • • Understand web font loading strategies
  • • Be able to create responsive typography with clamp()

Cheat Sheet

CSS Typography Cheat Sheet

Font Properties

font-family: 'Font', sans-serif;
font-size: 1rem;
font-weight: 400;
font-style: normal;
font: normal 400 16px/1.5 Arial, sans-serif;

Spacing

line-height: 1.5;        /* Unitless */
letter-spacing: 0.05em;  /* Character spacing */
word-spacing: 0.1em;     /* Word spacing */

Text Properties

text-transform: uppercase;
text-decoration: underline;
text-indent: 2em;
vertical-align: middle;

Web Fonts

@font-face {
  font-family: 'Custom';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

Font Loading

  • Use font-display: swap
  • Preload critical fonts
  • Use WOFF2 format
  • Limit font weights