Q&A

What is CSS typography?

By AlgoInsight Team2026-06-07frontendweb-developmentcss

Overview

Typography is how text is arranged and styled; CSS typography is the toolset for doing it on the web. Since most of a web page is text, these properties have an outsized effect on usability and aesthetics. Mastering them means controlling not just which font is used, but rhythm (line height), spacing, hierarchy (size/weight contrast), and legibility.

graph TD
    A[CSS Typography] --> B[Font: family, size, weight, style]
    A --> C[Spacing: line-height, letter-spacing, word-spacing]
    A --> D[Alignment & flow: text-align, text-indent]
    A --> E[Appearance: color, text-decoration, transform]
    A --> F[Web fonts: @font-face, font-display]
    style A fill:#1e1b4b,color:#fff

Core Font Properties

p {
  font-family: "Inter", system-ui, sans-serif;  /* with fallbacks */
  font-size: 1rem;            /* 16px by default; rem scales with root */
  font-weight: 400;           /* 100–900; 400 normal, 700 bold */
  font-style: italic;         /* normal | italic | oblique */
  line-height: 1.6;           /* unitless = 1.6 × font-size (recommended) */
}

• font-family lists fonts in priority order, ending with a generic family (serif, sans-serif, monospace) as a fallback.
• font-size - prefer relative units (rem/em) over px for scalability/accessibility.
• line-height - a unitless value (e.g. 1.5) is best; it scales with the font size. Body text typically uses 1.4–1.6.

The font Shorthand

p { font: italic 700 1rem/1.6 "Inter", sans-serif; }
/*       style weight size/line-height  family       */

font-size and font-family are required in the shorthand.

Spacing and Alignment

h1 {
  letter-spacing: -0.02em;   /* tighten large headings */
  word-spacing: 0.05em;
}
p {
  text-align: left;          /* left | right | center | justify */
  text-indent: 1.5em;        /* first-line indent */
}

Subtle negative letter-spacing on big headings and generous line-height on body text are common readability tweaks.

Appearance

a {
  color: #6366f1;
  text-decoration: underline;     /* none | underline | line-through */
  text-transform: uppercase;       /* none | uppercase | lowercase | capitalize */
}
::first-letter { font-size: 2em; } /* drop-cap effect */

Web Fonts with @font-face

Load custom fonts and control loading behavior:

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;       /* variable font weight range */
  font-display: swap;          /* show fallback text while the font loads */
}

font-display: swap prevents invisible text during load (FOIT) by showing a fallback first - an important performance/UX detail.

Units and Responsive Type

• rem - relative to the root font size; the go-to for scalable type.
• em - relative to the parent's font size (compounds when nested).
• clamp() - fluid typography that scales between bounds:

h1 { font-size: clamp(1.5rem, 4vw, 3rem); }   /* min, preferred, max */

Readability Best Practices

• Body line length ~45–75 characters (max-width: 65ch).
• line-height ~1.5 for body text.
• Sufficient color contrast (WCAG AA: 4.5:1 for normal text).
• Establish hierarchy with size/weight contrast, not just color.

Why This Matters in Interviews

Front-end/CSS interviews use typography to gauge attention to detail and accessibility. Strong points: the core properties and the font shorthand, unitless line-height and why it's preferred, rem vs em (and compounding), @font-face with font-display: swap for performance, fluid type with clamp(), and readability/contrast guidelines (line length, WCAG). It signals you build interfaces people can actually read comfortably.

Common Pitfalls

• Using px for line-height or font sizes, hurting scalability/accessibility.
• em-based sizes compounding unexpectedly in nested elements.
• No font fallback / generic family, causing ugly defaults if a web font fails.
• Omitting font-display, causing invisible text while fonts load.
• Poor contrast or overly long line lengths harming readability.

References

• MDN CSS Fonts: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts
• MDN @font-face: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

More answers