Better Web Type
betterwebtype.com · Personal blog · on HN since 2017
A typography-focused site with guides and resources on type, fonts, rhythm, accessibility and performance for web designers and developers.
What HN saysHN commenters point to it as a deep typography reference, though one calls its layout hard to use and another warns about an annoying modal.
15HN people shared it
6linked it in comments
22stories submitted
513story points
2 years agolast shared
2017people per year2026
Most-shared posts
- 1Better Web Typography for a Better Web4 people · 4 points · first shared 2017 · discussion on HN
- 2Web Typography Resources3 people · 111 points · first shared 2018 · 15 comments on HN
- 3The State of Fluid Web Typography–Should We Use It or Not?3 people · 4 points · first shared 2019 · discussion on HN
- 4A guide to rhythm in web typography2 people · 260 points · first shared 2018 · 87 comments on HN
- 5Keys to Accessible Web Typography2 people · 3 points · first shared 2019 · discussion on HN
- 6Preloading fonts: when does it make sense?2 people · 3 points · first shared 2019 · discussion on HN
- 7All you need is 5 fonts2 people · 3 points · first shared 2021 · 4 comments on HN
- 8Game for learning Web Typography: The Equilateral Triangle1 people · 96 points · first shared 2018 · 13 comments on HN
- 9I created a Font Memory Game, how fast can you complete it?1 people · 11 points · first shared 2018 · 4 comments on HN
- 10I just released the second edition of my book about web typography1 people · 5 points · first shared 2019 · 1 comments on HN
- 11How to Choose a Font for a Project1 people · 3 points · first shared 2019 · discussion on HN
- 12Web Typography Quiz by Better Web Type1 people · 3 points · first shared 2018 · discussion on HN
- 13A guide to recognising font styles1 people · 2 points · first shared 2019 · discussion on HN
- 145 Monospaced Fonts with Cool Coding Ligatures1 people · 2 points · first shared 2020 · 3 comments on HN
- 15A Guide to Combining Fonts1 people · 2 points · first shared 2018 · discussion on HN
What HN people wrote when they linked it
uxcolumbo · 2021-09-04
The web is not print and that site looks unusable to me (it might be old).
It kinda looks broken on a big screen and it took me a while to figure out what to do next. Call to actions were not clear.
Keep things simple, the web is fluid and make sure your text is legible and ensure good contrast. Also think about load performance and ideally stick to fonts that are generally already installed on devices by default.
Or follow this handy guide:
https://betterwebtype.com/articles/2021/06/07/all-you-need-is-5-fonts/
https://betterwebtype.com/ (free web typography course)
maigret · 2019-10-08
Hacker News could easily set a max-width on the problematic items. Every designer (and so should every web developer) knows that the sweet spot for reading is around 60 characters and a column of text if readable between 40 and 60 characters. Check for example the free course from https://betterwebtype.com/
d3sandoval · 2018-08-21
I highly recommend checking out this recent article from a list apart: https://alistapart.com/article/flexible-typesetting
As well as this continually-updated website: https://betterwebtype.com/web-typography-resources
Both give good high-level overviews of readability in digital typesetting and help with choosing the right fonts for the job
kixiQu · 2022-09-29
The rabbit hole is fractally deep. Stuff like https://betterwebtype.com/web-typography-resources/ (so https://betterwebtype.com/articles/2018/08/15/guide-to-combining-fonts… though I'll warn you it's got a real annoying modal) scratches the surface of the stuff that someone might be thinking of... regarding type alone.
blueridge · 2022-02-22
I appreciate the write-up, but your center column is still too narrow and your line length is a bit too short. I find the text quite difficult to read on a 13" screen. See:
https://practicaltypography.com/responsive-web-design.html
https://practicaltypography.com/line-length.html
https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography…
https://alistapart.com/article/more-meaningful-typography/
jcelerier · 2018-10-17
> https://betterwebtype.com/assets/images/rhythm/[email protected]
the text on the bottom, "better", hurts me physically. just looking at it literally gives me nausea.