←back to thread

569 points todsacerdoti | 2 comments | | HN request time: 0s | source
Show context
ValdikSS ◴[] No.42600392[source]
The page is so narrow, like it's made for a vertical smartphone screen. That's ANNOYING!
replies(1): >>42600519 #
nayuki ◴[] No.42600519[source]
Look up any typographic manual and you'll learn that you can't make lines of text too wide or else people will have trouble reading them. Example - https://practicaltypography.com/line-length.html .

This is also related to why professional newspapers and magazines lay out text in relatively narrow columns, because they are easy to scan just top-down while hardly moving your eyes left-right.

I do think that vertical phones are too narrow for conveying decent text, but you also can't have completely unbounded page widths because people do run browsers maximized on desktop 4K screens.

replies(3): >>42601140 #>>42601763 #>>42603078 #
dredmorbius ◴[] No.42601140[source]
That's true, but 60 characters is way toward the "too narrow" side of the scale. I'd fatten the page to ~45--55 em (or rem), and BTW, strongly prefer relative font-sized units to pixels, which ... are increasingly unreliable as size determinants, particularly as high-def, high-dot-pitch displays on monitors, smartphones, and e-ink displays become more common. Toto we're not in 96 dpi land any more.

I also strongly prefer at least some padding around the edges of pages / text regions, with 5--10% usually much easier to read.

I'd played with making those changes on Rachel's page through Firefox's inspector:

  html { font-family: garamond, times, serif; }
  body { max-width: 50em; }
  .post { padding 2em 4em; }
To my eye that improves things greatly.

(I generally prefer serif to sans fonts, FWIW.)

replies(1): >>42605780 #
1. chuckadams ◴[] No.42605780[source]
> Toto we're not in 96 dpi land any more.

Unless you're banging directly on the framebuffer, logical pixels haven't been tied to device pixels for literally decades. CSS specifies pixels at 1/96 of an inch, a decision that goes all the way back to X11. 1rem == 16px, though this can be changed in CSS (just set font-size on the :root element) whereas you can typically only change pixel scaling in your display settings.

So yes, using rems is better, but pixels are not going to get dramatically smaller on denser displays unless the device is deliberately scaling them down (which phones often do simply because they're designed to be read up-close anyway)

replies(1): >>42605942 #
2. dredmorbius ◴[] No.42605942[source]
My experience, for decades, has been that ems / rems are almost always preferable for scaling anything that's relative to text: body width, margins, padding, etc.

It's also possible to scale text itself to the reader's own preference if any by setting the body font size to "normal". Assuming the reader has set that value in their browser, they get what they expect, and for the 99.99966% percent of people who go with their browser's shitty default, well, they can zoom the page as needed.

(Most people don't change defaults, which is one key reason to use sane ones in products and projects.)

Sites which use px or pt (o hai HN) for scaling of text or fonts absolutely uniformly fail to please for me.

(See my HN madhackery CSS mods links in my profile here, that's what I'm looking at as I type this here. On my principle e-ink browser, those aren't available, and I'm constantly fiddling with both zoom and contrast settings to make HN usable.)

Making pixel-based styling even more janky by not being actual pixels any more seems ... misguided.