CSS font-variant-ligatures: keep identifiers visually literal

When to use it

A fraud review screen displays transaction IDs and short diagnostic fragments. Operators compare those strings against printed records, so avoid a font turning an adjacent character pair into a single ornamental form. Apply none only to the identifier and code surfaces, not to every paragraph on the site. A monospaced fallback keeps spacing predictable when the preferred face is unavailable. Test IDs with pairs such as fi and fl, mixed letters and digits, copied text, high zoom, and a fallback font. A visual transcription check still needs grouping, adequate size, and a way to copy the exact value. Do not substitute typographic styling for a checksum or a machine comparison. A screen reader reads the source text, not the ligature glyph; the underlying identifier should remain a plain text node and not be recreated by pseudo-elements. When an identifier is long, allow a controlled wrap instead of clipping the final characters.

.transaction-id, .diagnostic-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-ligatures: none; overflow-wrap: anywhere; }
.case-note { font-variant-ligatures: normal; }

Cost and verification

The rendering cost is negligible. Restricting the rule reduces maintenance work because prose can retain the font's intended shaping. Test the actual font files: a face without ligatures will show no visual difference, while a decorative coding font may change several pairs. Disabling all ligatures across a script that needs contextual shaping can damage readability; keep the selector narrow. The copied bytes are unchanged, so this CSS cannot detect a homoglyph, verify a transaction, or fix bad source data. Use semantic labels and exact machine values for audit workflows, with CSS only improving human inspection.

Common Mistakes

• Do not disable ligatures globally on multilingual prose.
• Do not confuse a visual join with a changed identifier value.
• Do not let a long ID disappear behind overflow clipping.

Connected lessons

• CSS Property Decisions
• CSS font shorthand and fallback stack: keep type stable during loading
• CSS readable type: set measure and rhythm before decorative details
• CSS tab-size: render source indentation without rewriting code
• HTML pre and code: preserve source layout without hiding the meaning