Design Atlas
한국어
Aa Typography

Ligature

리거처

Drawing two letters that would otherwise collide — fi, fl — as a single merged glyph.

Also known as: 합자
···
html
<div class="stage">
  <div class="frame">
    <span class="word" id="w">waffle office</span>
  </div>
  <div class="readout"><span id="mode">font-variant-ligatures: common-ligatures</span></div>
</div>
css
.frame{position:relative}
.word{font-size:9vmin;line-height:1.3;font-family:Georgia,'Times New Roman',serif;color:var(--fg)}
.readout{margin-top:16px;font:11px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center}
#mode{color:var(--accent)}
js
const w = document.getElementById('w');
const mode = document.getElementById('mode');
let on = true;
function apply(){
  w.style.fontVariantLigatures = on ? 'common-ligatures' : 'none';
  mode.textContent = 'font-variant-ligatures: ' + (on ? 'common-ligatures' : 'none');
  on = !on;
}
apply();
setInterval(apply, 1700);

When f's upper hook meets i's dot, they collide or overlap awkwardly. A ligature redraws the two as one glyph so they connect cleanly. Metal type foundries once cast dedicated fi, fl, ffi, ffl sorts — it was standard practice, not an afterthought.

In CSS, `font-variant-ligatures: common-ligatures` is actually the default in most browsers. It only shows visibly if the font ships that ligature glyph — a system serif like Georgia may or may not, depending on OS and version. For a dedicated body-text webfont, check its actual OpenType ligature support rather than assuming.

Some code fonts also draw "programming ligatures" that merge `!=` or `=>` into a single symbol — a cosmetic aid to scanning, not a real letter-collision fix.

When to use

Leave the default (on) alone. Turn it off only when you need exact manual control over letterforms, like in a logotype.