Complete Guide to CSS Font Properties
CSS font properties go far beyond picking a typeface and a size. Modern CSS gives you granular control over rendering, variable axes, and OpenType features that most developers never fully leverage. This guide covers every font property you need for production-grade typography, with real syntax patterns and practical advice.
font-family: Syntax, Font Stacks & Generic Families
The font-family property accepts a comma-separated list where the browser tries each font in order until one is available. Always quote family names that contain spaces or digits, such as 'Inter Tight' or 'Fira Code', but never quote generic families like sans-serif, serif, monospace, system-ui, or ui-rounded. A robust font stack looks like font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif — this covers Windows, macOS, Android, and falls back gracefully. The system-ui keyword resolves to the platform's default UI font, which is San Francisco on macOS and Segoe UI on Windows, making it an excellent zero-download starting point. For variable fonts loaded via @font-face, the family name you assign in the src descriptor is what you reference in font-family, so keep those names short and consistent across weights.
font-size: Units — px, em, rem, vw & clamp()
Pixels (px) give you predictable sizing but ignore user preferences set in browser settings. Using rem units (relative to the root html element, typically 16px by default) respects those preferences and simplifies responsive scaling — set html { font-size: 100% } and work in rem throughout. The em unit is relative to the parent element's computed font-size, which causes compounding when nested (a 0.875em inside another 0.875em becomes roughly 12.25px), so reserve em for component-internal spacing rather than body text. Viewport units like vw create fluid type but need guardrails: font-size: clamp(1rem, 0.5rem + 1.5vw, 2.25rem) sets a minimum of 16px, scales fluidly, and caps at 36px without a single media query. This clamp() pattern has replaced most responsive font-size breakpoints in modern CSS and is supported in all evergreen browsers.
font-weight: Numeric Values, Named Values & Variable Axes
The font-weight property accepts keywords (normal maps to 400, bold to 700) or numeric values from 1 to 1000, though the traditional 100–900 scale in increments of 100 is most common. For static font files, the browser picks the closest available weight: if you request 600 but only have 400 and 700 loaded, it rounds up to 700. Variable fonts change this entirely — a single file can contain a continuous weight axis (wght) and you can set any value, such as font-weight: 450 or font-weight: 625, for precise typographic control. When using @font-face with a variable font, declare the weight range with font-weight: 100 900 to tell the browser the full axis is available. The bolder and lighter keywords compute relative to the parent's weight using a defined algorithm (e.g., if the parent is 400, bolder resolves to 700), which is rarely what you want — prefer explicit numeric values for predictability.
font-style: Normal, Italic & Oblique
The font-style property takes three values: normal, italic, and oblique. Italic and oblique are not the same — italic loads a separately designed italic face with distinct letterforms (the lowercase a often changes shape), while oblique applies a slant to the normal glyphs. You can specify the slant angle with oblique followed by a degree value, such as font-style: oblique 12deg, which defaults to 14deg if no angle is given. Variable fonts with an ital axis (binary, 0 or 1) or a slnt axis (continuous angle) give you finer control; declare font-style: italic oblique -12deg 0deg in your @font-face rule to expose the full range. In practice, always load the italic variant of your chosen typeface rather than relying on oblique — browser-synthesized slants look noticeably worse, especially at body text sizes where glyph design matters most.
The font Shorthand Property
The font shorthand lets you set font-style, font-variant, font-weight, font-size, line-height, and font-family in a single declaration. The required values are font-size and font-family; everything else is optional but must appear in a specific order: font: italic small-caps 700 1.125rem/1.6 'Source Sans 3', sans-serif. The slash syntax sets line-height immediately after font-size — omitting it resets line-height to normal (roughly 1.2), which often catches people off guard. Any omitted optional property resets to its initial value, so writing font: 1rem sans-serif will reset font-weight to normal and font-style to normal even if they were set earlier in the cascade. Because of this aggressive reset behavior, many teams avoid the shorthand in component-based architectures and prefer the individual longhand properties for clarity and composability.
Advanced Properties: font-variant, font-feature-settings & font-optical-sizing
The font-variant property (and its longhands like font-variant-numeric, font-variant-ligatures, font-variant-caps) provides a high-level API into OpenType features. For example, font-variant-numeric: tabular-nums lining-nums gives you fixed-width numerals that align perfectly in tables and dashboards — essential for any data-heavy UI. The lower-level font-feature-settings property lets you toggle specific OpenType tags directly, such as font-feature-settings: 'ss01' 1, 'calt' 1 to enable stylistic set 1 and contextual alternates; prefer font-variant when a mapping exists because it cascades more predictably. The font-optical-sizing property (auto by default) activates the opsz axis in variable fonts, which adjusts stroke contrast and spacing at different sizes — text at 12px gets slightly thicker strokes and wider spacing than the same face at 48px. Finally, font-feature-settings: 'kern' 1 is unnecessary in modern browsers since kerning is on by default via font-kerning: auto, but you may need to explicitly set font-kerning: none on elements where letter-spacing is already handling glyph spacing.
Try Font Finder Now
The fastest way to identify fonts on any website. Install the free Chrome extension and start inspecting typography in one click.