4 ms·

The author's focus on just 2 things, contrast and font, are not only overly simplistic, but are not even universally true for all people. For my eyes, reading h

The author's focus on just 2 things, contrast and font, are not only overly simplistic, but are not even universally true for all people. For my eyes, reading high contrast black on white all day causes eye fatigue, while HN level of contrast (and the contrast on my site) causes less fatigue. I have no idea what percentage of people feel that way, but clearly some do. I am a huge proponent of designing web sites for readability, and discuss my thoughts on optimizing site design for reading here: http://www.filterjoe.com/2009/03/23/site-design-for-reading/ http://www.filterjoe.com/2009/03/23/site-design-for-reading/ So many sites have too much clutter or layout problems that using Readable or Readability has become a requirement for me. For anyone not sure which to choose, I reviewed the latest versions of them here: http://www.filterjoe.com/2011/04/11/web-page-reformatting-services-readable-and-readability/ http://www.filterjoe.com/2011/04/11/web-page-reformatting-se... I'd be curious for thoughts from HN readers on my own site's readability. It's what I optimized for, though I'm always open to improvement. EDIT: reorganized, added eye fatigue

Terretta 15y ago
I'd be curious for thoughts from HN readers on my own site's readability. Looking at: http://www.filterjoe.com/2009/03/23/site-design-for-reading/ http://www.filterjoe.com/2009/03/23/site-design-for-reading/ I find the comments and list items (within an item) need more line height for comfortable web reading. Body paragraph line height seems fine.
- FilterJoe 15y ago
  Both font size and line height are smaller for comments and list items. Are you saying you prefer more line height (without font size change)? Or do you generally prefer both line height and font size in lists/comments to be identical to body text? Or perhaps something half way in between, with line height just nudged up a little but not as much as body text? I really appreciate the feedback - thanks.
  - Terretta 15y ago
    Personally, I'd prefer the line height to be the same for all the mentioned items for a consistent vertical rhythm. In any case, I know the line height was small enough that I noticed list items and comments felt cramped even before I saw you'd asked for feedback. In this example, regardless of font size or face, the vertical rhythm follows the same beat: http://www.alistapart.com/d/settingtypeontheweb/example.html http://www.alistapart.com/d/settingtypeontheweb/example.html Another example (using third step headings for section spacing) showing smaller font on the same baseline grid: http://www.thesheep.co.uk/examples/vertical-rhythm/ http://www.thesheep.co.uk/examples/vertical-rhythm/ A calculator to help make the CSS: http://topfunky.com/baseline-rhythm-calculator/ http://topfunky.com/baseline-rhythm-calculator/
    - FilterJoe 15y ago
      Just made some changes to line height that moved most of the way in the direction you suggested. You're right - it looks better. Thanks!
      - Terretta 15y ago
        Just visited, and I no longer get that "lines too close" feeling, so I'd say whatever you did, worked great.
wingo 15y ago
I like your site's readability. I also like the body font. It might be my default text font, dunno. But it seems that the lines of <li> elements are oddly compressed.
- FilterJoe 15y ago
  Thanks. Terreta mentioned the same thing about compressed line heights on lists so I just changed it. What do you think now?
dredmorbius 15y ago
The black-on-grey is hard to read for me, especially at default zoom. I'm bumped up 4 steps (just checked) which gives a bolder text. Garrett Hardin (the Lifeboat Ethics / Tragedy of the Commons guy) actually had several of his books published with a deep brown ink on cream-colored paper, for maximum readability (c.f. _Stalking the Wild Taboo_ referenced here: http://books.google.com/books?id=jT-pl1LQTIIC&lpg=PA101&ots=lGfwYRCoIf&dq=garrett%20hardin%20ink%20paper%20color&pg=PA101#v=onepage&q&f=true http://books.google.com/books?id=jT-pl1LQTIIC&lpg=PA101&... ) Note that that particular reviewer didn't care for the effect. HN _does_ have a simple layout that's highly amenable to resizing, to its credit.
- FilterJoe 15y ago
  You mention black-on-grey. Are you referring to HN or my site, www.filterjoe.com? My site is close to the color of a faded paperback novel, a yellow/beige. HN looks halfway between beige and grey on my monitor - so I'm guessing you're referring to HN. I've noticed that the higher the resolution is on a monitor, the easier it is to read lower contrast text. I've noticed large color variance on different monitors. When I first started my site I went for very low contrast link color with no underlines (trying to reduce links as a source of distraction) but some people on some monitors couldn't see the links at all. So I put back in the underlines.
  - dredmorbius 15y ago
    I meant HN, sorry about the ambiguity. And yes to color variance on monitors. Early-gen laptop screens were horrible for accurately rendering subtle shading differences. My stylesheet explicitly highlights links, and at least for a while there would add a yellow background on mouse hover, bolding on click. This was really useful especially for distinguishing closely-placed links, or links partially obscured by other page content.

Terretta 15y ago

I'd be curious for thoughts from HN readers on my own site's readability. Looking at: http://www.filterjoe.com/2009/03/23/site-design-for-reading/ http://www.filterjoe.com/2009/03/23/site-design-for-reading/ I find the comments and list items (within an item) need more line height for comfortable web reading. Body paragraph line height seems fine.

FilterJoe 15y ago
Both font size and line height are smaller for comments and list items. Are you saying you prefer more line height (without font size change)? Or do you generally prefer both line height and font size in lists/comments to be identical to body text? Or perhaps something half way in between, with line height just nudged up a little but not as much as body text? I really appreciate the feedback - thanks.
- Terretta 15y ago
  Personally, I'd prefer the line height to be the same for all the mentioned items for a consistent vertical rhythm. In any case, I know the line height was small enough that I noticed list items and comments felt cramped even before I saw you'd asked for feedback. In this example, regardless of font size or face, the vertical rhythm follows the same beat: http://www.alistapart.com/d/settingtypeontheweb/example.html http://www.alistapart.com/d/settingtypeontheweb/example.html Another example (using third step headings for section spacing) showing smaller font on the same baseline grid: http://www.thesheep.co.uk/examples/vertical-rhythm/ http://www.thesheep.co.uk/examples/vertical-rhythm/ A calculator to help make the CSS: http://topfunky.com/baseline-rhythm-calculator/ http://topfunky.com/baseline-rhythm-calculator/
  - FilterJoe 15y ago
    Just made some changes to line height that moved most of the way in the direction you suggested. You're right - it looks better. Thanks!
    - Terretta 15y ago
      Just visited, and I no longer get that "lines too close" feeling, so I'd say whatever you did, worked great.

wingo 15y ago

I like your site's readability. I also like the body font. It might be my default text font, dunno. But it seems that the lines of <li> elements are oddly compressed.

FilterJoe 15y ago
Thanks. Terreta mentioned the same thing about compressed line heights on lists so I just changed it. What do you think now?

dredmorbius 15y ago

The black-on-grey is hard to read for me, especially at default zoom. I'm bumped up 4 steps (just checked) which gives a bolder text. Garrett Hardin (the Lifeboat Ethics / Tragedy of the Commons guy) actually had several of his books published with a deep brown ink on cream-colored paper, for maximum readability (c.f. _Stalking the Wild Taboo_ referenced here: http://books.google.com/books?id=jT-pl1LQTIIC&lpg=PA101&ots=lGfwYRCoIf&dq=garrett%20hardin%20ink%20paper%20color&pg=PA101#v=onepage&q&f=true http://books.google.com/books?id=jT-pl1LQTIIC&lpg=PA101&... ) Note that that particular reviewer didn't care for the effect. HN _does_ have a simple layout that's highly amenable to resizing, to its credit.

FilterJoe 15y ago
You mention black-on-grey. Are you referring to HN or my site, www.filterjoe.com? My site is close to the color of a faded paperback novel, a yellow/beige. HN looks halfway between beige and grey on my monitor - so I'm guessing you're referring to HN. I've noticed that the higher the resolution is on a monitor, the easier it is to read lower contrast text. I've noticed large color variance on different monitors. When I first started my site I went for very low contrast link color with no underlines (trying to reduce links as a source of distraction) but some people on some monitors couldn't see the links at all. So I put back in the underlines.
- dredmorbius 15y ago
  I meant HN, sorry about the ambiguity. And yes to color variance on monitors. Early-gen laptop screens were horrible for accurately rendering subtle shading differences. My stylesheet explicitly highlights links, and at least for a while there would add a yellow background on mouse hover, bolding on click. This was really useful especially for distinguishing closely-placed links, or links partially obscured by other page content.