Selecting the right font for the web can quickly become complicated. Between checking device compatibility across Macs, Windows PCs, and smartphones, navigating licensing restrictions, and managing font fallbacks, the questions never stop. Over the next few articles, we’ll look at practical ways to overcome these challenges and make web typography a breeze.
Always available — the CSS generics
serif, sans-serif, monospace, cursive, fantasy, system-ui, ui-serif, ui-sans-serif, ui-monospace, ui-rounded, math, emoji
These aren’t fonts, they’re requests the browser resolves to whatever it has. Every stack should end in one.
Safe on both Windows and macOS (the old Core Fonts for the Web set, still the closest thing to universal)
| Font | Category |
| Arial | sans |
| Arial Black | sans, heavy |
| Comic Sans MS | casual |
| Courier New | mono |
| Georgia | serif |
| Impact | display |
| Times New Roman | serif |
| Trebuchet MS | sans |
| Verdana | sans |
| Webdings | symbol |
| Tahoma | sans |
| Palatino Linotype / Palatino | serif |
Andale Mono was in the original set but has largely fallen off Windows — treat it as Mac-only now.
Windows only
Calibri, Cambria, Candara, Consolas, Constantia, Corbel, Segoe UI, Segoe UI Variable, Franklin Gothic Medium, Lucida Sans Unicode, Lucida Console, MS Gothic, Microsoft Sans Serif, Sylfaen, Gabriola, Ebrima, Nirmala UI, Bahnschrift, Ink Free, Marlett, Wingdings
macOS and iOS only
Helvetica, Helvetica Neue, Avenir, Avenir Next, Futura, Optima, Gill Sans, Baskerville, Didot, Hoefler Text, Charter, Palatino, American Typewriter, Copperplate, Cochin, Iowan Old Style, Lucida Grande, Geneva, Monaco, Menlo, SF Mono, Courier, Andale Mono, Marker Felt, Chalkboard SE, Bradley Hand, Snell Roundhand, Apple Chancery, Zapfino, Papyrus, Trattatello
San Francisco can’t be named directly — reach it through system-ui or -apple-system.
Android only
Roboto, Roboto Condensed, Noto Sans, Noto Serif, Noto Color Emoji, Cutive Mono, Coming Soon, Dancing Script, Carrois Gothic SC. Droid Sans and Droid Serif still resolve on older devices.
Linux only
DejaVu Sans / Serif / Sans Mono, Liberation Sans / Serif / Mono (metric-compatible with Arial, Times New Roman and Courier New), Nimbus Sans / Roman / Mono, FreeSans / FreeSerif / FreeMono, Ubuntu and Ubuntu Mono (Ubuntu only), Cantarell, Noto Sans
Stacks that resolve well everywhere
css
/* native UI */
font-family: system-ui, -apple-system, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif;
/* neutral sans */
font-family: Arial, “Helvetica Neue”, Helvetica, “Liberation Sans”, sans-serif;
/* humanist sans */
font-family: “Segoe UI”, Candara, Optima, “Trebuchet MS”, Verdana, sans-serif;
/* serif */
font-family: Georgia, Cambria, “Iowan Old Style”, “Times New Roman”, “Liberation Serif”, serif;
/* mono */
font-family: ui-monospace, Consolas, Menlo, “DejaVu Sans Mono”, “Courier New”, monospace;
Two caveats worth knowing. Font style availability is narrower than family availability — Arial ships regular/bold/italic everywhere, but Segoe UI Light or Avenir Next Ultra Light may not be there, and the browser will synthesise a fake weight rather than fail visibly. And the metric-compatible Linux substitutes (Liberation, Nimbus) match line lengths exactly, which matters if your layout depends on text occupying a known width.