Skip to content
beginnerPhase 31 · CSS

CSS Typography

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

30m
0 problems
Topic Progress0%

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>

Practice Problems

0/3solved
Build CSS Typography Component

Create a reusable React component implementing CSS Typography. Include proper state management and accessibility.

Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed
CSS Typography Testing

Write unit and integration tests for CSS Typography using React Testing Library.

Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests
CSS Typography Performance

Optimize CSS Typography for performance. Consider memoization, code splitting, and bundle size.

Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Quiz

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

Question 1 options

2. What does font-display: swap do?

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