12 ms·
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.
by mcargian 14y ago
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.
- jchung 14y agoI didn't have any trouble reading it. Felt relatively natural to me, actually.
- kjsudi 14y agoMAYBE but it is much easier with the above
- voidlogic 14y agoI agree, I changed/fixed it in firebug before continuing reading...
- tangue 14y agoThe 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#specify http://juicystudio.com/services/luminositycontrastratio.php#...
- flogic 14y agoNew rule... Don't use large blocks of colors like orange. That's just plain distracting.
- Stratoscope 14y agoYou 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.
- infinity 14y agoThe "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/ http://www.w3.org/TR/WCAG/ Here is a detailed explanation: http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contr...
- slurgfest 14y agoI noticed the same thing. Since other people are disagreeing, this may depend on platform or device
- FooBarWidget 14y agoWhich 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.
- arethuza 14y agoI'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.
- FuriousFingers 14y agoFWIW, 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.
- 3pt14159 14y agoUbuntu Chrome & Firefox On MacbookAir screen: horrible on dell side monitor: amazing.
- edanm 14y agoI'm on a MacbookAir(OSX) running Chrome, looks fine to me.
- cowsaysoink 14y agoThat's because you have OSX font rendering, here is what it looks like on ubuntu: http://i.imgur.com/YysUNuX.png http://i.imgur.com/YysUNuX.png I'd hate to see what it looks like on windows (especially chrome which makes fonts even thinner).
- 14y ago
- arrrg 14y agoThe 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.
- speeder 14y agoWhy then, people insist in using those light fonts? Yes, it looks "clean" and "modern" but they are too hard to read!
- arrrg 14y agoBecause 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).
- infinity 14y agoI have been told that it looks "expensive".
- DeepDuh 14y agoMaybe 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.
- thoughtcriminal 14y agoThe "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.
- h2s 14y ago1. Open blog post about readability. 2. Notice that text is unreadable without zooming in. 3. Close blog post about readability.
- nimbupani 14y agoThanks for the feedback. I just fixed it.
- evmar 14y agoIt's still nearly unreadable for me. http://i.imgur.com/Xu13n7j.png 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.
- Tomdarkness 14y agoEven in your screenshot it looks perfectly readable for me.
- lowboy 14y agoBut 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.
- arrrg 14y agoNah, 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.
- lowboy 14y agoI 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.
- woj 14y agofont-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?
- acqq 14y agoI 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.
- jakub_g 14y agoThe 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/ https://addons.mozilla.org/en-US/firefox/addon/stylish/
- woj 14y agoThanks Jakub. Just what I was looking for.
- lmm 14y agoNot a bookmarklet, but I highly recommend http://evernote.com/clearly/ http://evernote.com/clearly/ for the general case of this problem.
- benaiah 14y agoThis 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.
- ZeroGravitas 14y agoDoes 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?
- coldtea 14y agoThe 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.