5 ms·

I wish this web page used a smaller font, 24px (18pt) is really, really large. (HN comments are 9pt.) The page's ToC uses 60% of the body font, which is ~10pt.

by Inityx 6y ago

wunderflix 6y ago
Is there a good page about font sizes, spacings and all that?
- breck 6y ago
  Here's a fun tool someone shared with me for experimenting with different font params: https://mbarkhau.keybase.pub/readable-text/index.html https://mbarkhau.keybase.pub/readable-text/index.html
  - wunderflix 6y ago
    Awesome! Thank you
rajangdavis 6y ago
It's funny you say that, I usually view Hacker News zoomed in at 250% (on desktop) because the font is tinier than I'd like.
- naavis 6y ago
  Me too, at 200%. My eyes are getting old.
  - davewood 6y ago
    200% club aswell
  - spiralx 6y ago
    My userstyle sets 13pt in a bigger font with lots of line-spacing, looks like I'm in the over 200% crowd :) I can read smaller text for a bit in a single block, but when it's something like a comment section I need things a lot bigger to be able to skim through comments to spot things I'm interested in.
- mjgs 6y ago
  Yup - I increase the font size a lot these days, especially on mobile. I haven’t looked into the best way to write web pages that accommodate zooming, but there is a huge variety in how pages perform as you zoom. Loads of sites don’t do it properly, where you zoom and all the text and images get squashed in the middle of the page, or where the elements disappear off the side of the page. The other horrid thing is when you zoom and then the text is the right size but you end up having to scroll left to right to read the text. The best sites perform perfectly at every zoom level, with all the content resizing properly so the reading experience is always pleasant. I’d love to read some tutorials on how to ensure your website performs in this way. In my opinion it’s one of the signs of a really skill-full developer.
  - jraph 6y ago
    Pages are perfect by default (except for a serif font being by default on some screens and the line length not being limited to something readable). The less you do, the best the web page behaves. The more you fight against default behaviors / layouts, the more things break. But more specifically, be careful with margins, they grow with the zoom level, often more than wanted. Same for position. And be careful with sizes fixed using something else than percentages for the same reasons. If you don't want a block be larger than 100ish characters for readability, use max-width with a font related unit, not straight width and not some other kind of unit.
goblin89 6y ago
I enjoy this page’s typography on a smaller mobile screen. Line lengths, line spacing, font size, everything seems great for a medium-length read. HN is great too: an assortment of pieces of text, having varied lengths and organized into a tree-like hierarchy, warrants tighter typography.
- pavpanchekha 6y ago
  Hi, book author here. All the typographic tips are lifted practically directly from Matthew Butterick's Practical Typography: https://practicaltypography.com https://practicaltypography.com
caslon 6y ago
Hit "CTRL" and "-"! You will be amazed to find the page shrink, and the font alongside it! I personally like it around 67%. I'd prefer most sites have smaller fonts; there's no need to complain about it, though, because browsers allow you to make text smaller pretty easily, as long as the site doesn't go out of its way to deny you that.
- Cthulhu_ 6y ago
  Definitely; I often increase the size of fonts when they're too small for my liking. I have HN at 125%. The important part is not so much getting the right font size, but making sure the user's browser can change it well enough.
- rojcyk 6y ago
  Plus add line-height: 134%; and you are set! :)
pavpanchekha 6y ago
Hi Inityx—book author here. My eyesight is bad, hence the big font. It should respond well to browser zoom, or if you narrow the page there's a narrower layout with smaller fonts.
- zamadatix 6y ago
  Generally that's meant to be a user setting not a content setting. E.g. if the user likes 1.5x content for their eyesite they either set the OS to 150% scaling as a whole (or the browser default to 150% scaling should that not be available for some reason). Now everything they use is exactly the right size for them the instant they view it. If the content tries to do this on behalf of certain users then site X ends up being 1.5*1.5=2.25x zoomed while site Y ends up being 1.5*.66 = 1x zoomed effectively turning a single setting that solved the accessibility and preference problem for everyone into a per content-piece nightmare again. Font size/weight/settings in a design is meant to change relative proportions of a design (e.g. headers, emphasized words, side notes) not to act as the overall scaler for the user - that's already available out of the box. If this post weren't how browsers lay out web pages I wouldn't be such a stickler but to ignore this is to throw out the main advantage of the sizing model browsers use.

I wish this web page used a smaller font, 24px (18pt) is really, really large. (HN comments are 9pt.) The page's ToC uses 60% of the body font, which is ~10pt.

by Inityx 6y ago

I wish this web page used a smaller font, 24px (18pt) is really, really large. (HN comments are 9pt.) The page's ToC uses 60% of the body font, which is ~10pt.

wunderflix 6y ago

Is there a good page about font sizes, spacings and all that?

breck 6y ago
Here's a fun tool someone shared with me for experimenting with different font params: https://mbarkhau.keybase.pub/readable-text/index.html https://mbarkhau.keybase.pub/readable-text/index.html
- wunderflix 6y ago
  Awesome! Thank you

rajangdavis 6y ago

It's funny you say that, I usually view Hacker News zoomed in at 250% (on desktop) because the font is tinier than I'd like.

naavis 6y ago
Me too, at 200%. My eyes are getting old.
- davewood 6y ago
  200% club aswell
- spiralx 6y ago
  My userstyle sets 13pt in a bigger font with lots of line-spacing, looks like I'm in the over 200% crowd :) I can read smaller text for a bit in a single block, but when it's something like a comment section I need things a lot bigger to be able to skim through comments to spot things I'm interested in.
mjgs 6y ago
Yup - I increase the font size a lot these days, especially on mobile. I haven’t looked into the best way to write web pages that accommodate zooming, but there is a huge variety in how pages perform as you zoom. Loads of sites don’t do it properly, where you zoom and all the text and images get squashed in the middle of the page, or where the elements disappear off the side of the page. The other horrid thing is when you zoom and then the text is the right size but you end up having to scroll left to right to read the text. The best sites perform perfectly at every zoom level, with all the content resizing properly so the reading experience is always pleasant. I’d love to read some tutorials on how to ensure your website performs in this way. In my opinion it’s one of the signs of a really skill-full developer.
- jraph 6y ago
  Pages are perfect by default (except for a serif font being by default on some screens and the line length not being limited to something readable). The less you do, the best the web page behaves. The more you fight against default behaviors / layouts, the more things break. But more specifically, be careful with margins, they grow with the zoom level, often more than wanted. Same for position. And be careful with sizes fixed using something else than percentages for the same reasons. If you don't want a block be larger than 100ish characters for readability, use max-width with a font related unit, not straight width and not some other kind of unit.

goblin89 6y ago

I enjoy this page’s typography on a smaller mobile screen. Line lengths, line spacing, font size, everything seems great for a medium-length read. HN is great too: an assortment of pieces of text, having varied lengths and organized into a tree-like hierarchy, warrants tighter typography.

pavpanchekha 6y ago
Hi, book author here. All the typographic tips are lifted practically directly from Matthew Butterick's Practical Typography: https://practicaltypography.com https://practicaltypography.com

caslon 6y ago

Hit "CTRL" and "-"! You will be amazed to find the page shrink, and the font alongside it! I personally like it around 67%. I'd prefer most sites have smaller fonts; there's no need to complain about it, though, because browsers allow you to make text smaller pretty easily, as long as the site doesn't go out of its way to deny you that.

Cthulhu_ 6y ago
Definitely; I often increase the size of fonts when they're too small for my liking. I have HN at 125%. The important part is not so much getting the right font size, but making sure the user's browser can change it well enough.
rojcyk 6y ago
Plus add line-height: 134%; and you are set! :)

pavpanchekha 6y ago

Hi Inityx—book author here. My eyesight is bad, hence the big font. It should respond well to browser zoom, or if you narrow the page there's a narrower layout with smaller fonts.

zamadatix 6y ago
Generally that's meant to be a user setting not a content setting. E.g. if the user likes 1.5x content for their eyesite they either set the OS to 150% scaling as a whole (or the browser default to 150% scaling should that not be available for some reason). Now everything they use is exactly the right size for them the instant they view it. If the content tries to do this on behalf of certain users then site X ends up being 1.5*1.5=2.25x zoomed while site Y ends up being 1.5*.66 = 1x zoomed effectively turning a single setting that solved the accessibility and preference problem for everyone into a per content-piece nightmare again. Font size/weight/settings in a design is meant to change relative proportions of a design (e.g. headers, emphasized words, side notes) not to act as the overall scaler for the user - that's already available out of the box. If this post weren't how browsers lay out web pages I wouldn't be such a stickler but to ignore this is to throw out the main advantage of the sizing model browsers use.