CSS References
CSS Web Safe Fonts
Web-safe fonts are typefaces that are pre-installed on the vast majority of computers and devices, so they render consistently without downloading anything. When you specify a font, always provide a stack — a comma-separated list ending in a generic family — so the browser falls back gracefully. This reference lists dependable stacks by style.
Web safe font stacks
| Font | Recommended stack | Style |
|---|---|---|
| System UI | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | Native OS UI font — fast and modern |
| Arial | Arial, Helvetica, sans-serif | Sans-serif |
| Helvetica | "Helvetica Neue", Helvetica, Arial, sans-serif | Sans-serif |
| Verdana | Verdana, Geneva, sans-serif | Sans-serif (wide, legible) |
| Tahoma | Tahoma, Geneva, sans-serif | Sans-serif |
| Trebuchet MS | "Trebuchet MS", Helvetica, sans-serif | Sans-serif (humanist) |
| Gill Sans | "Gill Sans", "Gill Sans MT", Calibri, sans-serif | Sans-serif |
| Georgia | Georgia, "Times New Roman", serif | Serif |
| Times New Roman | "Times New Roman", Times, serif | Serif |
| Garamond | Garamond, "Times New Roman", serif | Serif (elegant) |
| Palatino | "Palatino Linotype", "Book Antiqua", Palatino, serif | Serif |
| Cambria | Cambria, Georgia, serif | Serif |
| Courier New | "Courier New", Courier, monospace | Monospace |
| Consolas | Consolas, "Courier New", monospace | Monospace (code) |
| Lucida Console | "Lucida Console", Monaco, monospace | Monospace |
| Monospace system | ui-monospace, SFMono-Regular, Menlo, Consolas, monospace | Monospace (native code font) |
| Comic Sans MS | "Comic Sans MS", "Comic Sans", cursive | Casual / cursive |
| Brush Script MT | "Brush Script MT", cursive | Cursive / script |
Generic font families
Always end a font stack with a generic family. The browser uses it if none of the named fonts are available.
| Generic family | Meaning |
|---|---|
| serif | Fonts with small strokes at letter ends (e.g. Times). |
| sans-serif | Fonts without those strokes (e.g. Arial). |
| monospace | Fixed-width fonts for code (e.g. Courier). |
| cursive | Handwriting-style fonts. |
| fantasy | Decorative display fonts. |
| system-ui | The default UI font of the operating system. |
Using a font stack
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1 { font-family: Georgia, "Times New Roman", serif; }
code { font-family: ui-monospace, Consolas, "Courier New", monospace; }
</style>
</head>
<body>
<h1>Serif heading</h1>
<p>Sans-serif body text with a native system font.</p>
<p><code>monospace code</code></p>
</body>
</html>💡
The modern system font stack (system-ui, -apple-system, Segoe UI, Roboto…) gives your site the native look of each OS with zero download and instant rendering.