8 ms·

Webdesigners: please make text readable

467 points by bmaeser 15y ago

losvedir 15y ago
Beautiful site. HN is called out as a site with poor contrast (the text in a self post). I do find myself frequently tilting my monitor back to improve the contrast of posts here, but I think only on the downvoted ones, which, I suppose, is the point. But now, looking up at the now-clicked-on story link, I see that visited links have rather low contrast, too.
- scott_s 15y ago
  pg has said that self-posts have low contrast font to discourage people from using HN as their blog. So, similar reasoning to < 0 posts. But I also have difficulty finding stories I already read on the front page.
alexfarran 15y ago
Well maybe. But at least I can run sites with low contrast through Readability. No such luck with this Heath Robinson powerpoint-a-like they've built.
arkitaip 15y ago
I've gotten into the habit of modifying the CSS of web sites I frequent to improve the readability and usability in general. I do this using a plugin for the web browser. For instance, this is how the HN home page looks like: http://i.imgur.com/WaTQq.jpg http://i.imgur.com/WaTQq.jpg This is the most perfect design because it's tailored to my needs. Here's how YouTube looks like: http://i.imgur.com/eZAsx.jpg http://i.imgur.com/eZAsx.jpg Reddit: http://i.imgur.com/rnaxb.jpg http://i.imgur.com/rnaxb.jpg
- chexton 15y ago
  YouTube is very clean. I don't suppose you would share your CSS? If not, I'll do it myself...but it's always nice not to re-invent the wheel.
  - arkitaip 15y ago
    It would be my pleasure: https://gist.github.com/1106842 https://gist.github.com/1106842 This CSS fix for YouTube removes a lot of functionality like the search form but since I can search youtube using extensions and the browser address field this isn't a huge issue.
    - chexton 15y ago
      Thank you. I agree re: the search bar; not such a big deal. YouTube will be much nicer now.
- hammock 15y ago
  Seems like you might just have poor eyesight. Why not simply Ctrl-scrollwheel the text larger instead of going through the trouble to alter the CSS?
  - arkitaip 15y ago
    There's nothing wrong with my eye sight. I don't mind wasting some vertical space to get better readability. Modifying the css is very easy and doesn't take much time.
- dredmorbius 15y ago
  I'm a big fan of userContent.css myself. One of the big disappointments I've had with Chrome so far is that there's no way to set default font sizes (within the browser UI itself). I suspect there may be configuration settings .... hrm .... no "about:config", damn. I'll try the userContent.css trick next. I've long forced all sites to use both my preferred fonts and sizes. Most comply reasonably well, though some (overly specified) designs break. And that's for a guy who's been surfing in his 20s-40s, with good vision, though I'm just starting to feel the need for reading glasses. My parents are in their late 70s, Dad's got glaucoma. I've had to push up the contrast and zoom settings in his Mac account, for which he's grateful (the Web is one of his primary outlets / connections to the world now). Sites designed on large, high-contrast Mac monitors, viewed on smaller, lower contrast devices, suffer the most. HN definitely could use a contrast improvement (I'm viewing zoomed up a couple of clicks right now, couldn't say just how much). The real key isn't just sizing fonts (and setting contrast) appropriately, but to design pages which resize and rescale gracefully. I can live with the first if the second also occurs. Far too often it doesn't.
cryptoz 15y ago
The text on that site is so damn large it's actually hard to read.
- tintin 15y ago
  Exactly. Some used fonts are also very narrow and therefore hard to read. But ofcourse they are called Contrast Rebellion. Not Readable Rebellion.
- RegEx 15y ago
  I rarely complain about design, but the drastic color changes between the sections and the large capital letters actually gave me a slight headache.
DuqE 15y ago
Interesting you say about high contrast, all the examples are black on white. Do this mean all content related websites should be white backgrounds and black text?
- absentbird 15y ago
  I think the reason they used so many colors in their bombastic website is to demonstrate non-typical contrast solutions.
parfe 15y ago
In Fireforx: View -> Page Style -> No Style.
- aw3c2 15y ago
  In Opera (depending how you designed yours): Page -> Style -> Accessibility Layout.
  - rplnt 15y ago
    Or Shift + G to completly disable CSS. You can of course create shortcuts for any of those styles in Page -> Style: Select user CSS file, # | Deselect user CSS file, # where # is a number of a style in styles/user/ (ls -U, starting from zero).
tszming 15y ago
I think what we need is a balance. If everything in your website is in high contrast, big font-size, black & white - it is also a problem. But I agree the idea behind the "Contrast Rebellion" - the accessibility of web content.
aw3c2 15y ago
tldr: Do not waste your time on this. ----- Webdesigners: please make sites usable. The non-javascript fallback display is somewhat broken but at least it works. With javascript enabled the site is stuck on the second slide (Opera 11.50). And then there is the part where the site says "Content ≠ Illustration". Well, yeah, you first. And by the way, centered text is hard to read. And I can't use my browser's back button nor does the site provide such a function. And dear god, it gets even better on this slide: Let's put an end to this low-contrast, light gray nonsense and use typography for its purpose: MAKING TEXT READABLE. AGREE? LET'S CHANGE THE WORLD TOGETHER! Never heard about all uppercase text being hard to read? This might just be an elaborate joke or sarcasm, if so, I do not get it.
- hammock 15y ago
  I also don't understand why people feel the need to use giant text everywhere- that's just as hard/annoying to read as tiny text. I'm with you on all points.
- ZoFreX 15y ago
  I think that, despite making some mistakes of its own, the content of the article is still valid and raises some important points. I did find it irritating that they used small, light coloured text on a dark background in places, as I find this very difficult to read (and am hardly alone in that). However, I think there are bigger fish to fry than quibbles like that. On any given day, there's at least one article on the HN front page that I actually cannot easily read, and frequently it's black text on a white background, plenty of contrast, just far far too thin on my display. I suspect the significant difference between font weights in browsers between OS X and everything else may be to blame.
- solipsist 15y ago
  Whenever I see a piece like this on Hacker News anymore (one that is going to provoke discussion), I am expecting a comment like this one. One that is equally as provocative in itself and taking the opposite stance. People upvote these comments and they tend to make it to the top. This says something about HN. What's wrong with comments like these ones is that they are being overly aggressive and argumentative for the sake of being overly aggressive and argumentative. Sure, being critical of others' opinions is a good habit to have, but disrespect is not. In this comment, you tell the other site users to not waste your time on this and that this might just be an elaborate joke or sarcasm. That's pretty harsh for something that someone wrapped up together in their spare time and evidently put effort into it. Whether or not you agree, at least try to find the light in the piece of the work. I know that a lot of people would be more inclined to read and accept an answer if you made it into less of a one-sided argument. Acknowledging both side and taking time to point out the strengths before the weaknesses go a long way and add to the overall politeness of the comment.
duopixel 15y ago
There's a second problem that's popping up lately: font-face on the body text. System fonts have been painstakingly hinted to make them more readable on-screen. Most web-embeddable fonts don't have appropriate hinting or are just plain bad choices for body text. Hoefler & Frere Jones (one of the most respected foundries around) haven't released embeddable fonts because they've been working on it for years. The result is fuzzy text at small/medium text sizes. It's huge pain to read. It seems some designers forget that good typography is concerned with readability too.
- arkitaip 15y ago
  Core fonts don't necessarily equal good web typography. Arial, for instance, is pretty mediocre for the web. You could say the same about Helvetica (it is still better designed than Arial). As for web fonts, Adobe and other foundries have large collections of gorgeous fonts specifically designed for the web.
  - duopixel 15y ago
    Helvetica on Windows is terrible, see https://github.com/paulirish/html5-boilerplate/issues/42 https://github.com/paulirish/html5-boilerplate/issues/42. This is because Helvetica comes from Linotype instead of Microsoft, and they care more about print than screens. Arial might not be a good typeface, but as a font it's pretty damn well hinted for screens. Except for Minion Web and Myriad, I haven't seen a really legible web font from Adobe that is usable at 11-15px. Heck, even Typekit uses Georgia/Arial for long copy.
    - cpeterso 15y ago
      Because Helvetica looks so bad on Windows, a good compromise for a CSS font stack is something like: font-family: "Helvetica Neue",Arial,sans-serif; Helvetica Neue (a minor reworking of Helvetica from 1983) is a Mac system font, but few Windows PCs have it. So Mac users get nice fonts and everyone else gets Arial. Many CSS font stacks list Helvetica after Arial, but that is silly because nearly all computers (like 98%) have Arial, so Helvetica will never be selected. :(
Robin_Message 15y ago
Their script went wrong towards the end, with the following text on the dark gray background with the fist on it: "Usability expert Jakob Nielsen has shown many, many times that reading on the computer screen is harder than reading printed material even without making the font illegible. And mobile is worse. .. and many have written about why gray text is a crime here, here, here and here... So what we're trying to say is..." which did rather undermine their point.
ed209 15y ago
It's not just contrast that makes text legible or not, there are many other factors: - Width of the text area - Line spacing - Font-size - Correct use of headings, paragraphs, emphasis etc ... Actually low contrast is a great tool to have. You can't have high contrast all over the page otherwise various elements will be shouting for your attention. Controlling the volume of your copy is just as important as the factors I mentioned above.
jsavimbi 15y ago
Do they print books with black pages and white text? No, they do not.
- Ronkdar 15y ago
  With good reason. If I read white on black for more than 5 minutes, whenever I look away there are negative lines floating across my vision.
  - 5l 15y ago
    I don't agree that it's good reasoning, and indeed most (or all?) early monitors used to be green/amber/white-on-black because it's easier on the eyes. It's not a common problem I know but I have countless floaters swooshing around in my vision so for me staring at a mostly white screen all day is absolutely horrible and a great way to give myself eye strain.
- samlevine 15y ago
  No, because it would be a waste of ink. Fortunately monitors don't have this problem.
- burgerbrain 15y ago
  If they wanted to, how would they?
bigohms 15y ago
Propaganda by photoshop clone developers who don't want to design opacity layers into their interfaces. In all seriousness, if everything was high contrast, everything would be SCREAMING AT YOU FOR ATTENTION. Webdesigners: use your personal judgement when identifying what should be high contrast (higher visual recognition priority) and what should be lower contrast (lower visual recognition priority) and all will be well. FYI: the HN example on your site actually makes perfect sense. The high contrast content is almost always the thing I consider most important. Index: Titles of threads, Subpages: Comments.
- tripzilch 15y ago
  > if everything was high contrast, everything would be SCREAMING AT YOU FOR ATTENTION Simply not true. There's many more factors besides contrast that determine attention focus. See this excellent series on gestalt principles of design: http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php http://www.andyrutledge.com/gestalt-principles-1-figure-grou... (it's five parts you need to click to get to the other 4) Also see http://24ways.org/2007/typesetting-tables http://24ways.org/2007/typesetting-tables which shows a very nice way of adding structure to a table using contrast, instead of making everything scream for attention equally. (Additionally, the site used a different layout when this article was written in 2007, and currently it seems 24ways is a good example of low-contrast crappy readability :) )
sycren 15y ago
Any idea how this site was made? Was some kind of framework used or was it all hard coded?
Jabbles 15y ago
It's amusing that a website arguing for readability makes extensive use of all-caps, well known to be difficult to read. http://en.wikipedia.org/wiki/All_caps#Readability http://en.wikipedia.org/wiki/All_caps#Readability
- ugh 15y ago
  No it’s not. There is nothing whatsoever wrong with sparingly using all-caps in headlines. This page certainly does not make extensive use of all-caps.
pilif 15y ago
Even worse (or probably related) than the general contrast problem is the absolutely crazy suggestion to use -webkit-font-smoothing: antialiased; in your CSS (http://maxvoltar.com/archive/-webkit-font-smoothing http://maxvoltar.com/archive/-webkit-font-smoothing) I've yet to come across an instance where antialiased is better than using subpixel hinting. In addition, I think it's crazy that the browser would allow a site designer to alter such a highly OS- or even machine-specific setting. Heck - there's even special tuning wizards in most OSes to configure the subpixel hinting perfectly for a specific monitor. Dear designer, turning that off for everybody just because you didn't manage to configure it correctly on your machine is egoistic and, IMHO, plain stupid as you make everyone suffer for a thing you should fix at your end. /endrant
- arnemart 15y ago
  Yes, a thousand times yes. Even worse are those who use -webkit-text-stroke: 1px transparent; which absolutely _kills_ scrolling performance.
  - deleted 15y ago
    [deleted]
- flyosity 15y ago
  Totally, absolutely agree. Apple's website actually forces antialiased text through that CSS rule. I wrote a userstyle to force it back to how it should look.
- erikpukinskis 15y ago
  Yeah, well... you know... that's just, like, your opinion, man. I think subpixel hinting looks terrible. I think letterforms are really interesting and beautiful and I actually want to see them when I use the web. That said, I do agree that web sites shouldn't override the browser settings for body text. But turning off hinting of titles is probably reasonable.
  - Torn 15y ago
Jem 15y ago
I find it easier to read some of the low contrast sites than the linked - too MUCH contrast is often worse than too little (for me).
Meai 15y ago
Dear webdesigners: please don't use huge images and CSS3 magic that makes your site ultra slow to scroll.
FilterJoe 15y ago
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/
rplnt 15y ago
You should not forget about compatibility, i.e. make sure the site works across various browsers and platforms. Why I'm talking about this? I can't use the lt/gt arrows to view more examples. The compatibility problem translates as an usability problem to the user. edit: Also, the tooltip text went missing after some actions/time.
petercooper 15y ago
There was an article that did well on Hacker News a few months ago that said while high contrast is good, it shouldn't be 100% contrast. Instead, you should very slightly hint toward the theme color. So if you have a bluish background, your text could be #112 or something. I've followed the advice since and it definitely makes things easier on the eye vs #000 everywhere.
tripzilch 15y ago
http://timecube.com/ http://timecube.com/ - high contrast? check. - giant letters? check. - readable? ummmm ... That said, it's a good suggestion, but the giant letters make this site hard to read on my 1024x600 netbook screen. And they did mention readability on smaller screens.
owenmarshall 15y ago
>designers need to think of elderly users with bad vision There are plenty of us young folks with terrible low-contrast vision, too :) I've personally got HN turned up to 175% zoom, and even that's a bit on the low side if I want to read the text of self-posts. IMO, this is an important distinction -- I once heard a friend indicate that, because their app was targeted at people aged ~20-30, accessibility wasn't an important focus. I thought that was a very short sighted decision.
- cpeterso 15y ago
  A short sighted decision, indeed! :)
DrummerHead 15y ago
I Find it strange they're only talking about contrast and not line-height. That's the real dealbreaker for me. I am personally constantly changing line-height on other websites much more than type colour.
RandallBrown 15y ago
Why don't they show some high contrast designs that aren't just black text on a white background? Some of the low contrast examples they gave were low contrast to draw attention away from them, not just for aesthetics. This guy is overreacting.
- int3rnaut 15y ago
  Can you think of any well done websites with high contrast designs that aren't just black text on a white background? I was thinking the same thing but I couldn't think of any good examples off the top of my head--and to me that's a bit of a let down because all this time I've thought the text and style you use on your website can be an identifier of your brand or website. I mean if I could clearly read a site written in dark purple or something, I'd remember that.
ilianh 15y ago
Webdesigners: please make the back button work on scroll sites.
Omnipresent 15y ago
So glad that Hacker News is on the list. I thought I was the only one who thought that comments are unreadable.
- cormullion 15y ago
  You're not. I confess I made a Safari extension just to be able to read those comments that are greyed-out cos they're not interesting enough (and it was a nice test case to start with).
- lojack 15y ago
  I always thought the Hacker News ones were low contrast by design. Bad comments progressively get more difficult to read by design.
MetaMan 15y ago
I can't (read won't) take these guys seriously because they commit one of my biggest design 'sins". They use tiny typefaces in places which can barely be read (at least by me) on a standard 13 to 14 inch laptop screen. you know what they say - "People in glass houses should not throw stones"!
- tsuyoshi 15y ago
  Yeah, I have a minimum font size set on my browser (necessary because my eyesight is bad and virtually every site wants to use font sizes that I simply can't read) and this site looks like crap as a result.
sequoia 15y ago
Redux of this comment thread: "But it's not perfect!" enumerate minor flaws. sneer. Sometimes it's worthwhile to tackle one issue at a time, especially if it's something many people (designers) a) don't care about b) don't want to do c) possibly don't understand. So yes, perhaps they fall down on graceful degradation / progressive enhancement, but to be fair the target audience is exclusively web designers. In that respect they are playing well to the audience, which in turn makes it more likely that they'll get their point across. As for "large text is too hard to read" & "I can't read centered text:" seriously? Deep breaths, everyone. ;)
kgthegreat 15y ago
I like the site.
bugsy 15y ago
That's all fine but doesn't go far enough, focusing only on contrast problems (related problems to contrast are using shadow engraving style on small fonts and clashing foreground/background color schemes). A really big problem on many sites is the length of lines. It is very difficult to read text that has too many words per line. A recent abysmal nightmare is Apple's decision to make Mail.app (and other apps) in 10.7 oriented towards full screen as if it was running on vertically oriented mobile, but on large wide screens. Small font sizes here and we have scan lines with up to 30-40 words in some cases, which is complete insanity. Count the words per line. If the average is much more than 12, either your columns are too wide or your fonts are too small. Here on HN is a typical example with around 24 words per line on top level articles. Bad design, but very typical on the web. However, it is at least manageable, many sites are far worse. HTML Solution? Some advocate that columns be around 30em width: http://www.maxdesign.com.au/articles/em/ http://www.maxdesign.com.au/articles/em/
- markahern 15y ago
  Solution to mail.app problem: either make the middle column bigger, or don't use it in full screen.
pyninja 15y ago
Surprised he didn't link to Reichenstein's essay on the topic: http://www.informationarchitects.jp/en/100E2R http://www.informationarchitects.jp/en/100E2R
blahedo 15y ago
It started out promising. Then the author states, apparently without irony, that "aesthetics are important but aren't the ultimate goal of design", making particular reference to people reading with tiny screens, when his/her own site is quite unusable on a small screen! I normally keep my browser windows at half the width of my screen, around 700-800 pixels wide (give or take). Just looking at the "page" where the author discusses aesthetics, if you've got a narrow window, a few letters and words are cut off on the left, and while you do get a scrollbar to move to the right, everything to the right of the original view is plain white. (On my screen, the cutoff actually runs right through the "reading tiny screens" text and icon, for added irony.)
armandososa 15y ago
Dude: get glasses. I not even squinted to read the text on his examples. I mean, contrast is important but the guy needs glasses. Or a readability bookmarklet.
redleaf 15y ago
Nice site. Years ago, we used to determine the luminosity of a colour to determine whether we should use white text or black text. Now, there are calculators to help determine whether a pair of colours contrast each other effectively. Here is one that kind of works: http://www.colorsontheweb.com/colorcontrast.asp http://www.colorsontheweb.com/colorcontrast.asp
oneplusone 15y ago
There is such a thing as too much contrast when it comes to text. When typesetting it is advisable to never use pure black for text because it simmers on the page. I normally design the base text on the page to have between 15% and 30% brightness because it makes it more pleasant to read. There is a place for light gray text. It is all about maintaining a hierarchy of information. Some text should be hidden away and harder to read because it is less important than the copy around it.
sbochins 15y ago
I'm guessing the reason this got up voted so much was because this site was featured as one of the offenders. It is pretty hard to read the text on a sunny day on my phone. Maybe the revolution could start with HN?
trustfundbaby 15y ago
So glad you use Reeder in your example ... I bought the Reeder app on Sunday and the low contrast thing really put me off (among other things). The app looks really sexy, but sitting there reading tons of articles when you're struggling with the low contrast headlines, can get tiring.
andyana 15y ago
It looks really nice, but it didn't render properly in Opera with zoom.
foz 15y ago
I followed the links in the credits to the two designers who made this site (http://richard.gazdik.name/ http://richard.gazdik.name/ and http://www.kirowski.com http://www.kirowski.com)... to my surprise, both sites were using tiny low-contrast text. Huh.
huhtenberg 15y ago
One man's poor contrast is another man's uncalibrated monitor. :)
- mannicken 15y ago
  Put black text on black background and no calibration in the world will help you read it ;-)
mannicken 15y ago
http://andyrutledge.com/images09/newsSite/images/iphone_nyt_new.jpg http://andyrutledge.com/images09/newsSite/images/iphone_nyt_... -- in here lower-contrast is used properly, I think. Low-contrast allowed to hide the low-priority details allowing the brain to quickly navigate through important, high-contrast titles. Not all text is important.
fferen 15y ago
On a side note, it's ironic that mobile versions of sites are usually far less readable than regular versions, at least on my Droid X. On a regular page, I can set the zoomed-in text size to large in the settings. Mobile sites tend to make text tiny and un-zoomable, decreasing usability, which defeats the whole purpose of a mobile site!
shadowhillway 15y ago
OmniWeb's site preferences feature is my weapon of choice against illegible Web pages. My default colors often make the hard work of the Web designers look totally ridiculous but then again, I'm reading the page to read, goddammit.
latch 15y ago
Can't help but think that this is directed at Andy Rutledge... Anyways, line-height is as important for my eyes.

467 points by bmaeser 15y ago

Beautiful site. HN is called out as a site with poor contrast (the text in a self post). I do find myself frequently tilting my monitor back to improve the contrast of posts here, but I think only on the downvoted ones, which, I suppose, is the point. But now, looking up at the now-clicked-on story link, I see that visited links have rather low contrast, too.

scott_s 15y ago
pg has said that self-posts have low contrast font to discourage people from using HN as their blog. So, similar reasoning to < 0 posts. But I also have difficulty finding stories I already read on the front page.

alexfarran 15y ago

Well maybe. But at least I can run sites with low contrast through Readability. No such luck with this Heath Robinson powerpoint-a-like they've built.

arkitaip 15y ago

I've gotten into the habit of modifying the CSS of web sites I frequent to improve the readability and usability in general. I do this using a plugin for the web browser. For instance, this is how the HN home page looks like: http://i.imgur.com/WaTQq.jpg http://i.imgur.com/WaTQq.jpg This is the most perfect design because it's tailored to my needs. Here's how YouTube looks like: http://i.imgur.com/eZAsx.jpg http://i.imgur.com/eZAsx.jpg Reddit: http://i.imgur.com/rnaxb.jpg http://i.imgur.com/rnaxb.jpg

chexton 15y ago
YouTube is very clean. I don't suppose you would share your CSS? If not, I'll do it myself...but it's always nice not to re-invent the wheel.
- arkitaip 15y ago
  It would be my pleasure: https://gist.github.com/1106842 https://gist.github.com/1106842 This CSS fix for YouTube removes a lot of functionality like the search form but since I can search youtube using extensions and the browser address field this isn't a huge issue.
  - chexton 15y ago
    Thank you. I agree re: the search bar; not such a big deal. YouTube will be much nicer now.
hammock 15y ago
Seems like you might just have poor eyesight. Why not simply Ctrl-scrollwheel the text larger instead of going through the trouble to alter the CSS?
- arkitaip 15y ago
  There's nothing wrong with my eye sight. I don't mind wasting some vertical space to get better readability. Modifying the css is very easy and doesn't take much time.
dredmorbius 15y ago
I'm a big fan of userContent.css myself. One of the big disappointments I've had with Chrome so far is that there's no way to set default font sizes (within the browser UI itself). I suspect there may be configuration settings .... hrm .... no "about:config", damn. I'll try the userContent.css trick next. I've long forced all sites to use both my preferred fonts and sizes. Most comply reasonably well, though some (overly specified) designs break. And that's for a guy who's been surfing in his 20s-40s, with good vision, though I'm just starting to feel the need for reading glasses. My parents are in their late 70s, Dad's got glaucoma. I've had to push up the contrast and zoom settings in his Mac account, for which he's grateful (the Web is one of his primary outlets / connections to the world now). Sites designed on large, high-contrast Mac monitors, viewed on smaller, lower contrast devices, suffer the most. HN definitely could use a contrast improvement (I'm viewing zoomed up a couple of clicks right now, couldn't say just how much). The real key isn't just sizing fonts (and setting contrast) appropriately, but to design pages which resize and rescale gracefully. I can live with the first if the second also occurs. Far too often it doesn't.

cryptoz 15y ago

The text on that site is so damn large it's actually hard to read.

tintin 15y ago
Exactly. Some used fonts are also very narrow and therefore hard to read. But ofcourse they are called Contrast Rebellion. Not Readable Rebellion.
RegEx 15y ago
I rarely complain about design, but the drastic color changes between the sections and the large capital letters actually gave me a slight headache.

DuqE 15y ago

Interesting you say about high contrast, all the examples are black on white. Do this mean all content related websites should be white backgrounds and black text?

absentbird 15y ago
I think the reason they used so many colors in their bombastic website is to demonstrate non-typical contrast solutions.

parfe 15y ago

In Fireforx: View -> Page Style -> No Style.

aw3c2 15y ago
In Opera (depending how you designed yours): Page -> Style -> Accessibility Layout.
- rplnt 15y ago
  Or Shift + G to completly disable CSS. You can of course create shortcuts for any of those styles in Page -> Style: Select user CSS file, # | Deselect user CSS file, # where # is a number of a style in styles/user/ (ls -U, starting from zero).

tszming 15y ago

I think what we need is a balance. If everything in your website is in high contrast, big font-size, black & white - it is also a problem. But I agree the idea behind the "Contrast Rebellion" - the accessibility of web content.

aw3c2 15y ago

tldr: Do not waste your time on this. ----- Webdesigners: please make sites usable. The non-javascript fallback display is somewhat broken but at least it works. With javascript enabled the site is stuck on the second slide (Opera 11.50). And then there is the part where the site says "Content ≠ Illustration". Well, yeah, you first. And by the way, centered text is hard to read. And I can't use my browser's back button nor does the site provide such a function. And dear god, it gets even better on this slide: Let's put an end to this low-contrast, light gray nonsense and use typography for its purpose: MAKING TEXT READABLE. AGREE? LET'S CHANGE THE WORLD TOGETHER! Never heard about all uppercase text being hard to read? This might just be an elaborate joke or sarcasm, if so, I do not get it.

hammock 15y ago
I also don't understand why people feel the need to use giant text everywhere- that's just as hard/annoying to read as tiny text. I'm with you on all points.
ZoFreX 15y ago
I think that, despite making some mistakes of its own, the content of the article is still valid and raises some important points. I did find it irritating that they used small, light coloured text on a dark background in places, as I find this very difficult to read (and am hardly alone in that). However, I think there are bigger fish to fry than quibbles like that. On any given day, there's at least one article on the HN front page that I actually cannot easily read, and frequently it's black text on a white background, plenty of contrast, just far far too thin on my display. I suspect the significant difference between font weights in browsers between OS X and everything else may be to blame.
solipsist 15y ago
Whenever I see a piece like this on Hacker News anymore (one that is going to provoke discussion), I am expecting a comment like this one. One that is equally as provocative in itself and taking the opposite stance. People upvote these comments and they tend to make it to the top. This says something about HN. What's wrong with comments like these ones is that they are being overly aggressive and argumentative for the sake of being overly aggressive and argumentative. Sure, being critical of others' opinions is a good habit to have, but disrespect is not. In this comment, you tell the other site users to not waste your time on this and that this might just be an elaborate joke or sarcasm. That's pretty harsh for something that someone wrapped up together in their spare time and evidently put effort into it. Whether or not you agree, at least try to find the light in the piece of the work. I know that a lot of people would be more inclined to read and accept an answer if you made it into less of a one-sided argument. Acknowledging both side and taking time to point out the strengths before the weaknesses go a long way and add to the overall politeness of the comment.

duopixel 15y ago

There's a second problem that's popping up lately: font-face on the body text. System fonts have been painstakingly hinted to make them more readable on-screen. Most web-embeddable fonts don't have appropriate hinting or are just plain bad choices for body text. Hoefler & Frere Jones (one of the most respected foundries around) haven't released embeddable fonts because they've been working on it for years. The result is fuzzy text at small/medium text sizes. It's huge pain to read. It seems some designers forget that good typography is concerned with readability too.

arkitaip 15y ago
Core fonts don't necessarily equal good web typography. Arial, for instance, is pretty mediocre for the web. You could say the same about Helvetica (it is still better designed than Arial). As for web fonts, Adobe and other foundries have large collections of gorgeous fonts specifically designed for the web.
- duopixel 15y ago
  Helvetica on Windows is terrible, see https://github.com/paulirish/html5-boilerplate/issues/42 https://github.com/paulirish/html5-boilerplate/issues/42. This is because Helvetica comes from Linotype instead of Microsoft, and they care more about print than screens. Arial might not be a good typeface, but as a font it's pretty damn well hinted for screens. Except for Minion Web and Myriad, I haven't seen a really legible web font from Adobe that is usable at 11-15px. Heck, even Typekit uses Georgia/Arial for long copy.
  - cpeterso 15y ago
    Because Helvetica looks so bad on Windows, a good compromise for a CSS font stack is something like: font-family: "Helvetica Neue",Arial,sans-serif; Helvetica Neue (a minor reworking of Helvetica from 1983) is a Mac system font, but few Windows PCs have it. So Mac users get nice fonts and everyone else gets Arial. Many CSS font stacks list Helvetica after Arial, but that is silly because nearly all computers (like 98%) have Arial, so Helvetica will never be selected. :(

Robin_Message 15y ago

Their script went wrong towards the end, with the following text on the dark gray background with the fist on it: "Usability expert Jakob Nielsen has shown many, many times that reading on the computer screen is harder than reading printed material even without making the font illegible. And mobile is worse. .. and many have written about why gray text is a crime here, here, here and here... So what we're trying to say is..." which did rather undermine their point.

ed209 15y ago

It's not just contrast that makes text legible or not, there are many other factors: - Width of the text area - Line spacing - Font-size - Correct use of headings, paragraphs, emphasis etc ... Actually low contrast is a great tool to have. You can't have high contrast all over the page otherwise various elements will be shouting for your attention. Controlling the volume of your copy is just as important as the factors I mentioned above.

jsavimbi 15y ago

Do they print books with black pages and white text? No, they do not.

Ronkdar 15y ago
With good reason. If I read white on black for more than 5 minutes, whenever I look away there are negative lines floating across my vision.
- 5l 15y ago
  I don't agree that it's good reasoning, and indeed most (or all?) early monitors used to be green/amber/white-on-black because it's easier on the eyes. It's not a common problem I know but I have countless floaters swooshing around in my vision so for me staring at a mostly white screen all day is absolutely horrible and a great way to give myself eye strain.
samlevine 15y ago
No, because it would be a waste of ink. Fortunately monitors don't have this problem.
burgerbrain 15y ago
If they wanted to, how would they?

bigohms 15y ago

Propaganda by photoshop clone developers who don't want to design opacity layers into their interfaces. In all seriousness, if everything was high contrast, everything would be SCREAMING AT YOU FOR ATTENTION. Webdesigners: use your personal judgement when identifying what should be high contrast (higher visual recognition priority) and what should be lower contrast (lower visual recognition priority) and all will be well. FYI: the HN example on your site actually makes perfect sense. The high contrast content is almost always the thing I consider most important. Index: Titles of threads, Subpages: Comments.

tripzilch 15y ago
> if everything was high contrast, everything would be SCREAMING AT YOU FOR ATTENTION Simply not true. There's many more factors besides contrast that determine attention focus. See this excellent series on gestalt principles of design: http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php http://www.andyrutledge.com/gestalt-principles-1-figure-grou... (it's five parts you need to click to get to the other 4) Also see http://24ways.org/2007/typesetting-tables http://24ways.org/2007/typesetting-tables which shows a very nice way of adding structure to a table using contrast, instead of making everything scream for attention equally. (Additionally, the site used a different layout when this article was written in 2007, and currently it seems 24ways is a good example of low-contrast crappy readability :) )

sycren 15y ago

Any idea how this site was made? Was some kind of framework used or was it all hard coded?

Jabbles 15y ago

It's amusing that a website arguing for readability makes extensive use of all-caps, well known to be difficult to read. http://en.wikipedia.org/wiki/All_caps#Readability http://en.wikipedia.org/wiki/All_caps#Readability

ugh 15y ago
No it’s not. There is nothing whatsoever wrong with sparingly using all-caps in headlines. This page certainly does not make extensive use of all-caps.

pilif 15y ago

Even worse (or probably related) than the general contrast problem is the absolutely crazy suggestion to use -webkit-font-smoothing: antialiased; in your CSS (http://maxvoltar.com/archive/-webkit-font-smoothing http://maxvoltar.com/archive/-webkit-font-smoothing) I've yet to come across an instance where antialiased is better than using subpixel hinting. In addition, I think it's crazy that the browser would allow a site designer to alter such a highly OS- or even machine-specific setting. Heck - there's even special tuning wizards in most OSes to configure the subpixel hinting perfectly for a specific monitor. Dear designer, turning that off for everybody just because you didn't manage to configure it correctly on your machine is egoistic and, IMHO, plain stupid as you make everyone suffer for a thing you should fix at your end. /endrant

arnemart 15y ago
Yes, a thousand times yes. Even worse are those who use -webkit-text-stroke: 1px transparent; which absolutely _kills_ scrolling performance.
- deleted 15y ago
  [deleted]
flyosity 15y ago
Totally, absolutely agree. Apple's website actually forces antialiased text through that CSS rule. I wrote a userstyle to force it back to how it should look.
erikpukinskis 15y ago
Yeah, well... you know... that's just, like, your opinion, man. I think subpixel hinting looks terrible. I think letterforms are really interesting and beautiful and I actually want to see them when I use the web. That said, I do agree that web sites shouldn't override the browser settings for body text. But turning off hinting of titles is probably reasonable.
- Torn 15y ago

Jem 15y ago

I find it easier to read some of the low contrast sites than the linked - too MUCH contrast is often worse than too little (for me).

Meai 15y ago

Dear webdesigners: please don't use huge images and CSS3 magic that makes your site ultra slow to scroll.

FilterJoe 15y ago

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/

rplnt 15y ago

You should not forget about compatibility, i.e. make sure the site works across various browsers and platforms. Why I'm talking about this? I can't use the lt/gt arrows to view more examples. The compatibility problem translates as an usability problem to the user. edit: Also, the tooltip text went missing after some actions/time.

petercooper 15y ago

There was an article that did well on Hacker News a few months ago that said while high contrast is good, it shouldn't be 100% contrast. Instead, you should very slightly hint toward the theme color. So if you have a bluish background, your text could be #112 or something. I've followed the advice since and it definitely makes things easier on the eye vs #000 everywhere.

tripzilch 15y ago

http://timecube.com/ http://timecube.com/ - high contrast? check. - giant letters? check. - readable? ummmm ... That said, it's a good suggestion, but the giant letters make this site hard to read on my 1024x600 netbook screen. And they did mention readability on smaller screens.

owenmarshall 15y ago

>designers need to think of elderly users with bad vision There are plenty of us young folks with terrible low-contrast vision, too :) I've personally got HN turned up to 175% zoom, and even that's a bit on the low side if I want to read the text of self-posts. IMO, this is an important distinction -- I once heard a friend indicate that, because their app was targeted at people aged ~20-30, accessibility wasn't an important focus. I thought that was a very short sighted decision.

cpeterso 15y ago
A short sighted decision, indeed! :)

DrummerHead 15y ago

I Find it strange they're only talking about contrast and not line-height. That's the real dealbreaker for me. I am personally constantly changing line-height on other websites much more than type colour.

RandallBrown 15y ago

Why don't they show some high contrast designs that aren't just black text on a white background? Some of the low contrast examples they gave were low contrast to draw attention away from them, not just for aesthetics. This guy is overreacting.

int3rnaut 15y ago
Can you think of any well done websites with high contrast designs that aren't just black text on a white background? I was thinking the same thing but I couldn't think of any good examples off the top of my head--and to me that's a bit of a let down because all this time I've thought the text and style you use on your website can be an identifier of your brand or website. I mean if I could clearly read a site written in dark purple or something, I'd remember that.

ilianh 15y ago

Webdesigners: please make the back button work on scroll sites.

Omnipresent 15y ago

So glad that Hacker News is on the list. I thought I was the only one who thought that comments are unreadable.

cormullion 15y ago
You're not. I confess I made a Safari extension just to be able to read those comments that are greyed-out cos they're not interesting enough (and it was a nice test case to start with).
lojack 15y ago
I always thought the Hacker News ones were low contrast by design. Bad comments progressively get more difficult to read by design.

MetaMan 15y ago

I can't (read won't) take these guys seriously because they commit one of my biggest design 'sins". They use tiny typefaces in places which can barely be read (at least by me) on a standard 13 to 14 inch laptop screen. you know what they say - "People in glass houses should not throw stones"!

tsuyoshi 15y ago
Yeah, I have a minimum font size set on my browser (necessary because my eyesight is bad and virtually every site wants to use font sizes that I simply can't read) and this site looks like crap as a result.

sequoia 15y ago

Redux of this comment thread: "But it's not perfect!" enumerate minor flaws. sneer. Sometimes it's worthwhile to tackle one issue at a time, especially if it's something many people (designers) a) don't care about b) don't want to do c) possibly don't understand. So yes, perhaps they fall down on graceful degradation / progressive enhancement, but to be fair the target audience is exclusively web designers. In that respect they are playing well to the audience, which in turn makes it more likely that they'll get their point across. As for "large text is too hard to read" & "I can't read centered text:" seriously? Deep breaths, everyone. ;)

kgthegreat 15y ago

I like the site.

bugsy 15y ago

That's all fine but doesn't go far enough, focusing only on contrast problems (related problems to contrast are using shadow engraving style on small fonts and clashing foreground/background color schemes). A really big problem on many sites is the length of lines. It is very difficult to read text that has too many words per line. A recent abysmal nightmare is Apple's decision to make Mail.app (and other apps) in 10.7 oriented towards full screen as if it was running on vertically oriented mobile, but on large wide screens. Small font sizes here and we have scan lines with up to 30-40 words in some cases, which is complete insanity. Count the words per line. If the average is much more than 12, either your columns are too wide or your fonts are too small. Here on HN is a typical example with around 24 words per line on top level articles. Bad design, but very typical on the web. However, it is at least manageable, many sites are far worse. HTML Solution? Some advocate that columns be around 30em width: http://www.maxdesign.com.au/articles/em/ http://www.maxdesign.com.au/articles/em/

markahern 15y ago
Solution to mail.app problem: either make the middle column bigger, or don't use it in full screen.

pyninja 15y ago

Surprised he didn't link to Reichenstein's essay on the topic: http://www.informationarchitects.jp/en/100E2R http://www.informationarchitects.jp/en/100E2R

blahedo 15y ago

It started out promising. Then the author states, apparently without irony, that "aesthetics are important but aren't the ultimate goal of design", making particular reference to people reading with tiny screens, when his/her own site is quite unusable on a small screen! I normally keep my browser windows at half the width of my screen, around 700-800 pixels wide (give or take). Just looking at the "page" where the author discusses aesthetics, if you've got a narrow window, a few letters and words are cut off on the left, and while you do get a scrollbar to move to the right, everything to the right of the original view is plain white. (On my screen, the cutoff actually runs right through the "reading tiny screens" text and icon, for added irony.)

armandososa 15y ago

Dude: get glasses. I not even squinted to read the text on his examples. I mean, contrast is important but the guy needs glasses. Or a readability bookmarklet.

redleaf 15y ago

Nice site. Years ago, we used to determine the luminosity of a colour to determine whether we should use white text or black text. Now, there are calculators to help determine whether a pair of colours contrast each other effectively. Here is one that kind of works: http://www.colorsontheweb.com/colorcontrast.asp http://www.colorsontheweb.com/colorcontrast.asp

oneplusone 15y ago

There is such a thing as too much contrast when it comes to text. When typesetting it is advisable to never use pure black for text because it simmers on the page. I normally design the base text on the page to have between 15% and 30% brightness because it makes it more pleasant to read. There is a place for light gray text. It is all about maintaining a hierarchy of information. Some text should be hidden away and harder to read because it is less important than the copy around it.

sbochins 15y ago

I'm guessing the reason this got up voted so much was because this site was featured as one of the offenders. It is pretty hard to read the text on a sunny day on my phone. Maybe the revolution could start with HN?

trustfundbaby 15y ago

So glad you use Reeder in your example ... I bought the Reeder app on Sunday and the low contrast thing really put me off (among other things). The app looks really sexy, but sitting there reading tons of articles when you're struggling with the low contrast headlines, can get tiring.

andyana 15y ago

It looks really nice, but it didn't render properly in Opera with zoom.

foz 15y ago

I followed the links in the credits to the two designers who made this site (http://richard.gazdik.name/ http://richard.gazdik.name/ and http://www.kirowski.com http://www.kirowski.com)... to my surprise, both sites were using tiny low-contrast text. Huh.

huhtenberg 15y ago

One man's poor contrast is another man's uncalibrated monitor. :)

mannicken 15y ago
Put black text on black background and no calibration in the world will help you read it ;-)

mannicken 15y ago

http://andyrutledge.com/images09/newsSite/images/iphone_nyt_new.jpg http://andyrutledge.com/images09/newsSite/images/iphone_nyt_... -- in here lower-contrast is used properly, I think. Low-contrast allowed to hide the low-priority details allowing the brain to quickly navigate through important, high-contrast titles. Not all text is important.

fferen 15y ago

On a side note, it's ironic that mobile versions of sites are usually far less readable than regular versions, at least on my Droid X. On a regular page, I can set the zoomed-in text size to large in the settings. Mobile sites tend to make text tiny and un-zoomable, decreasing usability, which defeats the whole purpose of a mobile site!

shadowhillway 15y ago

OmniWeb's site preferences feature is my weapon of choice against illegible Web pages. My default colors often make the hard work of the Web designers look totally ridiculous but then again, I'm reading the page to read, goddammit.

latch 15y ago

Can't help but think that this is directed at Andy Rutledge... Anyways, line-height is as important for my eyes.