Skip to main content

System Font Stacks

Published 1 min readMarkdown
System Font Stacks

My preferred system font stacks are as follows:

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 nameWhy
-apple-systemApple
Segoe UIWindows
DejaVu SansLinux
system-uiGeneric font family
sans-serifCatch-all

Monospaced Fonts

Font family nameWhy
SF MonoApple
SFMono-RegularApple
ui-monospaceApple Safari
DejaVu Sans MonoBitstream Vera Sans Mono (Linux)
MenloBitstream Vera Sans Mono (Apple)
Cascadia MonoWindows
monospaceGeneric font family

No comments yet. Be the first to comment.

More from this blog