Our great sponsors
-
modern-font-stacks
System font stack CSS organized by typeface classification for every modern operating system
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
Bootstrap
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://github.com/system-fonts/modern-font-stacks explains each stack and which fonts are expected to be used where, with screenshots. This information makes it (mildly bizarrely) generally more useful than https://modernfontstacks.com/.
—⁂—
System UI: risky, it’s a trap, there’s basically no legitimate scenario for these semantics on the public web. See https://github.com/w3c/csswg-drafts/issues/3658 (skim through a bit, I’ve got a comment near the end too).
Monospace Slab Serif: every one of the fonts named here is a bad font:
(a) Nimbus Mono PS mangles things like the two-column `fi`, ligating them to a single-column `fi`. See https://github.com/ArtifexSoftware/urw-base35-fonts/issues/3....
(b) Courier New is unreasonably thin. Its 400 is more like a 250, and painful to read in many common configurations. Just never use it.
(c) Cutive Mono apparently copied Courier New’s known-awful thinness!?
Monospace Code: seriously, just go `monospace, monospace` these days. Firefox 98 on Windows was the last browser where this wasn’t at least perfectly adequate. (The doubling is to work around the stupid probably-13px font size misfeature that I’d like to try to convince browser makers to ditch, but haven’t tried yet.)
—⁂—
This is much better-thought out than most sets of suggestions, but I’d honestly still suggest dropping nuance in most cases, and just using `serif`, `sans-serif` or `monospace, monospace`.
https://github.com/system-fonts/modern-font-stacks explains each stack and which fonts are expected to be used where, with screenshots. This information makes it (mildly bizarrely) generally more useful than https://modernfontstacks.com/.
—⁂—
System UI: risky, it’s a trap, there’s basically no legitimate scenario for these semantics on the public web. See https://github.com/w3c/csswg-drafts/issues/3658 (skim through a bit, I’ve got a comment near the end too).
Monospace Slab Serif: every one of the fonts named here is a bad font:
(a) Nimbus Mono PS mangles things like the two-column `fi`, ligating them to a single-column `fi`. See https://github.com/ArtifexSoftware/urw-base35-fonts/issues/3....
(b) Courier New is unreasonably thin. Its 400 is more like a 250, and painful to read in many common configurations. Just never use it.
(c) Cutive Mono apparently copied Courier New’s known-awful thinness!?
Monospace Code: seriously, just go `monospace, monospace` these days. Firefox 98 on Windows was the last browser where this wasn’t at least perfectly adequate. (The doubling is to work around the stupid probably-13px font size misfeature that I’d like to try to convince browser makers to ditch, but haven’t tried yet.)
—⁂—
This is much better-thought out than most sets of suggestions, but I’d honestly still suggest dropping nuance in most cases, and just using `serif`, `sans-serif` or `monospace, monospace`.
https://github.com/system-fonts/modern-font-stacks explains each stack and which fonts are expected to be used where, with screenshots. This information makes it (mildly bizarrely) generally more useful than https://modernfontstacks.com/.
—⁂—
System UI: risky, it’s a trap, there’s basically no legitimate scenario for these semantics on the public web. See https://github.com/w3c/csswg-drafts/issues/3658 (skim through a bit, I’ve got a comment near the end too).
Monospace Slab Serif: every one of the fonts named here is a bad font:
(a) Nimbus Mono PS mangles things like the two-column `fi`, ligating them to a single-column `fi`. See https://github.com/ArtifexSoftware/urw-base35-fonts/issues/3....
(b) Courier New is unreasonably thin. Its 400 is more like a 250, and painful to read in many common configurations. Just never use it.
(c) Cutive Mono apparently copied Courier New’s known-awful thinness!?
Monospace Code: seriously, just go `monospace, monospace` these days. Firefox 98 on Windows was the last browser where this wasn’t at least perfectly adequate. (The doubling is to work around the stupid probably-13px font size misfeature that I’d like to try to convince browser makers to ditch, but haven’t tried yet.)
—⁂—
This is much better-thought out than most sets of suggestions, but I’d honestly still suggest dropping nuance in most cases, and just using `serif`, `sans-serif` or `monospace, monospace`.
Then your default font stack should look something like this.
https://github.com/twbs/bootstrap/blob/main/scss/_variables....