font shorthand & system fonts
The font shorthand lets you set font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family in a single declaration. It also has a special syntax for using system fonts — the fonts the operating system itself uses for its UI. Understanding both uses is the final piece of the CSS typography foundation.
font shorthand syntax
CSS
/* Syntax: [style] [variant] [weight] [stretch] size[/line-height] family */ /* Only font-size and font-family are required */ /* Minimum */ font: 1rem sans-serif; /* With line-height */ font: 1rem/1.6 sans-serif; /* Full declaration */ font: italic small-caps bold 1.125rem/1.6 'Inter', system-ui, sans-serif; /* Style = italic Variant = small-caps Weight = bold (700) Size = 1.125rem / LH = 1.6 Family = 'Inter', system-ui, sans-serif */
The font shorthand resets all font sub-properties not listed to their initial values — using font: 1rem sans-serif resets font-weight to normal even if you had bold set before
This is the biggest gotcha with shorthand properties. `font: 1.125rem serif` implicitly sets `font-style: normal`, `font-variant: normal`, `font-weight: normal`, `font-stretch: normal`, and `line-height: normal`. If you had previously set `font-weight: bold`, the shorthand resets it. Always list every component you care about, or use the longhand properties individually to avoid accidental resets.
System font keywords
The font shorthand also accepts special system font keywords that load the entire OS's UI font configuration — including size, weight, and family — in one declaration:
CSS
/* System font keywords — give the OS's native font settings */
font: caption; /* font of labeled controls (buttons, menus) */
font: icon; /* font of labelled icons */
font: menu; /* font for dropdown menus */
font: message-box; /* font for dialog boxes */
font: small-caption; /* font for small controls */
font: status-bar; /* font for status bars */
/* Example: use the OS's own button font */
button {
font: caption; /* matches native OS button text exactly */
}
/* Or just use system-ui for the font family and set other values yourself */
button {
font-family: system-ui, sans-serif;
font-size: 0.875rem;
font-weight: 500;
}System font keywords in font shorthand inherit the ENTIRE OS font style — size, family, weight — which can be unpredictable. Use system-ui for family-only and set other values explicitly.
The system font keywords like `caption` or `menu` are all-or-nothing: they set the size and weight too. On macOS the caption font is San Francisco at 11pt. On Windows it's Segoe UI at a specific size. You lose control over the exact size. For production use, just set `font-family: system-ui` and specify your own `font-size`, `font-weight`, etc. explicitly.
font: inherit — the reset use case
The most practical everyday use of font shorthand as a single keyword is font: inherit — which makes an element inherit all font properties from its parent. This is the correct fix for buttons and inputs that don't inherit by default:
CSS
/* Reset all font properties on form elements to inherit from parent */
button,
input,
select,
textarea {
font: inherit; /* inherits font-family, font-size, font-weight, line-height, etc. */
color: inherit; /* also inherit text color */
}
/* This is a one-liner replacement for: */
button {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
font-style: inherit;
}Combining everything — a complete typography system
CSS
/* A complete, production-ready typography baseline */
/* 1. Load the web font */
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter-Variable.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
}
/* 2. Root — respect user preference */
:root {
font-size: 100%;
}
/* 3. Body baseline */
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
color: #1a1a2e;
-webkit-font-smoothing: antialiased;
}
/* 4. Type scale */
h1 { font-size: clamp(2rem, 5vw + 1rem, 3.5rem); font-weight: 700; line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 3vw + 1rem, 2.5rem); font-weight: 700; line-height: 1.2; }
h3 { font-size: clamp(1.25rem, 2vw + 0.5rem, 2rem); font-weight: 600; line-height: 1.3; }
p { max-width: 65ch; text-wrap: pretty; }
/* 5. Form elements inherit */
button, input, select, textarea { font: inherit; color: inherit; }
/* 6. Balanced headings */
h1, h2, h3, h4 { text-wrap: balance; }Next
Everything about how CSS handles color and backgrounds — starting with the full color toolkit: [Colors in CSS](/css/colors-intro).