Typography (Serif / Sans-Serif / Variable Font)

Typography is the art and technique of arranging type. Serif fonts have small strokes (serifs) at the ends of letters; sans-serif fonts do not. Variable fonts pack multiple weights, widths, and styles into a single file for better performance and design flexibility.

Category: Design

Author: Atomic Glue Editorial Team

## Definition

Typography is the craft of selecting and arranging typefaces to make written language readable, accessible, and visually aligned with brand identity. It is one of the most influential design decisions in any product. Serif typefaces (like Times New Roman, Georgia, Merriweather) have small decorative strokes at the ends of letterforms and are traditionally associated with print and long-form reading. Sans-serif typefaces (like Inter, Helvetica, Roboto) lack those strokes, giving them a cleaner, more modern appearance that works well on screens. Variable fonts are a more recent innovation that consolidates multiple font files (thin, regular, bold, italic, condensed, extended) into a single file with adjustable axes, enabling continuous variation in weight, width, slant, and optical size without loading multiple font files.

## Serif vs Sans-Serif: When to Use Each

Serif fonts excel in long-form reading contexts because the serifs guide the eye horizontally along text lines. They convey tradition, authority, and elegance. Sans-serif fonts perform better on screens at small sizes, where serifs can degrade rendering. They convey modernity, clarity, and approachability. Many digital products use sans-serif for body text and a serif for display headings, or stick with a single well-chosen sans-serif throughout. The choice depends on brand personality, reading context, and performance requirements.

## Variable Fonts: The Future of Web Typography

Variable fonts use OpenType font variations to offer continuous adjustment along design axes like weight (100 to 900), width (condensed to extended), slant (upright to italic), and optical size (text to display). One variable font file replaces dozens of individual font files. This means faster page loads (fewer HTTP requests), richer typographic control (fluid weight transitions in CSS), and creative possibilities like animated weight changes. Adoption is high across modern browsers and design tools, though legacy browser support requires fallback strategies.

## Building a Typographic Scale

A typographic scale is a set of font sizes that progress in a defined ratio (often 1.25 or 1.333, known as the major third or perfect fourth). A typical scale includes sizes for display (72px, 48px), heading 1-4 (36px, 28px, 22px, 18px), body (16px), small/caption (14px, 12px), and micro (10px). Each size should be paired with a line-height and letter-spacing value. The scale ensures visual rhythm and hierarchy without arbitrary size decisions.

## Note

Variable fonts are supported in all modern browsers (Chrome 87+, Firefox 62+, Safari 13+, Edge 87+). Always provide a fallback font stack.

## In code

/* Variable font usage in CSS */
@font-face {
  font-family: 'InterVariable';
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

body {
  font-family: 'InterVariable', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  font-size: 2.5rem;
  font-weight: 700;  /* Any weight between 100-900 works */
  line-height: 1.2;
}

/* Fluid weight animation on hover */
.nav-link {
  font-weight: 450;
  transition: font-weight 0.2s ease;
}
.nav-link:hover {
  font-weight: 600;
}

## Common questions

Q: How many typefaces should a brand use?

A: Two at most, and ideally one. A heading typeface and a body typeface from the same superfamily (like Inter used at different weights) is enough. Introducing more typefaces adds visual noise and increases page load time. The best typographic systems look cohesive because they use restraint.

Q: Are variable fonts slower to load?

A: No. One variable font file (typically 30-80kb woff2) replaces 10+ individual font files that could total 200-500kb. Variable fonts are faster to load because they reduce HTTP requests. The tradeoff is that the single file is larger than any one individual weight file, but the total bytes downloaded is usually significantly lower.

## Key takeaways

• Typography is a foundational design discipline affecting readability, brand perception, and performance.
• Serif fonts suit long-form reading and traditional brands; sans-serif fonts suit modern digital interfaces.
• Variable fonts replace dozens of files with one, enabling performance gains and richer typographic control.
• A typographic scale creates consistent visual rhythm across heading and body sizes.
• Stick to one or two typeface families. More than two creates visual clutter.

## Related entries

• [Web Fonts](atomicglue.co/glossary/web-fonts)
• [Visual Design](atomicglue.co/glossary/visual-design)
• [Brand Identity](atomicglue.co/glossary/brand-identity)
• [Design System](atomicglue.co/glossary/design-system-front-end)

Last updated July 2026. Permalink: atomicglue.co/glossary/typography-serif-sans-serif-variable-font