# System Font Stacks

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