System font preview
Type some text and compare it across the most widely available system fonts: adjust the size and weight, then copy a CSS font stack that's ready to paste into your stylesheet.
Why use system fonts?
System fonts are already installed on your visitors' devices, so the page never has to download a font file. Text renders instantly, with none of the annoying "flash of unstyled text" (FOUT) that web fonts often cause. That's why GitHub, Booking.com, and many other major sites rely on system font stacks. One caveat: not every font lives on every device — Impact and Comic Sans MS, for instance, are missing on many Android phones, where the browser falls back to the generic font listed at the end of the stack.
How do I use the copied CSS stack?
Paste the stack into the font-family property of your CSS, for example body { font-family: Georgia, "Times New Roman", serif; }. Order matters: the browser tries the fonts from left to right and uses the first one available; the last value (serif, sans-serif, or monospace) is the safety net that guarantees something readable no matter what. The "system-ui" stack deserves a special mention: it renders the device's native interface font — San Francisco on Mac and iPhone, Segoe UI on Windows, Roboto on Android — so the look changes from device to device, and that's exactly its strength.