Webdesigners: please make text readable
contrastrebellion.com
contrastrebellion.com
-webkit-font-smoothing: antialiased;
in your CSS (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
-webkit-text-stroke: 1px transparent;
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.
Campaigns like the OP that raise awareness are very much needed, there's no downside to them.
Those designers believe that anti-aliased fonts look better and no tirade will convince them. It’s just ineffective to try and convince them that anti-aliased fonts should not be used. It’s the wrong argument.
Here is what the argument should be: Most users of the web (nearly everyone not using XP and everyone using Internet Explorer 7 and XP) have anti-aliasing turned on by default. There is no need to worry about them. Additionally, the property designers are using to turn anti-aliasing on doesn’t even work for many browsers. It’s mostly targeting users of Chrome or Safari and XP. That’s a really small subset of users and the benefit of enabling anti-aliasing for them is doubtful. Most other websites won’t be anti-aliased for them, the one that is will likely stick out and somehow look “wrong” to them – not because anti-aliasing is objectively worse but because they are just not used to it.
Who will be very angry is everyone who explicitly disabled anti-aliasing. That’s a small minority, for sure, but I don’t see how the benefits are worth that tradeoff in any way.
However, since then I acknowledge there is an instance where it does make sense.. any text on black. In OS X, at least, the default rendering of type on a black background bleeds horribly, so I've swallowed my pride and started to use it in situations where it makes sense. It's particularly noticeable with Helvetica, I've found.
It depends on monitor's gamma!
My monitor with generic color profile exhibits the opposite: black-on-white is bleeding red badly, but white-on-black looks fine.
The issue is (mostly) fixable by using appropriate monitor color profile.
Unsubstantiated claim is unsubstantiated. I, for one, find that I can read more quickly with OSX-style text rendering, and efficiency matters to me.
As to the "high contrast movement" OP, I find the lower contrast easier on my eyes. And I have friends who have to wear sunglasses to read books / computer screens because of the high contrast. It's a horse apiece.
External monitors, at least, have contrast controls as well as brightness (I wonder why laptops don't).
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.
As for web fonts, Adobe and other foundries have large collections of gorgeous fonts specifically designed for the web.
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.
font-family: "Helvetica Neue",Arial,sans-serif;
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. :(
font-family: Helmet, Freesans, sans-serif;http://www.typotheque.com/articles/hinting
"[font-face] also raises new issues, including poor onscreen display of non-hinted fonts. And because hinting is tedious, time-consuming and widely believed to be nearly obsolete, 99% of all fonts, even commercial ones, are non-hinted."
Plus, browsers will flash the body text in the alternate system font (or a blank page) while the font-face file is downloaded from the web server.
Also see related ways on how to tackle FOUT.
-There are a number of fonts designed specifically for screen reading.
-Some of them happen to be preinstalled on our computers.
-Not all default fonts installed on our computers are meant for screen reading. Not all web safe fonts are either.
-A huge number of web fonts off late have been designed with screen in view. e.g FF Meta, FF Tisa Web Pro and so many others.
-There is nothing wrong with using font-face for body text.
Examples: Every article on trentwalton.com uses font-face (uses Typekit for webfonts) and works great in terms of readability. Please do not mix the poor aliasing on Windows with a problem with web fonts.
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.
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/
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-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
Looking at:
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.
I really appreciate the feedback - thanks.
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
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/
A calculator to help make the CSS:
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&... ) 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.
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.
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.
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.)
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/
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.
But I also have difficulty finding stories I already read on the front page.
But ofcourse they are called Contrast Rebellion. Not Readable Rebellion.
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.
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-grou... (it's five parts you need to click to get to the other 4)
Also see 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 :) )
- 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.
you know what they say - "People in glass houses should not throw stones"!
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. ;)
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
Reddit: http://i.imgur.com/rnaxb.jpg
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.
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.
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.
"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.
-----
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.
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.
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.
You can of course create shortcuts for any of those styles in Page -> Style:
Select user CSS file, # | Deselect user CSS file, #
:)
edit: Also, the tooltip text went missing after some actions/time.
- 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.
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.
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.
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.
Anyways, line-height is as important for my eyes.
This page certainly does not make extensive use of all-caps.
Now, there are calculators to help determine whether a pair of colours contrast each other effectively. Here is one that kind of works:
No, they do not.
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.