UI Monospace Font Stack (ui-monospace)

The ui-monospace Approach

CSS introduced the ui-monospace generic keyword to let browsers select the platform's preferred monospace font without you having to list every option explicitly.

The Declaration

font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono",
  Menlo, Monaco, Consolas, monospace;

How ui-monospace Works

Platform	Resolved Font
macOS / iOS	SF Mono
Windows 11	Cascadia Mono
Windows 10	Consolas
Android	Droid Sans Mono
Linux	Varies (often DejaVu Sans Mono)

Browser Support

ui-monospace is supported in:

• Safari 13.1+ (macOS / iOS)
• Chrome 87+
• Firefox 89+
• Edge 87+

For older browsers, the fallback fonts after ui-monospace take over.

Cascadia Mono vs Cascadia Code

Cascadia Code includes programming ligatures, while Cascadia Mono does not. If you want a clean, no-ligature monospace experience for UI elements (inline code badges, terminal prompts), use Cascadia Mono. For code editors where ligatures are welcome, use Cascadia Code instead.

When to Use ui-monospace vs a Custom Stack

Use ui-monospace when you want each platform to look native and you don't need specific font features (like ligatures from Fira Code). Use a custom stack when you need consistent cross-platform appearance or ligature support from a particular font.

Tailwind CSS Integration

Tailwind's default font-mono utility uses a similar stack:

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}