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

문맥 대체 글자

Contextual alternates

앞뒤에 어떤 글자가 오는지에 따라 같은 글자를 다른 모양으로 바꿔 그리는 기능. 고정된 두 글자 쌍만 보는 리거처보다 조건이 더 유연합니다.

다른 이름: caltContextual forms
···
html
<div class="stage">
  <span class="word" id="w">William Willow</span>
  <div class="readout" id="readout">측정 중…</div>
</div>
css
.word{font:700 7.5vmin/1.3 Georgia,'Times New Roman',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.fontVariantLigatures = 'no-contextual'; return w.getBoundingClientRect().width; })();
let on = false;
let measured = false;
function apply(){
  on = !on;
  w.style.fontVariantLigatures = on ? 'contextual' : 'no-contextual';
  if (!measured){
    measured = true;
    setTimeout(function(){
      const onWidth = w.getBoundingClientRect().width;
      readout.textContent = Math.abs(onWidth - offWidth) > 0.4
        ? '실측: contextual 켰을 때 폭이 달라짐 — 이 폰트에 calt 규칙이 있음'
        : '실측: 폭 동일 — 이 시스템 폰트엔 이 테스트 문구로 감지되는 calt 규칙이 없어 보임';
    }, 50);
  }
}
apply();
setInterval(apply, 1600);

리거처(`liga`)가 "fi가 나란히 오면 항상 이 모양으로"처럼 고정된 글자 쌍을 보는 규칙이라면, 문맥 대체(`calt`)는 더 폭넓은 조건을 볼 수 있습니다. 필기체·스크립트 서체에서 같은 글자가 앞 글자와 자연스럽게 이어지도록 연결부 모양을 바꾸거나, 같은 모양의 글자가 연달아 나올 때 단조로워 보이지 않도록 살짝 다른 대안으로 바꾸는 식입니다.

아랍 문자처럼 글자가 단어 안 위치(어두·어중·어말)에 따라 완전히 다른 모양으로 이어 써야 하는 문자 체계에서는 `calt`가 장식이 아니라 필수 렌더링 기능입니다. 라틴 문자에서는 대개 은근한 다듬기 수준이라 켜져 있어도 잘 알아채지 못합니다.

CSS `font-variant-ligatures`의 `contextual` 키워드가 이 기능을 제어하며, 대부분 브라우저에서 기본값이 켜짐입니다(`no-contextual`로 끌 수 있습니다). 데모는 이 값을 켜고 끄면서 시스템 폰트에서 실제로 렌더링 폭이 달라지는지 측정합니다 — 라틴 산세리프 시스템 폰트는 `calt` 규칙이 거의 없어 차이가 안 보일 수 있는데, 그 경우도 화면에 정직하게 표시합니다.

언제 쓰나

기본값(on)을 그대로 두면 됩니다. 아랍 문자 등 위치별 글자 모양이 필수인 문자 체계를 다룰 때만 이 기능의 존재를 의식하세요.