Does a system stack really make no requests?

None for the font itself. Every named entry is a face the operating system already ships, so the browser resolves the stack locally. There is no stylesheet, no font file and no third-party host involved, which removes both the download and the connection from the critical path.

Why does the design look different on another computer?

Because the stack resolves to whatever that platform has installed, which is the point of the approach. A modern interface face on Windows and on macOS are different typefaces by design, each drawn for its platform's rendering. The layout is consistent while the letterforms are not.

What does system-ui resolve to?

The operating system's own interface face, which is the safest single entry in a stack: on platforms that support it, it always resolves and always matches the surrounding interface. Its metrics differ from the named faces that follow it, so it is best used as the first entry rather than as a fallback.

Can I combine a system stack with a webfont?

Yes, and that is a common production arrangement: the system entry renders immediately while the webfont loads, then the webfont takes over. For it to work without a visible jump, the fallback metrics need matching with size-adjust, which the variable font builder covers, since a system stack on its own cannot express that adjustment.

Which of the presets is least reliable?

The slab serif, because Rockwell ships with some Windows editions and not others and Courier New is not a slab. Treat it as a display flavour with a monospace terminal rather than as a body stack, and check the rendering on the platforms the product actually supports.

System Font Stack Generator

Preset

Stack family

Preview text

Faces in stack8

Network requests0

Terminal familysans-serif

Best all-round: each OS gets its own UI face, no request, no FOUT.

Preview

System fonts load instantly — no network, no flash.

Grumpy wizards make toxic brew for the evil Queen and Jack. 0123456789 — the actual face you see depends on the operating system, which is exactly what a system stack is for.

CSS

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

You Might Also Need

CSS Font Stack Builder

Build robust font-family stacks

Font Loading Strategy Builder

Plan font loading strategy

Font Rendering Preview

See anti-aliasing and rendering

CSS Variable Font Builder

Build variable font CSS

The system font stack generator writes zero-download stacks built from faces already installed on macOS, iOS, Windows, Android and Linux. Every non-generic entry is a real shipped system face, and the terminal generic keeps the stack working on anything not covered.

What is System Font Stack Generator?

The system font stack generator produces stacks that ask for nothing over the network, using only local fonts the operating system already has. That removes the download, the flash of unstyled text and the third-party connection in one decision, at the cost of the exact face being different on each platform.

Six presets cover the common cases, and each one is a real stack rather than a description.

Modern UI leads with system-ui and -apple-system, then Segoe UI, Roboto, Helvetica Neue, Arial and Noto Sans before the generic, so each platform gets its own interface face.
Humanist uses Segoe UI, Helvetica Neue, Lucida Grande, Tahoma and Verdana for open apertures and a warmer voice than the default interface face.
Neo-grotesque runs Helvetica Neue, Helvetica, Arial and Liberation Sans, which is tight, neutral and predictable for dense interfaces.
Transitional serif stacks Charter, Bitstream Charter, Sitka Text, Cambria and Georgia, so a serif body text is available with no webfont at all.
Slab serif uses Roboto Slab, Rockwell and Courier New, the least reliably installed of the six and best treated as a display flavour.
Monospace leads with ui-monospace and SFMono-Regular, then SF Mono, Menlo, Consolas and Liberation Mono, which is where integer metrics matter for code and tabular data.

The panel reports the face count, the terminal generic family and, pointedly, zero network requests. For a design that has to survive offline, a locked-down device or a proxy that blocks font hosts, that is not a performance preference but the only kind of stack that renders at all. The last of those is the whole proposition: nothing about the first paint waits for a font, and no third-party host sits on the critical path. The trade is that the design is not identical between platforms, which is the intended behaviour of a system stack rather than a defect. The rendered face depends on the machine, and the preview says so under the sample, since the same page on a Mac and on Windows will show different letterforms two entries down the same stack.

Three limits follow from the approach, and all three are consequences of choosing local fonts.

Metrics differ between the faces in a stack, so line breaks and block heights move between platforms, and no size-adjust is available here because there is no webfont to match against.
The terminal generic family decides the worst case, so a stack that ends in monospace makes a strong promise about anything unusual.
Name availability varies by version as well as by platform, so the least common entry in a stack can be years old on some machines and absent on others.
Nothing can be preloaded, since there is nothing to fetch, so the stack cannot be tuned for a faster first paint — it is already the fastest option available.
A stack is a single declaration with no at-rules behind it, which is why it is fast and also why it cannot express a weight, a style or a character range.

How to use System Font Stack Generator

Choose the preset that matches the voice the interface needs, then read the stack and confirm each entry is one you recognise as a shipped system face.
Check the terminal generic family, since that is what renders for a visitor whose platform has none of the named faces.
Type a sample line and compare the two preview sizes, remembering that the rendering you see is your own platform's.
Copy the declaration and, if the design depends on line breaks, verify the layout on a second operating system before shipping.

When to use System Font Stack Generator vs related tools

Reach for it when a page has no design reason to ship a webfont, when the first paint matters more than platform-identical letterforms, or when a project needs a serif or monospace voice without adding a single request. Zero requests is a design decision, not a compromise. Where exact letterforms do matter, the CSS font stack builder writes the chain around a chosen face, the font loading strategy builder budgets the files that follow, and the CSS variable font builder matches the fallback metrics so a swapped-in webfont does not move the layout.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.