News for hackers. Stuff that matters.
Re:How Browsers Lay Out Web Pages by Inityx on Tuesday April 06, 2021 @01:02AM (#26708095)
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.

Re:How Browsers Lay Out Web Pages by caslon on Tuesday April 06, 2021 @02:23AM (#26708601)
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.

Re:How Browsers Lay Out Web Pages by Cthulhu_ on Tuesday April 06, 2021 @03:56AM (#26709250)
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.

Re:How Browsers Lay Out Web Pages by rojcyk on Tuesday April 06, 2021 @08:18AM (#26710883)
Plus add line-height: 134%; and you are set! :)
Re:How Browsers Lay Out Web Pages by rajangdavis on Tuesday April 06, 2021 @01:23AM (#26708183)
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.
Re:How Browsers Lay Out Web Pages by mjgs on Tuesday April 06, 2021 @06:01AM (#26710032)
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.

Re:How Browsers Lay Out Web Pages by jraph on Tuesday April 06, 2021 @11:48AM (#26713327)
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.

Re:How Browsers Lay Out Web Pages by naavis on Tuesday April 06, 2021 @01:34AM (#26708243)
Me too, at 200%. My eyes are getting old.
Re:How Browsers Lay Out Web Pages by spiralx on Wednesday April 07, 2021 @12:25PM (#26727165)
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.

Re:How Browsers Lay Out Web Pages by davewood on Tuesday April 06, 2021 @04:01AM (#26709282)
200% club aswell
Re:How Browsers Lay Out Web Pages by goblin89 on Tuesday April 06, 2021 @02:16AM (#26708533)
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.

Re:How Browsers Lay Out Web Pages by pavpanchekha on Tuesday April 06, 2021 @10:40AM (#26712335)
Hi, book author here. All the typographic tips are lifted practically directly from Matthew Butterick's Practical Typography: https://practicaltypography.com
Re:How Browsers Lay Out Web Pages by pavpanchekha on Tuesday April 06, 2021 @10:39AM (#26712323)
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.
Re:How Browsers Lay Out Web Pages by zamadatix on Tuesday April 06, 2021 @10:52AM (#26712504)
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.

Re:How Browsers Lay Out Web Pages by wunderflix on Tuesday April 06, 2021 @01:06AM (#26708106)
Is there a good page about font sizes, spacings and all that?
Re:How Browsers Lay Out Web Pages by breck on Tuesday April 06, 2021 @02:01AM (#26708431)
Here's a fun tool someone shared with me for experimenting with different font params: https://mbarkhau.keybase.pub/readable-text/index.html
Re:How Browsers Lay Out Web Pages by wunderflix on Tuesday April 06, 2021 @04:11AM (#26709350)
Awesome! Thank you