How to set ligature css conventions for your design system
- Step 1Body type (default on) — body { font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1; } — modern OpenType defaults. Standard ligatures on, contextual alternates on, kerning on.
- Step 2Code blocks (off) — code, pre { font-feature-settings: 'liga' 0, 'calt' 0; } — disable ligatures so each character maps 1:1 to its glyph. Critical for code accuracy.
- Step 3Display headlines (with dlig) — h1, h2 { font-feature-settings: 'liga' 1, 'calt' 1, 'dlig' 1, 'swsh' 1; } — enable discretionary ligatures and swashes if your display font has them. Adds editorial polish.
Frequently asked questions
Should I use font-variant-ligatures or font-feature-settings?+
font-variant-ligatures is the high-level alias and slightly cleaner. font-feature-settings is the low-level escape hatch with 99% support. For design systems, prefer font-variant-ligatures and add font-feature-settings only when you need finer control.
What about font-feature-settings: normal?+
Resets to the font's default features. Useful for opting back into defaults after disabling them in a parent. font-feature-settings: 'liga' 1; only sets liga, leaving everything else inherited; font-feature-settings: normal; resets all.
Are font-feature-settings inherited?+
Yes — children inherit parent's font-feature-settings unless they set their own. This is why disabling liga in code blocks works cleanly even if the parent has liga on.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.