<p>My preferred system font stacks are as follows:</p>
<pre><code class="lang-css"><span class="hljs-selector-tag">html</span>, <span class="hljs-selector-tag">button</span>, <span class="hljs-selector-tag">input</span> {
  <span class="hljs-attribute">font-family</span>: -apple-system, <span class="hljs-string">'Segoe UI'</span>, <span class="hljs-string">'DejaVu Sans'</span>,
    system-ui, sans-serif;
}

<span class="hljs-selector-tag">code</span>, <span class="hljs-selector-tag">kbd</span>, <span class="hljs-selector-tag">pre</span>, <span class="hljs-selector-tag">samp</span> {
  <span class="hljs-attribute">font-family</span>: <span class="hljs-string">'SF Mono'</span>, SFMono-Regular, ui-monospace,
    <span class="hljs-string">'DejaVu Sans Mono'</span>, Menlo, <span class="hljs-string">'Cascadia Mono'</span>, monospace;
}
</code></pre>
<p>(The CSS selectors are provisionary.)</p>
<h2 id="heading-system-fonts">System Fonts</h2>
<div class="hn-table">
<table>
<thead>
<tr>
<td>Font family name</td><td>Why</td></tr>
</thead>
<tbody>
<tr>
<td><code>-apple-system</code></td><td>Apple</td></tr>
<tr>
<td><code>Segoe UI</code></td><td>Windows</td></tr>
<tr>
<td><code>DejaVu Sans</code></td><td>Linux</td></tr>
<tr>
<td><code>system-ui</code></td><td>Generic font family</td></tr>
<tr>
<td><code>sans-serif</code></td><td>Catch-all</td></tr>
</tbody>
</table>
</div><h2 id="heading-monospaced-fonts">Monospaced Fonts</h2>
<div class="hn-table">
<table>
<thead>
<tr>
<td>Font family name</td><td>Why</td></tr>
</thead>
<tbody>
<tr>
<td><code>SF Mono</code></td><td>Apple</td></tr>
<tr>
<td><code>SFMono-Regular</code></td><td>Apple</td></tr>
<tr>
<td><code>ui-monospace</code></td><td>Apple <a target="_blank" href="https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/">Safari</a></td></tr>
<tr>
<td><code>DejaVu Sans Mono</code></td><td>Bitstream Vera Sans Mono (Linux)</td></tr>
<tr>
<td><code>Menlo</code></td><td>Bitstream Vera Sans Mono (Apple)</td></tr>
<tr>
<td><code>Cascadia Mono</code></td><td><a target="_blank" href="https://learn.microsoft.com/en-us/typography/fonts/windows_11_font_list">Windows</a></td></tr>
<tr>
<td><code>monospace</code></td><td>Generic font family</td></tr>
</tbody>
</table>
</div>

My preferred system font stacks are as follows:

```css
html, button, input {
  font-family: -apple-system, 'Segoe UI', 'DejaVu Sans',
    system-ui, sans-serif;
}

code, kbd, pre, samp {
  font-family: 'SF Mono', SFMono-Regular, ui-monospace,
    'DejaVu Sans Mono', Menlo, 'Cascadia Mono', monospace;
}
```

(The CSS selectors are provisionary.)

## System Fonts

| Font family name | Why
| --- | ---
| `-apple-system` | Apple
| `Segoe UI` | Windows
| `DejaVu Sans` | Linux
| `system-ui` | Generic font family
| `sans-serif` | Catch-all

## Monospaced Fonts

| Font family name | Why
| --- | ---
| `SF Mono` | Apple
| `SFMono-Regular` | Apple
| `ui-monospace` | Apple [Safari][1]
| `DejaVu Sans Mono` | Bitstream Vera Sans Mono (Linux)
| `Menlo` | Bitstream Vera Sans Mono (Apple)
| `Cascadia Mono` | [Windows][2]
| `monospace` | Generic font family

[1]: https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/
[2]: https://learn.microsoft.com/en-us/typography/fonts/windows_11_font_list

Mark Vasilkov

Mark Vasilkov

System Font Stacks

System Fonts

Monospaced Fonts

Font family name	Why
`-apple-system`	Apple
`Segoe UI`	Windows
`DejaVu Sans`	Linux
`system-ui`	Generic font family
`sans-serif`	Catch-all

Font family name	Why
`SF Mono`	Apple
`SFMono-Regular`	Apple
`ui-monospace`	Apple Safari
`DejaVu Sans Mono`	Bitstream Vera Sans Mono (Linux)
`Menlo`	Bitstream Vera Sans Mono (Apple)
`Cascadia Mono`	Windows
`monospace`	Generic font family