System font deep dive

An interesting article about CSS keywords like system-ui, ui-monospace, ui-rounded, ui-sans-serif and ui-serif.

They are variables for the default system fonts so you avoid having to write a long list of fonts:

/* Old */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

/* New */
font-family: system-ui;