taskylizard/disambiguation-design

Disambiguation in Technical Interfaces

Based on Brett Jones's article

Before reaching for a monospace typeface to improve clarity of non-lexical strings (commit SHAs, UUIDs, deploy IDs), check if your base typeface has disambiguation character alternatives via OpenType feature tags. This avoids optical imbalance while maintaining legibility.

---

The Problem

Technical interfaces often use monospace for non-lexical strings to disambiguate characters like i l I o O 0. Monospace works, but has drawbacks:

1. Width scaling — content width scales linearly per character vs proportional sans-serif
2. Optical clash — the greater the ratio of mono text, the more it clashes with surrounding sans-serif

The Solution: OpenType Feature Settings

Many typefaces include alternative character sets activated via font-feature-settings. These blend disambiguation into the base typeface without switching to monospace.

Key CSS Property

.font-precise {
  font-feature-settings: 'ss02' 1;
}

Common OpenType Tags (Inter)

| Property | Definition | | --- | --- | | ss02 | Disambiguation set | | cv05 | Lower-case L with tail | | cv08 | Upper-case I with serif | | zero | Slashed zero |

---

Implementation Patterns

Global — Regular CSS

body {
  font-feature-settings: 'ss02' 1;
}

Global — Tailwind 4

@theme {
  --font-sans: Inter, 'sans-serif';
  --font-sans--font-feature-settings: 'ss02' 1;
}

Utility Class — Regular CSS

@layer utilities {
  .font-precise {
    font-feature-settings: 'ss02' 1;
  }
}

Utility Class — Tailwind 4

@utility font-precise {
  font-feature-settings: 'ss02' 1;
}

---

When to Use Each Approach

| Style | Pros | Cons | | --- | --- | --- | | System font | Proportional scaling, optimized for UI/prose | Some characters hard to distinguish | | Monospace | Clear character distinction, column alignment | Line length scales per char, disproportional next to sans-serif | | Disambiguation alternatives | Optimized for UI/prose, improved precision | Larger font bundle, unsuitable for multi-line column alignment |

Decision Guide

1. Multi-line code blocks where column alignment matters → Monospace
2. Single-line technical strings (IDs, SHAs, UUIDs) in a sans-serif UI → Disambiguation alternatives
3. Highly technical product where most content is technical → Global disambiguation
4. Mixed content with selective technical strings → Utility class approach

Applying This Skill

When reviewing or building a technical interface:

1. Identify non-lexical strings rendered in monospace
2. Check if the project's typeface supports disambiguation alternatives (e.g., Inter's ss02)
3. If supported, suggest replacing monospace with font-feature-settings for single-line contexts
4. Keep monospace for multi-line code blocks requiring alignment
5. For full reference, see references/article.md