Mark Vasilkov
Mark Vasilkov

Follow

Mark Vasilkov

Follow
System Font Stacks

Photo by Kristian Strand on Unsplash

System Font Stacks

Mark Vasilkov's photo
Mark Vasilkov
·Jan 17, 2023·

1 min read

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