Richard Rutter
clagnut.com · Personal blog · on HN since 2010
Richard Rutter, a web designer and co-founder of Fontdeck, writes about web typography, CSS text sizing, hyphenation and typographic widows.
What HN saysHN links it for practical typography guidance, such as sizing text in ems and the state of CSS hyphenation, which a commenter says has changed little.
22HN people shared it
6linked it in comments
17stories submitted
437story points
1 year agolast shared
2010people per year2026
Most-shared posts
- 1An end to typographic widows on the web4 people · 8 points · first shared 2023 · discussion on HN
- 2How to size text using ems (2004)4 people · 1 points · first shared 2010 · discussion on HN
- 3Hyphenation in CSS3 people · 187 points · first shared 2019 · 108 comments on HN
- 4List of Pangrams (2014)3 people · 4 points · first shared 2020 · discussion on HN
- 5TODS – a typographic and OpenType default stylesheet2 people · 5 points · first shared 2024 · discussion on HN
- 6Pagination widows, or, why I'm embarrassed about my eBook (2023)1 people · 223 points · first shared 2024 · 133 comments on HN
- 7Use of ch unit considered inappropriate (in certain circumstances)1 people · 3 points · first shared 2025 · discussion on HN
- 8How to Typeset a Date Range1 people · 2 points · first shared 2023 · discussion on HN
- 9Why designers should and shouldn't code1 people · 2 points · first shared 2010 · discussion on HN
- 10The Scourge of Helvetica Neue Light1 people · 1 points · first shared 2014 · discussion on HN
- 11My Requests for Interop 20261 people · 1 points · first shared 2025 · discussion on HN
- 12Blog 24181 people · first shared 2024
What HN people wrote when they linked it
crazygringo · 2024-01-29
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 coordinates and control point values that differ. I find myself wondering if the actual font file is encoded in a way that eliminates as much redundant information as possible, or if it's basically merely multiple font files concatenated together with extra info on top.
[1] https://clagnut.com/blog/2418
john-doe · 2021-09-04
Incidentally, 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.
kolber_ · 2011-09-13
Yea, 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.
pinksoda · 2010-07-20
Here'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/
elefantastisch · 2020-05-25
See also http://clagnut.com/blog/2380/
blauwbilgorgel · 2013-07-21
I 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 sheets [4], not screen style sheets. Using them for screen styles is not-done and doesn't make much sense. [5]
[1] http://snook.ca/archives/html_and_css/font-size-with-rem
[2] http://clagnut.com/blog/348/
[3] http://alistapart.com/article/howtosizetextincss
[4] http://css-tricks.com/css-font-size/
[5] http://style.cleverchimp.com/font_size/points/font_wars.GIF