Fontsource — Professional Typography & Font Architecture
Fontsource enables self-hosted, performance-optimized, open-source fonts. It replaces unreliable third-party font CDNs with predictable, version-locked local packages.
1. Top-Tier Recommended Font Pairings
| Interface Context |
Primary Sans (UI & Text) |
Monospace (Data & Code) |
Chinese Fallback |
| Software Dashboard & SaaS |
Inter or Geist Sans |
JetBrains Mono |
Source Han Sans CN / PingFang SC |
| High-End Modern Web |
Plus Jakarta Sans |
Fira Code |
MiSans / Noto Sans CJK SC |
| Technical / Scientific Console |
Roboto or IBM Plex Sans |
IBM Plex Mono |
Microsoft YaHei UI |
2. Standard CSS Typography Hierarchy
:root {
/* Font Family Definitions */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans SC', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
/* Strict Type Scale */
--text-xs: 0.75rem; /* 12px - Timestamps, badges, secondary captions */
--text-sm: 0.875rem; /* 14px - Body text, table rows, button text */
--text-base: 1.0rem; /* 16px - Primary paragraph text, input fields */
--text-lg: 1.125rem; /* 18px - Card headings, modal titles */
--text-xl: 1.25rem; /* 20px - Subsection headers */
--text-2xl: 1.5rem; /* 24px - Section headers */
--text-3xl: 1.875rem; /* 30px - Page titles, major KPI metrics */
}
body {
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code, kbd, samp, pre {
font-family: var(--font-mono);
font-feature-settings: "calt" 1; /* Enable programming ligatures */
}
3. Typography Rules for Software Interfaces
- Tabular Numerals (
font-variant-numeric: tabular-nums):
- Always activate tabular numbers on tables, telemetry counters, and financial/engineering readings so numbers maintain strictly equal character widths.
- Line Height Discipline:
- Body copy:
1.5–1.6 for optimal readability.
- Dense tables & menus:
1.2–1.3 to maintain compact information density.
- Large numeric KPI metrics:
1.0–1.1 to prevent excessive vertical whitespace gaps.
1---2name: fontsource3description: Open-source typography and self-hosted web fonts management using Fontsource (fontsource/fontsource). Provides professional typography pairing, font loading strategies, and readable scales for high-density interfaces.4---56# Fontsource — Professional Typography & Font Architecture78Fontsource enables self-hosted, performance-optimized, open-source fonts. It replaces unreliable third-party font CDNs with predictable, version-locked local packages.910---1112## 1. Top-Tier Recommended Font Pairings1314| Interface Context | Primary Sans (UI & Text) | Monospace (Data & Code) | Chinese Fallback |15|---|---|---|---|16| **Software Dashboard & SaaS** | *Inter* or *Geist Sans* | *JetBrains Mono* | *Source Han Sans CN / PingFang SC* |17| **High-End Modern Web** | *Plus Jakarta Sans* | *Fira Code* | *MiSans / Noto Sans CJK SC* |18| **Technical / Scientific Console** | *Roboto* or *IBM Plex Sans* | *IBM Plex Mono* | *Microsoft YaHei UI* |1920---2122## 2. Standard CSS Typography Hierarchy2324```css25:root {26 /* Font Family Definitions */27 --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans SC', sans-serif;28 --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;2930 /* Strict Type Scale */31 --text-xs: 0.75rem; /* 12px - Timestamps, badges, secondary captions */32 --text-sm: 0.875rem; /* 14px - Body text, table rows, button text */33 --text-base: 1.0rem; /* 16px - Primary paragraph text, input fields */34 --text-lg: 1.125rem; /* 18px - Card headings, modal titles */35 --text-xl: 1.25rem; /* 20px - Subsection headers */36 --text-2xl: 1.5rem; /* 24px - Section headers */37 --text-3xl: 1.875rem; /* 30px - Page titles, major KPI metrics */38}3940body {41 font-family: var(--font-sans);42 font-size: var(--text-base);43 line-height: 1.5;44 -webkit-font-smoothing: antialiased;45 -moz-osx-font-smoothing: grayscale;46}4748code, kbd, samp, pre {49 font-family: var(--font-mono);50 font-feature-settings: "calt" 1; /* Enable programming ligatures */51}52```5354---5556## 3. Typography Rules for Software Interfaces57581. **Tabular Numerals (`font-variant-numeric: tabular-nums`)**:59 - Always activate tabular numbers on tables, telemetry counters, and financial/engineering readings so numbers maintain strictly equal character widths.602. **Line Height Discipline**:61 - Body copy: `1.5–1.6` for optimal readability.62 - Dense tables & menus: `1.2–1.3` to maintain compact information density.63 - Large numeric KPI metrics: `1.0–1.1` to prevent excessive vertical whitespace gaps.
Marvin-LiJunZan