Fonts & Typography: Opinion

General Discussion
1

I’m thinking of changing the font family:

font-family: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, ui-sans-serif, sans-serif;

  • with -

font-family: system-ui, ui-sans-serif, sans-serif;

The reason is that this stack maps to the native OS UI font automatically:

  • macOS / iOS → San Francisco
  • Windows → Segoe UI Variable (Windows 11)
  • Android → Roboto
  • Ubuntu → Ubuntu
  • Linux (GNOME/KDE) → distro default UI font

Reference: https://modernfontstacks.com/

Benefits:

  • Less CSS
  • Faster font resolution
  • Better alignment with modern OS typography
  • Supports variable system fonts automatically
  • Fully supported by all modern browsers since 2022+

I would also remove this:

-webkit-font-smoothing: subpixel-antialiased;

Subpixel antialiasing is no longer used on modern systems:

  • macOS: Removed subpixel antialiasing entirely in Mojave (2018)
  • Windows 11: Uses DirectWrite with grayscale antialiasing
  • Linux: Mostly grayscale now
  • Retina / HiDPI displays: subpixel rendering is irrelevant

So this value does nothing useful anymore on modern devices.

The CSS Fonts Level 4 spec defines system-ui and ui-sans-serif as official generic families:

I tested it on Windows 10, Windows 11, MacOS (2 different versions from 2 different friends, not sure which version), Android and iPhone/iOS, and I have seen no visible change.

If you agree, I can create a PR.

1 Like
2

This sounds like a good idea to me.

1 Like