Top all-time · #3294
Richard Rutter
Personal blog · clagnut.com/blogdesignweb
Richard Rutter writes Clagnut summaries, a personal blog at clagnut.com about design and web. Since 2010, 22 different Hacker News readers have linked it 23 times, most often “An end to typographic widows on the web”. It is still writing: the last post was on 2026-05-20, and you can follow it by feed.
Too few sampled comments (6) to say how often HN recommends it.?
Why HN links it
Richard Rutter's typography and CSS posts. HN readers cite them for the em-based font-sizing technique (popular since 2004) and as references on web hyphenation and variable fonts.
Summarised by Claude from a sample of 6 HN comments that link here. Each comment is marked recommending, critical or neutral (citing without judging); how this works.
The online home and blog of Richard Rutter, cofounder of Clearleft and Fontdeck. Here he writes about web typography, human-centred design, Brighton, music and occasionally cycling.
Most-linked posts?
- An end to typographic widows on the web4 people · 4 mentions · first linked 2023-03-07
- Hyphenation in CSS2 people · 2 mentions · first linked 2019-03-23
- TODS – a typographic and OpenType default stylesheet2 people · 2 mentions · first linked 2024-09-26
- /blog/348/2 people · 2 mentions · first linked 2011-09-13
What Hacker News says?
Yes, both in theory and in practice [1]. What I'm more curious about is whether variable fonts can save disk space. I.e. whether a variable font that interpolates between "regular" and "bold" is smaller than one font file in "regular" and another in "bold". Because so much about the two variations is the same -- the same glyphs, the same number of anchor points, in the same order... it's just the actual anchor point…
Comment linking /blog/2418
on “Variable Fonts”Submitted Pagination widows, or, why I'm embarrassed about my eBook (2023) as a story · 223 points
HN discussionI think relative font-sizing with "em" and "rem" [1] is a popular and good choice these days. "em" has been popular since 2004 after an article by Rutter [2]. IE9- (and Android 1.6-) didn't scale/zoom well when the font was set in px. But using px was widespread despite these (and other) cons because it was easy, reliable and consistent to implement across browsers. [3] Pt (point type) are only for printer style she…
Comment linking /blog/348/
on “CSS Zen Garden relaunched”Submitted Hyphenation in CSS as a story · 184 points
HN discussionYea, we were hitting visible load issues on both the images and jQuery. Because the goal was to build something that felt like an iOS app, the longer the load screen was up, the less it felt like a real app. The em technique is discussed in some detail here: http://clagnut.com/blog/348/ In practice what it also allows us to do is to set a font-size of 150% on the body and everything scales up proportionately.
Comment linking /blog/348/
on “Currency.io, a html5 currency converter - open sourced to learn from”Submitted Use of ch unit considered inappropriate (in certain circumstances) as a story · 3 points
HN discussionIncidentally, by the same author, the state of hyphenation on the web: http://clagnut.com/blog/2395 It's from 2019, but nothing much has changed since. My biggest gripe is that browsers should prevent hyphenation when a word starts with an uppercase letter, which doesn’t seem too hard? The only bulletproof (but more complicated) solution is to process text beforehand and insert soft hyphens (­) where appropriate.
Comment linking /blog/2395
on “The Elements of Typographic Style Applied to the Web”Submitted TODS – a typographic and OpenType default stylesheet as a story · 3 points
HN discussionSee also http://clagnut.com/blog/2380/
Comment linking /blog/2380/
on “All the Letters”Submitted An end to typographic widows on the web as a story · 3 points
HN discussionHere's a little trick if you're going to use em: BODY {font-size:62.5%} That makes 1em equal 12px, so 2em is 24px, 1.5em is 18px, etc. You'll need to do this to get consistency across all browsers. Otherwise 1.1em could be 20px for me but 18px for you. Here's a post that goes into much more detail: http://www.clagnut.com/blog/348/
Comment linking /blog/348/
on “Show HN: http://hackerbra.in - fast and smart hacker news”Submitted All you need to know about hyphenation in CSS as a story · 3 points
HN discussionSubmitted TODS – a typographic and OpenType default stylesheet as a story · 2 points
HN discussionSubmitted List of Pangrams (2014) as a story · 2 points
HN discussionSubmitted English Phonetic Pangrams as a story · 2 points
HN discussionSubmitted An end to typographic widows on the web as a story · 2 points
HN discussionSubmitted An end to typographic widows on the web as a story · 2 points
HN discussionSubmitted How to Typeset a Date Range as a story · 2 points
HN discussionSubmitted Why designers should and shouldn't code as a story · 2 points
HN discussionSubmitted My Requests for Interop 2026 as a story · 1 points
HN discussionSubmitted How to size text using ems (2004) as a story · 1 points
HN discussionSubmitted An end to typographic widows on the web as a story · 1 points
HN discussionSubmitted The Scourge of Helvetica Neue Light as a story · 1 points
HN discussion
