디자인 아틀라스
EN
Aa 타이포그래피

오픈타입 기능

OpenType features

폰트 파일 안에 여러 대체 글리프 세트를 담아두고, 조건에 따라 다르게 그리는 OpenType 표준의 확장 기능. 커닝·리거처부터 스타일리스틱 세트까지 전부 이 틀 안에 있습니다.

다른 이름: OpenType Features글리프 대체 기능
···
html
<div class="stage">
  <div class="tagrow" id="tagrow"></div>
  <div class="readout" id="readout">측정 중…</div>
</div>
css
.stage{display:grid;gap:12px;justify-items:center;width:min(94%,520px)}
.tagrow{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.tag{font:11px ui-monospace,Menlo,monospace;padding:4px 8px;border-radius:6px;border:1px solid var(--line);color:var(--muted)}
.tag.on{border-color:var(--accent);color:var(--accent)}
.tag.off{border-color:var(--line);color:var(--muted);opacity:.5}
.readout{font:11px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center;line-height:1.6}
js
const probe = document.createElement('span');
probe.style.cssText = 'position:absolute;visibility:hidden;white-space:nowrap;font:16px -apple-system,system-ui,sans-serif';
probe.textContent = '0123456789 AVATAR office';
document.body.appendChild(probe);
function widthWith(setting){
  probe.style.fontFeatureSettings = setting;
  return probe.getBoundingClientRect().width;
}
const off = widthWith('"kern" 0, "liga" 0, "calt" 0');
const tags = [
  { tag: 'kern', setting: '"kern" 1, "liga" 0, "calt" 0' },
  { tag: 'liga', setting: '"kern" 0, "liga" 1, "calt" 0' },
  { tag: 'calt', setting: '"kern" 0, "liga" 0, "calt" 1' },
  { tag: 'tnum', setting: '"tnum" 1' },
];
const results = tags.map(function(t){
  const w = widthWith(t.setting);
  const base = t.tag === 'tnum' ? widthWith('"pnum" 1') : off;
  return { tag: t.tag, active: Math.abs(w - base) > 0.4 };
});
const tagrow = document.getElementById('tagrow');
const readout = document.getElementById('readout');
results.forEach(function(r){
  const el = document.createElement('span');
  el.className = 'tag ' + (r.active ? 'on' : 'off');
  el.textContent = r.tag + (r.active ? ' ✓' : ' —');
  tagrow.appendChild(el);
});
const activeCount = results.filter(function(r){ return r.active; }).length;
readout.textContent = '현재 시스템 폰트에서 폭 변화가 측정된 기능 ' + activeCount + '/' + results.length + '개 (실측, 폰트마다 다를 수 있음)';

폰트 파일은 글자 모양(글리프)만 담고 있는 게 아니라, "이 두 글자가 나란히 오면 이렇게 바꿔 그려라" 같은 규칙(GSUB·GPOS 테이블)도 함께 담을 수 있습니다. 이 규칙들이 `liga`(표준 리거처), `kern`(커닝), `calt`(문맥 대체), `tnum`(표 형식 숫자), `ss01`~`ss20`(스타일리스틱 세트) 같은 4글자 태그로 식별됩니다.

CSS는 이 태그들을 두 층위로 노출합니다. 자주 쓰는 기능은 `font-variant-ligatures`, `font-variant-numeric`, `font-variant-caps`처럼 이름이 있는 고수준 속성으로 켜고 끄고, 이름 붙은 속성이 없는 기능은 `font-feature-settings: "ss01" 1`처럼 태그를 직접 지정하는 저수준 속성을 씁니다.

결정적인 함정은, 이 기능을 켜는 CSS를 써도 **폰트가 그 태그에 대응하는 글리프·규칙을 실제로 담고 있지 않으면 아무 일도 일어나지 않는다**는 점입니다. 이 항목의 데모들은 이 사이트가 시스템 폰트만 쓴다는 제약 위에서, 켰을 때와 껐을 때 실제 렌더링 폭을 측정해 차이가 있는지 그 자리에서 확인하고 정직하게 보고합니다 — 문서만 보고 "이 폰트는 이 기능을 지원한다"고 주장하지 않습니다.

언제 쓰나

브랜드 서체를 고를 때 "이 폰트가 지원하는 OpenType 기능"을 마케팅 문구가 아니라 실제 폰트 파일(예: wakamaifondue.com 같은 검사 도구)로 확인하세요.