CSS font-feature-settings and font-variation-settings Guide

CSS typography can do far more than change size and color. The font-feature-settings and font-variation-settings properties let you control advanced OpenType features and variable font axes for precise text styling.

Quick answer: Use font-feature-settings to turn specific OpenType features on or off, such as ligatures or stylistic sets. Use font-variation-settings to set low-level axes in variable fonts, such as weight, width, or slant.

Difficulty: Intermediate

Helpful to know first: You'll understand this better if you know basic CSS syntax, how font families work, and the difference between standard font properties like font-weight and font-style.

1. What Are font-feature-settings and font-variation-settings?

These two CSS properties give you access to advanced font capabilities that are not covered by everyday text styling. They are especially useful when a font includes OpenType features or when you are using a variable font.

font-feature-settings controls OpenType features such as ligatures, numeric styles, small caps, and alternates.
font-variation-settings controls variable font axes such as wght, wdth, and slnt.
Both properties depend on the font itself; if the font does not support a feature or axis, the setting has no visible effect.
They are advanced tools and often complement simpler CSS properties instead of replacing them.

In practice, these properties help designers and developers get more control over typography without switching fonts or using images.

2. Why These Properties Matter

Most websites only need basic font settings, but some projects require tighter typographic control. These properties matter when brand identity, readability, or editorial quality depends on details like proportional numbers, discretionary ligatures, or a precise font weight that sits between standard values.

They are especially useful in:

Brand systems that rely on a specific typographic look.
Editorial sites that use oldstyle figures, ligatures, or small caps.
Design systems that use variable fonts for flexible responsive typography.
Data-heavy interfaces where tabular numbers improve alignment.

These features are most valuable when you already know the font supports them and you want predictable, intentional typography.

3. Basic Syntax or Core Idea

The two properties use different kinds of values. font-feature-settings uses feature tags and an on/off value. font-variation-settings uses axis tags and numeric values.

font-feature-settings syntax

Use a four-character feature tag, followed by a numeric state. A value of 1 usually enables the feature and 0 disables it.

p {
  font-feature-settings: "liga" 1, "kern" 1;
}

This example enables standard ligatures and kerning, assuming the font supports both features.

font-variation-settings syntax

Use a four-character axis tag and a numeric value that matches the font’s available range.

h1 {
  font-variation-settings: "wght" 650, "wdth" 90;
}

This example sets a variable font to a medium-bold weight and a slightly condensed width.

Relationship to standard CSS properties

Many common font capabilities have dedicated CSS properties, such as font-weight, font-stretch, font-kerning, and font-variant-numeric. In many cases, those higher-level properties are easier to read and safer to use. The advanced properties are most useful when you need access to features that do not have a dedicated CSS property.

4. Step-by-Step Examples

Example 1: Turning on ligatures

Many fonts support standard ligatures that replace character combinations with a more polished glyph. This is common in serif fonts and some display fonts.

body {
  font-family: "Georgia", serif;
  font-feature-settings: "liga" 1;
}

This can improve the visual rhythm of text, but it only works if the font includes the ligatures you want.

Example 2: Enabling tabular numbers

Tabular numbers align digits evenly, which is useful in tables, dashboards, and pricing columns.

.price-list {
  font-variant-numeric: tabular-nums;
}

/* Equivalent low-level control */
.price-list {
  font-feature-settings: "tnum" 1;
}

The dedicated property is usually clearer, but both approaches aim to activate the same OpenType behavior when the font supports it.

Example 3: Adjusting a variable font weight

Variable fonts let you choose values between named font weights. This is useful when font-weight does not give you the exact visual result you want.

.headline {
  font-family: "Inter var", sans-serif;
  font-variation-settings: "wght" 720;
}

This sets the weight axis directly. If the font exposes the axis well, the text will appear heavier than 700 but lighter than 800.

Example 4: Combining width and slant axes

Some variable fonts support multiple axes at once. You can use them together to create compact, stylized text.

.label {
  font-family: "Recursive", sans-serif;
  font-variation-settings: "wdth" 85, "slnt" -10;
}

This can produce a condensed, slightly slanted label style. The exact effect depends on the font design.

5. Practical Use Cases

Use font-feature-settings to turn on stylistic sets in a branding headline.
Use it to enable oldstyle figures in long-form editorial text.
Use font-variation-settings to create a responsive headline that becomes slightly narrower on small screens.
Use variable font axes to fine-tune weight in a design system without loading multiple font files.
Use OpenType number features to make financial tables easier to scan.
Use advanced font control when the visual identity needs precise typographic consistency across browsers and screen sizes.

6. Common Mistakes

Mistake 1: Using the wrong property for a simple font task

Beginners often reach for the low-level properties first, even when a standard CSS property is the better fit. That can make styles harder to read and maintain.

Problem: This uses a low-level feature tag for a task that already has a dedicated property, which makes the code less clear than necessary.

.numbers {
  font-feature-settings: "tnum" 1;
}

Fix: Use the semantic property when it exists.

.numbers {
  font-variant-numeric: tabular-nums;
}

The corrected version is easier to understand and communicates intent more clearly.

Mistake 2: Expecting every font to support every feature

Not all fonts include ligatures, stylistic sets, or variable axes. If the font does not support the requested feature, the rule may have no visible effect.

Problem: The CSS is valid, but the chosen font has no "ss01" stylistic set, so nothing changes.

h2 {
  font-family: "Arial", sans-serif;
  font-feature-settings: "ss01" 1;
}

Fix: Use a font that actually exposes the feature, and confirm the feature tag is documented by the font vendor.

h2 {
  font-family: "Fraunces", serif;
  font-feature-settings: "ss01" 1;
}

The corrected version works because the font is designed to support the requested alternates.

Mistake 3: Overriding a variable font with an invalid axis value

Variable font axes have defined ranges. If you set a value outside that range, the browser may clamp it, ignore it, or render it in an unexpected way.

Problem: This asks for a weight value that may be outside the supported range of the font.

.title {
  font-family: "Inter var", sans-serif;
  font-variation-settings: "wght" 1200;
}

Fix: Stay within the font’s documented axis range, or use the standard font-weight property when possible.

.title {
  font-family: "Inter var", sans-serif;
  font-weight: 800;
}

The corrected version is safer because standard font properties are easier to reason about and usually map to the available axis range.

7. Best Practices

Prefer dedicated CSS properties first

Use a standard property when it expresses the same intention. It improves readability and helps future maintainers understand the design choice quickly.

/* Less preferred */
.body-text {
  font-feature-settings: "kern" 1;
}

/* Preferred */
.body-text {
  font-kerning: normal;
}

This approach reduces guesswork because the property name tells you what it changes.

Use variable axes for design control, not guesswork

Check the font’s documentation or design tools to discover the valid axis ranges. This makes your CSS more predictable and prevents awkward typography.

.card-title {
  font-family: "Roboto Flex", sans-serif;
  font-variation-settings: "wght" 500, "wdth" 100;
}

Using documented values helps keep the typography consistent across browsers and devices.

Keep feature use intentional and minimal

Turn on advanced features only when they improve the page. Too many special typography settings can make text look inconsistent or difficult to debug.

.editorial {
  font-feature-settings: "liga" 1, "onum" 1;
}

This is a focused example: a couple of meaningful features, not a long list of settings with unclear purpose.

8. Limitations and Edge Cases

Support depends on the font file, not just the browser. A browser can understand the property but still show no visual change if the font lacks the feature.
Some axes and feature tags are font-specific. A tag that works for one family may do nothing in another.
Browser support is generally good for these properties, but the visible result can differ because font engines handle shaping and fallback differently.
If you set font-variation-settings, it can override or interact with higher-level font properties in ways that are not always obvious. Test with the exact font files you plan to ship.
Web fonts may load after the first paint. If you are using advanced features, the page may briefly render with a fallback font before the intended typography appears.
When multiple font faces are involved, fallback fonts usually ignore the same advanced settings, so the layout may shift once the primary font loads.

For critical typography, check the rendered result in the browser, not just the CSS syntax.

9. Practical Mini Project

In this small example, you will build a product price card that uses tabular numbers and a variable font for the heading. The goal is to keep the title flexible while making the numeric layout visually stable.

.price-card {
  font-family: "Inter var", sans-serif;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 0.75rem;
  max-width: 24rem;
}

.price-card h2 {
  font-variation-settings: "wght" 700;
  margin: 0 0 0.5rem;
}

.price {
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
}

.details {
  color: #555;
}

This example shows a practical pattern: use the variable font axis for the heading weight, and use a numeric feature for price alignment. Together, they improve both style and usability.

10. Key Points

font-feature-settings controls specific OpenType features with feature tags such as "liga" and "tnum".
font-variation-settings controls variable font axes such as "wght", "wdth", and "slnt".
These properties only work when the font supports the requested features or axes.
Use dedicated font properties when they exist, because they are easier to read and maintain.
Test with the exact font files you plan to use in production.

11. Practice Exercise

Try styling a quote block with these goals:

Make the quote text use a serif font with standard ligatures enabled.
Make the author line slightly bolder using a variable font axis if available.
Make any year or numeric reference in the block use tabular numbers.

Expected result: The quote should look more editorial, the author line should feel stronger, and the numbers should align evenly.

Hint: Use font-feature-settings for ligatures if needed, font-variation-settings for the variable axis, and font-variant-numeric for the numbers.

blockquote {
  font-family: "Source Serif 4", serif;
  font-feature-settings: "liga" 1;
}

blockquote .author {
  font-family: "Inter var", sans-serif;
  font-variation-settings: "wght" 650;
}

blockquote .year {
  font-variant-numeric: tabular-nums;
}

12. Final Summary

font-feature-settings and font-variation-settings are advanced CSS tools for fine typographic control. The first targets OpenType features such as ligatures, figure styles, and alternates. The second targets variable font axes such as weight, width, and slant.

In most projects, you should start with the standard CSS font properties and move to these advanced settings only when you need more control. That approach keeps your styles readable while still giving you access to the expressive power of modern fonts.

When used carefully and tested with the actual font files in your project, these properties can improve readability, brand consistency, and design precision. If you want to go further, explore OpenType feature tags and the axis names documented by your chosen variable fonts.