Design Atlas
한국어
Aa Typography

Stylistic sets

스타일리스틱 세트

Alternate glyph designs a type designer pre-draws for the same letters — selected via `font-variant-alternates: styleset()` or the `ss01`–`ss20` tags.

Also known as: ss01Stylistic Alternates
···
html
<div class="stage">
  <span class="word" id="w">Adobe agile</span>
  <div class="readout" id="readout">측정 중…</div>
</div>
css
.word{font:800 9vmin/1.2 -apple-system,system-ui,"Segoe UI",sans-serif;color:var(--fg);display:block;text-align:center}
.readout{margin-top:14px;font:11px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center;max-width:280px}
js
const w = document.getElementById('w');
const readout = document.getElementById('readout');
const offWidth = (function(){ w.style.fontFeatureSettings = '"ss01" 0'; return w.getBoundingClientRect().width; })();
let on = false;
let measured = false;
function apply(){
  on = !on;
  w.style.fontFeatureSettings = on ? '"ss01" 1' : '"ss01" 0';
  if (!measured){
    measured = true;
    setTimeout(function(){
      const onWidth = w.getBoundingClientRect().width;
      readout.textContent = Math.abs(onWidth - offWidth) > 0.4
        ? '실측: ss01 켰을 때 폭이 달라짐 — 이 폰트에 스타일리스틱 세트가 정의돼 있음'
        : '실측: ss01 켜도 폭 동일 — 이 시스템 폰트엔 스타일리스틱 세트가 없어 보임';
    }, 50);
  }
}
apply();
setInterval(apply, 1600);

A font can ship two forms of the same letter — say, lowercase "a" as a double-story shape and as a simpler single-story circle — and let a developer pick which one to use. When a project wants a specific letterform (a logotype detail, say) but commissioning a whole new font is overkill, picking a font that already ships a stylistic set for it is a lighter path.

In CSS, `font-feature-settings: "ss01" 1` turns the tag on directly; `@font-feature-values` can name a set so `font-variant-alternates: styleset(yourName)` reads more clearly — at the cost of one extra setup step.

Stylistic set numbers and what they actually change differ per font — one font's `ss01` may change something completely different from another's. Whether this site's system fonts define any stylistic sets at all is something only measurement can answer, not documentation, so the demo actually toggles the tag and measures whether width changes.

When to use

If a brand typeface offers an alternate letterform as a stylistic set, turn it on selectively where that specific shape matters — logos, headlines — not sitewide.