# Modern Font Stacks: System Font Stack CSS Organized by Typeface Classification

> Modern Font Stacks is a reference of CSS font stacks grouped by typeface classification, covering the system fonts that ship with each modern OS. It is a copy-and-paste resource, not a library, and its value depends on how much you care about typographic character versus zero download cost.

**system-fonts/modern-font-stacks** — System font stack CSS organized by typeface classification for every modern operating system

- Repository: https://github.com/system-fonts/modern-font-stacks
- Website: https://modernfontstacks.com
- Stars: 3,529 · Forks: 54
- Language: HTML
- License: CC0-1.0
- Published: 2026-09-23 · Updated: 2026-09-23 · Language: en
- Canonical page: https://hysenlabs.com/projects/system-fonts-modern-font-stacks

## The problem: web fonts cost a download, system fonts cost consistency

A self-hosted web font means a network request, a period where text renders in a fallback face, and a visible reflow when the real face arrives. The README frames the pitch directly: "The fastest fonts available. No downloading, no layout shifts, no flashes." That is the trade. You give up control over exactly which glyphs a reader sees, and in exchange the text is painted immediately in a face the operating system already has on disk.

The harder problem is that "use a system font" is not one decision. A generic `serif` or `sans-serif` keyword hands the choice to the browser, and you get whatever the platform defaults to, which is often a face with no relationship to the tone you wanted. Modern Font Stacks addresses that by naming specific installed faces in a deliberate order and grouping the results by typeface classification, so you can pick a Transitional serif or a Geometric Humanist sans rather than accepting the browser default.

It is for front-end developers, designers and anyone maintaining a site where typographic character matters but a font pipeline does not. It is not for teams that need pixel-identical output across platforms.

## How the stacks are built: named faces in fallback order

Each entry in the README is a single `font-family` declaration plus a classification label. The System UI entry is the exception and is described as "less of a font stack and more of a CSS value":

```css
font-family: system-ui, sans-serif;
```

Everything else lists real typeface names followed by a generic family. The Transitional stack is `Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif`, and the Old Style stack is `'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif`. The browser walks the list left to right and uses the first family it can resolve locally, so the ordering encodes a preference across operating systems rather than a single choice.

That ordering is where the project's real work sits. The README pairs each stack with a font weight table showing which of the nine weights each named face actually provides. In the Transitional table, Charter covers 400, 700 and 900, while Bitstream Charter, Sitka Text and Cambria cover only 400 and 700. If your design calls for 500 or 600, the browser synthesises it or falls through, and the table is the only place that is written down. The repository also ships preview images and animated GIFs of each stack rendering across operating systems, plus a `site/` directory that backs the modernfontstacks.com page with its article view and character view.

## Installing it: there is nothing to install

The repository has no package manifest, no build step and no distribution channel in the README. It is a README of CSS declarations plus a `site/` directory and an `img/` directory. The README does not document an npm package, a CDN URL or a CLI, so the realistic workflow is to copy a declaration out of the README or the site and paste it into your stylesheet.

The README links each stack to a browser view on modernfontstacks.com with the stack name in the query string, for example the Transitional entry points at `https://modernfontstacks.com/?stack=transitional`, with an article view and a characters view alongside it. Open that page and you see the stack rendered in your own browser, which is the only way to know which face your machine will pick. Once you have chosen, paste the declaration into your stylesheet:

```css
body {
  font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
}
```

What you should see depends on the machine you are on. On macOS you get Charter; on Windows you get Sitka Text or Cambria; on Linux you may land on the generic `serif` if none of the named faces are present. That variation is the expected result, not a bug in your CSS.

## The rendering is not the same everywhere, and the README says so

The project is honest about platform-specific defects, which is unusual for a reference page. The Transitional notes state that Charter for macOS has "an odd wide non-breaking space" and that the bug has been reported to Apple, linking to issue 12 in the repository. This is a real limitation: a stack that resolves to Charter on one machine and Cambria on another will not break lines at the same points, so a headline that fits on one platform can wrap on another.

Weight coverage is the second constraint. The weight tables show that most of the named faces outside System UI ship only regular and bold. Charter adds 900, but Bitstream Charter, Sitka Text and Cambria do not. If your interface uses a 500 or 600 weight for buttons or labels, you are relying on synthetic bolding or a fallback you did not plan for.

The third case is where this is the wrong tool. If you are building a brand system, a type specimen page, a print stylesheet, or anything where the exact letterforms are the product, system stacks are a mismatch. You are accepting whatever the reader's OS shipped, which on Linux in particular can mean a face you have never seen. The README also notes that Android uses Noto Serif as its default `serif` font, so the stack's later entries never come into play there.

## Compared with shipping a webfont or using a font CDN

The obvious alternative is a hosted webfont service or a self-hosted font file. The difference is not quality, it is what you are buying. A webfont gives you the same letterforms on every device and a licence you pay for, at the cost of a download and the layout shift that comes with it unless you manage the loading carefully. Modern Font Stacks gives you zero download and immediate paint, at the cost of per-platform variation and a much smaller weight range.

A second alternative is the plain `font-family: sans-serif` or `font-family: serif` keyword. That is simpler still, but it delegates the choice entirely to the browser and gives you no control over classification. Modern Font Stacks sits between the two: it keeps the zero-download property of the generic keyword while naming specific faces so that a Transitional serif reads as a Transitional serif on the platforms that have one. The README's Old Style stack, for example, names Iowan Old Style, Palatino Linotype, URW Palladio L and P052 before falling back to `serif`.

There is no runtime, no JavaScript and no dependency graph here. That is the whole comparison: the project is a list, and you either find the list useful or you do not.

## Licence and the cost of keeping up

The repository is licensed CC0-1.0, which places the work in the public domain as far as the licence text goes. The CSS declarations themselves are short factual lists of font names, and the licence covers the repository contents. It does not cover the fonts being named: Charter, Sitka, Cambria, Iowan Old Style and the rest remain under their own terms, and the README does not reproduce those terms. If you are redistributing anything beyond the declarations, check the font licences separately. Nothing here is legal advice.

The maintenance picture is unusual because there is little to break. The last push to the repository was on 2026-03-10. The stacks change only when an operating system changes its default fonts or a new classification is added, so the upgrade cost is close to zero for a consumer: you copy a declaration once and it keeps working. The cost sits with the maintainer, who has to track OS font changes and update the weight tables and preview images. If you depend on the site as a reference rather than the repository as a dependency, there is no versioning problem to manage at all.

## Conclusion

Adopt Modern Font Stacks if you want typographic variety without shipping font files, and if your audience is on current macOS, Windows, Android or Linux builds where the named faces actually exist. Do not adopt it if you need identical rendering across every device: the whole point is that each OS falls back to a different face, and the README itself records platform quirks such as the wide non-breaking space in Charter on macOS. Before you commit, open the stack you picked on modernfontstacks.com in each browser and OS you support, check the font weight table for the weights you actually use, and confirm the fallback at the end of the stack is one you can live with.

## FAQ

### What is a font stack in Modern Font Stacks?

A font stack is an ordered list of font family names in a CSS `font-family` declaration. The browser uses the first family it can resolve on the reader's system and moves to the next one if it cannot. Modern Font Stacks organizes these lists by typeface classification, such as Transitional, Old Style or Geometric Humanist.

### Do I need to download anything to use Modern Font Stacks?

No. The project is a reference of CSS declarations, and the README describes the fonts as the fastest available with no downloading, no layout shifts and no flashes. You copy the `font-family` line into your stylesheet and the browser uses fonts already installed on the reader's operating system.

### Why does a Modern Font Stacks stack look different on macOS, Windows and Linux?

Because each stack names several faces and the browser picks the first one present on that system. The README provides font weight tables and rendering previews per operating system, and it notes platform quirks such as the wide non-breaking space in Charter on macOS.

### Does Modern Font Stacks cover all font weights?

No. The weight tables in the README show that most named faces outside System UI provide only regular and bold, with Charter adding 900 in the Transitional stack. If your design uses intermediate weights such as 500 or 600, check the table for the stack you chose before relying on it.

## Sources

- [Issues](https://github.com/system-fonts/modern-font-stacks/issues)
- [License: CC0-1.0](https://github.com/system-fonts/modern-font-stacks/blob/main/LICENSE)
- [Project website](https://modernfontstacks.com)
- [README](https://github.com/system-fonts/modern-font-stacks/blob/main/README.md)
- [system-fonts/modern-font-stacks on GitHub](https://github.com/system-fonts/modern-font-stacks)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/system-fonts-modern-font-stacks