Numeric values
- Use
- Use the numeric role for counts, prices, times, and aligned values.
- Watch for
- Do not use proportional number rendering where column comparison matters.
Foundations
Typography
System font roles for readable interface text without remote font files or bundled font assets.
- Type roles
- 5
- Source
- system
- Numeric text
- tabular
body, heading, label, numeric, diagnostic
No font CDN or bundled font files.
Stable comparison for aligned values.
Usage
Use typography roles to preserve readable hierarchy and predictable rendering across local systems.
Type roles
| Role | Use | Stack | Specimen |
|---|---|---|---|
body | primary product text and work-surface copy | system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif | Interface text |
heading | section titles and hierarchy labels | system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif | Interface text |
label | form labels, metadata labels, tabs, and compact control text | system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif | Status label |
numeric | counts, prices, times, IDs, and values that need stable width | ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif | 12,480 |
diagnostic | diagnostic-only identifiers, logs, code, and implementation details in allowed contexts | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace | source.id |
Examples
-
-
Diagnostic text
- Use
- Reserve monospace for setup, debugging, auditing, integration, or source inspection screens.
- Watch for
- Do not make technical identifiers the primary product vocabulary.
Accessibility
- Respect browser text scaling and avoid viewport-based font sizing.
- Use heading roles for hierarchy, not just larger text.
- Keep diagnostic monospace secondary unless source inspection is the task.