How to use Inter stylistic sets and OpenType features in CSS & Tailwind CSS variables

Inter is one of the most widely used typefaces for user interfaces. It ships with a large OpenType feature set: ligatures, tabular numbers, stylistic sets, character variants, circled and squared characters, slashed zero, and more.

Most people load Inter, set font-family, and stop there.

This guide shows how to actually use Inter’s stylistic sets and OpenType features in CSS, with concrete recipes you can drop into a real project.

1. Loading Inter correctly (static and variable)

The easiest way to load Inter on the web is via the official CDN:

From Rasmus hoseted CDN: ( Recommended )

html

<!-- HTML in your document's <head> -->
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

Form Google Fonts:

html

<!-- Google Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
  rel="stylesheet"
/>

Then set it in CSS:

css

/* Base typography */
:root {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "liga" 1, "calt" 1; /* required for proper rendering in some browsers */
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: InterVariable, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      sans-serif;
  }
}

That gives you:

Ligatures (liga)
Contextual alternates (calt)
Variable weight axis (wght)
Optical size axis (opsz) depending on browser

From here, everything else is about enabling extra features where they actually help.

2. How OpenType features work in CSS (quick primer)

Inter exposes its features using four-letter tags:

ss01–ss08 → stylistic sets
cv01–cv13 → character variants
tnum, pnum, zero, frac, sups, subs, sinf → numeric & scientific features
calt, liga, dlig, case, etc.

In CSS you can enable them with:

css

selector {
  font-feature-settings: "ss02" 1, "tnum" 1, "zero" 1;
}

If you prefer more semantic properties (when available), you can also use:

font-variant-numeric: tabular-nums slashed-zero;
font-variant-ligatures: common-ligatures discretionary-ligatures contextual;

Many of the Inter-specific options (ss02, ss05, cv11, etc.) still require font-feature-settings.

3. Inter stylistic sets (ss01–ss08) — what they actually do

Inter ships with eight stylistic sets. Here’s the short version:

Feature	Code	What it changes	Typical use case
Alternate digits	`ss01`	Different digit shapes	Dashboards, data-heavy UIs
Disambiguation	`ss02`	Makes `I`, `l`, `1`, `0`, `O` easier to tell apart	Code, docs, terminals, APIs
Round quotes	`ss03`	Uses rounder, softer quotes and commas	Friendly UI copy, marketing text
Disambiguation (no 0)	`ss04`	Like `ss02` but keeps the default zero	When you want clarity but no slashed 0
Circled characters	`ss05`	Numbers and letters in circles	Steps, badges, ordered lists
Squared characters	`ss06`	Numbers and letters in squares	Tags, labels, “badge” style UI
Square punctuation	`ss07`	Periods, colons etc. become square-ish	Brutalist / grid-style layouts
Square quotes	`ss08`	Boxy quotation marks	Same as above, for headings and quotes

3.1. Global “clearer Inter” setup (ss02)

If your site is code-heavy, data-heavy, or just full of similar-looking characters, turn on ss02 at the root:

css

/* Make Inter more unambiguous everywhere */
:root {
  font-family: Inter, system-ui, sans-serif;
  font-feature-settings: "liga" 1, "calt" 1, "ss02" 1;
}

If you only want this in specific places (e.g. doc body, but not logo / hero):

css

.article-body {
  font-feature-settings: "liga" 1, "calt" 1, "ss02" 1;
}

3.2. Rounded vs squared “personality” (ss03, ss07, ss08)

Using Inter as your brand typeface? You can nudge the tone without switching fonts.

Rounded, softer text:

css

.rounded-copy {
  font-feature-settings: "liga" 1, "calt" 1, "ss03" 1;
}

Blocky, brutalist text:

css

.square-copy {
  font-feature-settings: "liga" 1, "calt" 1, "ss07" 1, "ss08" 1;
}

Use these for:

Section headings
Landing page hero
Pull quotes

Don’t enable them globally unless you know exactly what you’re doing—they will change quotes and punctuation everywhere.

3.3. Circled and squared characters (ss05, ss06)

Inter can generate circled / squared characters without SVGs or icon fonts.

css

.steps {
  font-feature-settings: "ss05" 1; /* circled */
}

.badges {
  font-feature-settings: "ss06" 1; /* squared */
}

Then:

html

<ol class="steps">
  <li>1 Install Inter</li>
  <li>2 Enable features</li>
  <li>3 Ship</li>
</ol>

You can use this for:

Step lists (① ② ③)
Feature badges
Minimal UI icons that still use text

4. Inter character variants (cv01–cv13) — control single characters

Stylistic sets flip groups of glyphs. Character variants (cvXX) flip specific characters.

Some useful ones:

cv01 — alternate 1
cv02 — open 4
cv03 — open 6
cv04 — open 9
cv05 — l with tail
cv06 — simplified u
cv07 — alt German ß
cv08 — uppercase I with serif
cv09 — flat-top 3
cv10 — capital G with spur
cv11 — single-story a
cv12 — compact f
cv13 — compact t

4.1. “Geometric” UI text (single-story a with cv11)

To make Inter feel more geometric, enable cv11:

css

.geometric-ui {
  font-family: "Inter", system-ui, sans-serif;
  font-feature-settings: "liga" 1, "calt" 1, "cv11" 1;
}

Use this for:

Big landing page headings
Product names
Logo-near text, where shape matters more than raw legibility

4.2. Extra disambiguation without touching everything

If you don’t want ss02 globally, you can selectively fix the worst offenders:

css

.code-heavy {
  font-family: "Inter", system-ui, sans-serif;
  font-feature-settings: "liga" 1, "calt" 1, "cv05" 1, /* l with tail */ "cv08"
      1, /* I with serif */ "zero" 1; /* slashed zero */
}

Perfect for API docs, logs, or settings screens.

5. Functional features you should actually use

Inter isn’t just alternates. It has boring but critical features for UI and data.

5.1. Tabular numbers (`tnum`)

For tables, stats, timers, and prices, use tabular numbers so digits take up the same width.

css

.price,
.metric-value,
.timer {
  font-feature-settings: "tnum" 1;
  /* or, when supported: */
  font-variant-numeric: tabular-nums;
}

Now all your:

Prices line up on the decimal
Dashboard values don’t jump when numbers change
Timers don’t jitter

5.2. Slashed zero (`zero`)

Distinguish 0 from O wherever confusion is expensive:

css

.api-key,
.license-key,
.otp-code {
  font-feature-settings: "zero" 1;
}

5.3. Fractions (`frac`)

If you work with measurements, recipes, or specs:

css

.measurements {
  font-feature-settings: "frac" 1;
}

Inter will format sequences like 1/2 or 3/4 into proper fractions when possible.

5.4. Superscript, subscript, scientific inferiors (`sups`, `subs`, `sinf`)

Useful for math, chemistry, and footnotes:

css

.superscript {
  font-feature-settings: "sups" 1;
}

.subscript {
  font-feature-settings: "subs" 1;
}

.scientific {
  font-feature-settings: "sinf" 1;
}

6. Ready-made CSS recipes with Inter

Here are some concrete drop-ins you can use.

6.1. “Readable code” preset (Inter as code font)

css

code,
pre {
  font-family: "Inter", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  font-feature-settings: "liga" 0, /* avoid unexpected ligatures in code */
      "calt" 0, "ss02" 1, /* disambiguation */ "tnum" 1,
    /* tabular numbers */ "zero" 1, /* slashed zero */ "cv05" 1,
    /* l with tail */ "cv08" 1; /* I with serif */
}

Not everyone likes proportional code fonts, but this is great for:

Inline code in docs
Log previews
Read-only code snippets in UI

6.2. “Dashboard numbers” preset

css

.metric-value {
  font-family: "Inter", system-ui, sans-serif;
  font-feature-settings: "tnum" 1, "zero" 1, "ss01" 1;
}

You get:

Consistent width numbers
Clear zeros
Alternative digits tailored for data

6.3. “Friendly UI copy” preset

css

.ui-copy-soft {
  font-family: "Inter", system-ui, sans-serif;
  font-feature-settings: "liga" 1, "calt" 1, "ss03" 1;
}

Round quotes and commas soften the look for:

Empty states
Tooltips
Onboarding text

6.4. Brutalist headings preset

css

.heading-brutalist {
  font-family: "Inter", system-ui, sans-serif;
  font-feature-settings: "ss07" 1, "ss08" 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

Use sparingly. It will dominate whatever page you put it on.

7. Using Inter features in Tailwind CSS (config-less / variable-based)

In Tailwind CSS v4 the tailwind.config.js is gone but you can use Inter’s OpenType features through CSS custom properties and Tailwind’s arbitrary values.

7.1. Define your font and features as CSS variables

For example, in your global stylesheet (or a layout file) you can define your font and features as CSS variables:

css

:root {
  /* Base UI font */
  --font-sans: "InterVariable", system-ui, sans-serif;

  /* “Clear UI” preset: disambiguation + slashed zero + tabular nums */
  --font-sans--font-feature-settings-clear: "ss02" 1, "zero" 1, "tnum" 1;
  --font-sans--font-variation-settings-clear: "opsz" 14;

  /* Display / geometric preset: single-story a + round quotes */
  --font-display: "InterVariable", system-ui, sans-serif;
  --font-display--font-feature-settings: "cv11" 1, "ss03" 1;
  --font-display--font-variation-settings: "opsz" 32;
}

Note: each feature should include the value ("cv11" 1), not just "cv11".

7.2. Use the variables with Tailwind arbitrary values

Tailwind lets you plug raw CSS values into utilities:

html

<!-- Clear, data-friendly body text -->
<main
  class="font-[var(--font-sans)]
         [font-feature-settings:var(--font-sans--font-feature-settings-clear)]
         [font-variation-settings:var(--font-sans--font-variation-settings-clear)]"
>
  ...
</main>

<!-- Geometric / display headings -->
<h1
  class="font-[var(--font-display)]
         [font-feature-settings:var(--font-display--font-feature-settings)]
         [font-variation-settings:var(--font-display--font-variation-settings)]
         text-4xl md:text-5xl"
>
  Inter with single-story a
</h1>

You can define more presets the same way:

css

:root {
  /* Dashboard numbers */
  --font-metric--font-feature-settings: "tnum" 1, "zero" 1, "ss01" 1;
}

html

<p
  class="font-[var(--font-sans)] [font-feature-settings:var(--font-metric--font-feature-settings)] text-2xl"
>
  12 345, 67
</p>

This approach gives you:

Reusable font presets controlled via CSS variables
Clear mapping between “design token” and glyph behaviour

8. Common pitfalls and gotchas

A few things that will bite you if you’re not paying attention:

Fonts must actually support the feature If you enable "ss02" 1 on a font that doesn’t support it, nothing happens. That’s fine, but don’t assume any font behaves like Inter.
Features don’t always combine the way you expect Some combinations of ssXX and cvXX can override each other. If something looks off, disable one feature at a time and re-check.
Accessibility still matters Don’t sacrifice clarity just to “look different”. Slashed zero and disambiguation (ss02) usually help; overly stylized digits or quotes can hurt readability in dense UI.
Don’t hide behaviour in global CSS if it’s important If ss02 is critical for clarity, consider scoping it to specific layers (.docs, .code, .stats) and documenting that in your design system.

One of my favourite Inter setups

This is the configuration I reach for when I want Inter to stop looking like a safe UI default and start behaving like a custom typeface. It swaps out punctuation, reshapes letters, tweaks numbers, and adds just enough personality without compromising legibility.

css

:root {
  font-family: InterVariable, sans-serif;
  font-feature-settings: "liga" 1, "calt" 1,
    /* Contextual alternates */ "dlig" 1, /* Discretionary ligatures */
      /* Style shifts */ "ss07" 1, /* Square punctuation */ "ss08" 1, /* Square quotes */
      /* Letter alternates */ "cv06" 1, /* Simplified u */ "cv10" 1, /* Capital G with spur */
      "cv11" 1, /* Single-story a */ "cv12" 1, /* Compact f */ "cv13" 1,
    /* Compact t */ /* Numeric system */ "tnum" 1, /* Tabular numbers */ "zero"
      1, /* Slashed zero */ "cv01" 1, /* Alternate one */ "cv09" 1,
    /* Flat-top three */ "cv02" 1, /* Open four */ "cv03" 1,
    /* Open six */ "cv04" 1; /* Open nine */
}

For Tailwind CSS

css

:root {
  --font-inter-custom: "InterVariable", sans-serif;

  --font-inter-custom--font-feature-settings: "liga" 1, "calt" 1, "dlig" 1, /* Style shifts */
      "ss07" 1, "ss08" 1, /* Letter alternates */ "cv06" 1, "cv10" 1, "cv11" 1,
    "cv12" 1, "cv13" 1, /* Numeric system */ "tnum" 1, "zero" 1, "cv01" 1, "cv09"
      1, "cv02" 1, "cv03" 1, "cv04" 1;

  /* Optional: display optical size */
  --font-inter-custom--font-variation-settings: "opsz" 32;
}

9. Summary

Inter is more than a default UI font. It ships with a full set of OpenType features, stylistic sets, and character variants that you can control with CSS.

To recap:

Use font-feature-settings to enable stylistic sets (ss01–ss08) and character variants (cv01–cv13).
Turn on ss02 and zero where character clarity is key.
Use tnum for any numeric UI that should line up.
Add personality with ss03, ss07, ss08, and cv11 in headings and brand text.
With Tailwind’s config-less setup, drive features via CSS variables and Tailwind’s arbitrary values.

Once you understand which features do what, Inter stops being “the default UI font” and becomes a toolbox you tune per component.

/Michael Andreuzza

Black Weeks . Full Access for 50% OFF. Use code lex50 at checkout.

How to use Inter stylistic sets and OpenType features in CSS & Tailwind CSS variables

1. Loading Inter correctly (static and variable)

2. How OpenType features work in CSS (quick primer)

3. Inter stylistic sets (ss01–ss08) — what they actually do

3.1. Global “clearer Inter” setup (ss02)

3.2. Rounded vs squared “personality” (ss03, ss07, ss08)

3.3. Circled and squared characters (ss05, ss06)

4. Inter character variants (cv01–cv13) — control single characters

4.1. “Geometric” UI text (single-story a with cv11)

4.2. Extra disambiguation without touching everything

5. Functional features you should actually use

5.1. Tabular numbers (tnum)

5.2. Slashed zero (zero)

5.3. Fractions (frac)

5.4. Superscript, subscript, scientific inferiors (sups, subs, sinf)

6. Ready-made CSS recipes with Inter

6.1. “Readable code” preset (Inter as code font)

6.2. “Dashboard numbers” preset

6.3. “Friendly UI copy” preset

6.4. Brutalist headings preset

7. Using Inter features in Tailwind CSS (config-less / variable-based)

7.1. Define your font and features as CSS variables

7.2. Use the variables with Tailwind arbitrary values

8. Common pitfalls and gotchas

One of my favourite Inter setups

9. Summary

5.1. Tabular numbers (`tnum`)

5.2. Slashed zero (`zero`)

5.3. Fractions (`frac`)

5.4. Superscript, subscript, scientific inferiors (`sups`, `subs`, `sinf`)