Hacker News Reader

Comment by crazygringo | Hacker News Reader

On the other hand, don't use font sizes that are too big (I've noticed that on a number of blogs and startup sites recently).

It might look great on your large iMac screen, but when I read it with an 11" MBA, it's pretty frustrating to only be able to see a handful of lines of text at the same time.

Even this blog which is doing the complaining, I wish I could see more of the text at the same time. Though it's a matter of personal preference, a find its line-height to be a bit too tall. 1.5em is just too much for body text, in my opinion -- it's almost like overcompensation, and you rarely see that in the body text of printed books or magazines. 1.2 or 1.3 can be a lot better.

View on HN

The line height recommended by classic typography books is 130-150% of line height, depending on the typeface and personal preference. I've also read web typography tutorials giving the same recommendation.

IMHO, the default line height in browsers is just too narrow.

Agreed, though, that it's a matter of what you're used to. But when you're used to high quality typography designed to make the text easy to read, you tend to notice the mistakes.

Here are some rules I go by:

- Use an appropriate font designed for screen display

- Avoid small font sizes: 16px is a good default, less than 14px is usually too small

- Use dark text on light background

- Typeset on a vertical grid with 130-150% of line height

- Use a reasonable line length (no more than 80 characters)

All these rules aim to make the text easy to read and easy on the eyes.

This blog is calling for all sites to not set a font size, and then adjust everything relative to the base.

That would allow you to set your preferred "not huge" default font size and have it work everywhere, and it would allow me to set my "huge" default and also have it work everywhere.

At the moment I have to zoom[1] in lots of websites while you have to zoom out others.

[1] And I strongly preferred "zoom just the text, not everything", so if there's some secret key combo to do that it'd be great. (Chrome on OS X, but I'd switch to Firefox if I know it did it.)

"Zoom text only" works in Firefox (at least under Windows). Tick "View > Zoom > Zoom Text Only". AFAIK Firefox is the only browser that supports this. Then any zooming will be text-only zooming.

Agreed about line height - I usually go for 1.3em. 1.5 looks disjointed to me, feeling almost like each line is its own sentence or bullet point.

It depends on the font and the font size. 16pt Georgia looks great at 1.5em line-height, but 16pt Helvetica looks better at 1.3em.

Agree with these points. Too large text and "double-spaced" etc. can also look like garbage. I find I can read HN very legibly though. One of the reliably better presentations of text, IMHO. Rather than tone down the blacks, there is a warm-coloured off-white background, etc to diffuse the contrast harshness.

How wide is your screen (in px)? Because the max width of my layout is around the old 760px standard. You should be able to see everything (even if, as you say, it's a bit too large).

On the other hand, it's a pretty valid critique. To be honest I forgot that there are 11 inch screens (or, screens that are larger than phones but smaller than 17inch desktop monitors). I'm not on any sort of a big screen.

And indeed, my lineheight is 1.618em (golden number in math, heh). I say 1.5 because it's a nice compromise. Perhaps 1.3 or so is better in certain circumstances.

Not width I'm talking about (that's fine), it's the height.

It's funny, because screen height shouldn't affect "readability" (other than making you scroll more often), but with these large-font blogs/sites, they give me a certain feeling of "claustrophobia" -- that I can't see a couple paragraphs' worth to come, or can't see the last couple paragraphs I read.

I think it might be that it prevents me from being able to scan content easily, the way you can on a printed page, where you can quickly skip to the part you can tell is relevant to you.

I'll take that into consideration, thanks for the feedback :)

You can use the golden ratio to find an "optimal" value for the ratio between line height, line width and font size: http://www.pearsonified.com/2011/12/golden-ratio-typography.... http://www.pearsonified.com/typography/

But of course the line height should be in relative units, not in px: http://webtypography.net/rhythm_and_proportion/vertical_moti...

Fretting over actual pixels is counter to trying to stay display-independent, as a web site ought to. The actual thing to worry about here is apparent DPI. A TV at 1080p viewed from ten feet away needs much larger text than a monitor at 1080p viewed from two feet away, and the variance in cell phone resolutions is even more drastic.

I had hopes that all these different resolutions/DPIs/sizes for screens would stop designers trying to force a pixel-perfect layout into a browser, but the end result seems to have just been "CSS media queries".

That style is most friendly to tablets. The next page is just a thumb-swipe away.

Reply on news.ycombinator.com