Modern Font Stacks
Dev tools
css font stacks
SHOW HN2023
How HN took it
3 positive, 13 neutral or asking, 2 mixed, 7 critical, out of 25 comments about the project. Thread score -0.11.
Design: 1 for, 4 againstIdea: 1 for, 1 againstExecution: 0 for, 2 againstPerformance: 1 for, 0 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Useful way to avoid webfonts and speed up pages
From 2 comments
I would love to see more websites that do this: ``` font-family: system-ui, sans-serif; ``` Instead of trying to download fonts from Google Fonts (which I block though uBlock…
doodlesdev on HNWell done tool, thanks! I used the system fonts at https://scrabble-solver.org and got a small performance improvement (from ~70% to ~80%) in PageSpeed Insights on mobile.…
kamilm on HN
Nice tool and good font choices
From 2 comments
This is really nice! I've been hardlining the minimalist/utilitarian approach for https://simple.industries with an intentionally basic system font stack, but this gives a few…
kimburgess on HNThese look all very solid! There’s one thing that bugs me, though: I would imagine that a “system font stack” would support characters for multiple scripts, since operating…
Narushia on HN
Objections
Stacks use fonts missing on many systems, such as CJK support absent
From 1 comment
These look all very solid! There’s one thing that bugs me, though: I would imagine that a “system font stack” would support characters for multiple scripts, since operating…
Narushia on HN
Rendering looks fuzzy or antialiased poorly on macOS
From 1 comment
These fonts render very poorly on my mac. Every one of them has antialiasing artifacts and so look like old school windows fuzzy fonts. It's particularly noticable on the…
seanhunter on HN
Generic families like serif and sans-serif would be simpler
From 1 comment
I don't get it. Why not just use "serif", "sans-serif" and "monospace"? What's the value of specifying specific fonts such as "Charter" or "Dejavu Sans"?
FooBarWidget on HN
Dot background causes strobing when scrolling
From 1 comment
That dot background causes a distracting strobing effect when I scroll.
aimor on HN
Requests
Show all fonts on the site for testing
From 1 comment
Is it possible to include all the fonts on the site? I know this kind of goes against the point ('cause it's supposed to showcase that offline fonts are cool!), but this is one…
laserbeam on HN
Fix minimum font size range in the tester
From 2 comments
Why is the smallest font size is the largest of what I actually would like to test? The range 0.7-1.5em is what needs tests, above that all looks good.
azatom on HNIt seems to min out at 0.75rem. I don't see where 12px comes in. Unless you are hard coding the root don't size to 16px.
kevincox on HN
Questions
Why ui-monospace is first rather than a generic name last
From 1 comment
I've never had a designer tell me "if x typeface isn't available, fallback to y." Simply fall back to the generic name unless specified. Why does "Monospace Code" begin with a…
cantSpellSober on HN
Which font is closest to Inter
From 1 comment
Which of these fonts is closest to Inter, a very popular font?
lloydatkinson on HN
Alternatives named
systemfontstack.com
From 1 comment
Similar: https://systemfontstack.com Either way, it's the best way to go these days if you don't need any fancy external fonts on your website.
partyguy on HN
system-ui and generic serif/sans-serif/monospace
From 2 comments
I would love to see more websites that do this: ``` font-family: system-ui, sans-serif; ``` Instead of trying to download fonts from Google Fonts (which I block though uBlock…
doodlesdev on HNI don't get it. Why not just use "serif", "sans-serif" and "monospace"? What's the value of specifying specific fonts such as "Charter" or "Dejavu Sans"?
FooBarWidget on HN