Typography
Fonts
All text in Sitecore products uses a system font stack, a common practice in modern digital products. This means the font is inherited from the operating system of the user.
We use the following font-families:
| Token | Value |
|---|---|
heading | -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" |
body | -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" |
mono | SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace |
Font weights
| Token | Value | Example |
|---|---|---|
normal | 400 | Normal text |
medium | 500 | Medium text |
semibold | 600 | Semibold text |
Font sizes
| Token | Value | PX | Example |
|---|---|---|---|
3xs | 0.625rem | 10px | Text size 3xs |
2xs | 0.6875rem | 11px | Text size 2xs |
xs | 0.75rem | 12px | Text size xs |
sm | 0.8125rem | 13px | Text size sm |
md | 0.875rem | 14px | Text size md |
lg | 1rem | 16px | Text size lg |
xl | 1.125rem | 18px | Text size xl |
2xl | 1.25rem | 20px | Text size 2xl |
3xl | 1.5rem | 24px | Text size 3xl |
4xl | 1.875rem | 30px | Text size 4xl |
5xl | 2.25rem | 36px | Text size 5xl |
6xl | 3rem | 48px | Text size 6xl |
7xl | 3.75rem | 60px | Text size 7xl |
8xl | 4.5rem | 72px | Text size 8xl |
9xl | 6rem | 96px | Text size 9xl |