UI fonts
The ui-serif, ui-sans-serif, ui-monospace and ui-rounded values for the font-family CSS property use device-default user interface fonts for text. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The ui-serif, ui-sans-serif, ui-monospace and ui-rounded values for the font-family CSS property use device-default user interface fonts for text. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.font-family.ui-monospace | | | | 13.1 | | 13.4 |
| CSS property | ||||||
ui-rounded | | | | 13.1 | | 13.4 |
ui-sans-serif | | | | 13.1 | | 13.4 |
ui-serif | | | | 13.1 | | 13.4 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.serif-ui { font-family: ui-serif, serif; }
.mono-ui { font-family: ui-monospace, monospace; }
.friendly { font-family: ui-rounded, system-ui; }Live demo
Use cases
Refine text rhythm
Use UI fonts to make long-form reading or dense interface copy easier to scan and understand.
Support language nuances
Apply UI fonts when different writing systems or typographic conventions need more deliberate control.
Cautions
- Test UI fonts in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Check readability with zoom, narrow screens, and mixed-language content so text remains understandable.
Related links
Powered by web-features