Hacker News Reader

Comment by mcargian | Hacker News Reader

I think it's odd that a post about readability has grey text (#686868) on a white background. Next to the black screen grabs the text is very light.

View on HN

The contrast ratio is 5.57:1 well above the 4:5:1 requirement. It seems that they're using Adobe Clean Light ( Helvetica Neue Light as a fallback). This must be the source of your readibility problem. Depending on browser/platform font-weight: 300 can be a huge problem.

[1] http://juicystudio.com/services/luminositycontrastratio.php#...

New rule... Don't use large blocks of colors like orange. That's just plain distracting.

You hit the nail on the head: The font-weight:300 is killing the readability in Chrome on Windows. When I toggle it off the text becomes readable.

I don't know what this 4:5:1 requirement is, but it also looks better to my eyes with the color:#444 toggled off so I get black text. But it's not as huge a difference as turning off the width.

The "4.5:1 requirement" can be found in the Web Content Accessibility Guidelines (WCAG) 2.0, part of a series of Web accessibility guidelines published by the W3C's Web Accessibility Initiative:

http://www.w3.org/TR/WCAG/

Here is a detailed explanation:

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contr...

    1. Open blog post about readability.  
    2. Notice that text is unreadable without zooming in.
    3. Close blog post about readability.

The font is the issue, not so much the color. Light fonts as the bread font are just a bad idea.

Not that it matters even a little bit in this case. It's an irrelevant diversion of the worst kind. It's ignorant and foolish, something for small minds.

Why then, people insist in using those light fonts? Yes, it looks "clean" and "modern" but they are too hard to read!

Because many people who design webpages aren’t very great when it comes to typography?

It’s just a bad idea to use those light fonts for anything but headlines or other kinds of large type. For the headline that light font is absolutely ok. For the body text it’s just embarrassing (especially since this is from Adobe).

I have to say, though, this blog is written by those at Adobe who develop new standards (for HTML/CSS/JS), so probably very technical people who are more often than not not very knowledgeable about design – that is to say, those involved here do not necessarily have a strong design focus (and neither do they necessarily have to have that).

I have been told that it looks "expensive".

Maybe the one who decided it has an Apple device with 'retina' screen? I was reading it on an rMBP and the font struck me as very pleasant, hence I couldn't understand the fuss here first. Helvetica Neue Light is quite popular on these newer Apple devices, it's good to know that it is a bad idea though.

The "bread font"... is that a design term? I like it, and it intuitively makes sense. I'm just wondering if that's a common term or if bread is interchangeable with potato, pasta or some other starchy food that fills you up.

I've definitely heard it before, though "body font" seems to be much more prevalent. It's probably a literal translation from a continental Germanic language, e.g. Dutch has "broodtekst" though the word refers to the actual body copy, not the font. German has "Bröttext".

http://de.wikipedia.org/wiki/Brotschrift

Haha, no, body text is them common English expression. I just translated “Brotschrift” literally to English and somehow convinced myself that it’s an actual English expression.

Lets start using it. I'm going to start calling it the "bread font" anyway. Maybe it'll catch on ;)

This is probably due at least in part to the Mac's text rendering, which is considerably thicker than Windows. It's pretty common to find text that is ridiculously thin, mostly on designer's websites. I'm no devotee of Windows or Mac (though I don't own a Mac yet), but it seems pretty clear that the design crowd needs to start at least spinning up a simple Windows (or even Linux - Ubuntu's text rendering is in between OS X's and Windows') VM and make sure that their text is readable on the platforms that nearly everyone uses. Even Android and (I believe, though I wouldn't be surprised if I was wrong) iOS don't render text as thickly as OS X. Failing to optimize for different text renderings and making your text extremely thin alienates both the mobile market and 95% of the PC market.

Also, Chrome has terrible, evil, nasty text rendering in general, at least on Windows. I prefer it to IE10, but the web does look much better in IE, which actually has decent text rendering.

Which device are you using and with what light settings? I've received one report from a user saying that the text on my site is "unreadable" due to the contrast but nobody inside my organization can see what the problem is, so I'm interested in how other people are experiencing such problems.

I'm using a 17" Dell M6500 running Windows 7 and the text is unpleasant to unread in all browsers I have installed (Firefox 18.0.2, Chrome 24.0.1312.57 and even IE 9).

It looks quite a bit better on my external monitor - which is 1600x900 rather than the 1900x1200 of my laptop display.

FWIW, the text looks fantastic on a retina ipad (on safari). It could do with being a bit darker to increase contrast, but still it looked great and was easy to read. So screen resolution seems to make a difference.

Ubuntu Chrome & Firefox On MacbookAir screen: horrible on dell side monitor: amazing.

I'm on a MacbookAir(OSX) running Chrome, looks fine to me.

That's because you have OSX font rendering, here is what it looks like on ubuntu: http://i.imgur.com/YysUNuX.png

I'd hate to see what it looks like on windows (especially chrome which makes fonts even thinner).

Chrome on Win 7: http://screencast.com/t/S6OTjtWpKI

Same on iOS for me. Totally unreadable.

I agree, I changed/fixed it in firebug before continuing reading...

I didn't have any trouble reading it. Felt relatively natural to me, actually.

Does this algorithm actually make things more readable? Or does it just make them look nicer. Not that there's anything wrong with that but sometimes the two goals clash, like with the text in this article.

And is it me or is the use of a series of single characters rather than a length of actual text a really weird choice?

Thanks for the feedback. I just fixed it.

It's still nearly unreadable for me.

http://i.imgur.com/Xu13n7j.png

The typophiles here will surely yell at me for getting the terminology wrong, but my experience is that fonts are heavier on OS X and whenever I see a site with whisper-thin text like the above I suspect it was tested on OS X only.

Edit: removing the font-weight CSS attribute makes the page legible. The issue is that you specified a font-weight under 400 ("normal"), and different font engines snap in different ways.

Even in your screenshot it looks perfectly readable for me.

But I bet that the text you're looking at right now on HN is easier to read than the screenshot. Now consider that people might have dense screens, or sit further away from the screen than you do, or have poor eyesight.

Nah, it’s still too light on OS X with Safari. And on a Retina screen, no less. If this would work anywhere, it would work on that combination of screen, OS and browser. But no, it does not.

It’s just bad design.

I can read it comfortably if I lean in, but I'd rather not. The text here on HN is smaller than your site, and it's perfectly readable from my normal position.

I noticed the same thing. Since other people are disagreeing, this may depend on platform or device

The real problem is that the font is too small.

The gray on white is actually ok. Even better would have been black on light gray. Too much contrast is a pain point when reading text with a backlight.

font-weight is indeed the main problem, but regardless I hate this new trend of not making text black. What would a bookmarklet look like to set the body color to black?

I use Opera: it can switch off all styles, leaving only defaults. It does wonders with a lot of "only the author loves that formatting" pages.

The trends to make thin grey text on nearly-gray background are driving me nuts also. I have two global Stylish [0] styles in my Firefox and I toggle them when I need to read something on a page like this:

1) Enable Georgia font instead of the author's favourite thin font:

html body, html div, html span, html p {font-family:Georgia !important;}

2) Make everything black (except links):

html * {color:black !important;} a {text-decoration:underline !important; color:#00a !important;}

Those are not perfect but they work for me in 95% of the cases. The first rule is a not a catch-all to not put Georgia in code/pre/textareas etc. `html` is necessary not to affect Firefox's (browser) styling.

[0] https://addons.mozilla.org/en-US/firefox/addon/stylish/

Thanks Jakub. Just what I was looking for.

Not a bookmarklet, but I highly recommend http://evernote.com/clearly/ for the general case of this problem.

Reply on news.ycombinator.com