Live data from Hacker News

Webdesigners: please make text readable

contrastrebellion.com

61–70 of 109 posts

Re: Webdesigners: please make text readable

#61
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/

Re: Webdesigners: please make text readable

#62

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.

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.

Re: Webdesigners: please make text readable

#64

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

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).

Re: Webdesigners: please make text readable

#65
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.)

Re: Webdesigners: please make text readable

#66

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 resul…

Can you provide any further reading about this? I had never heard that the practice was frowned upon.

Re: Webdesigners: please make text readable

#68
post #66

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 resul…

Can you provide any further reading about this? I had never heard that the practice was frowned upon.

Here is a comprehensive article on font hinting by Peter Biľak a very respected Typographer:

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."

Re: Webdesigners: please make text readable

#69
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

Re: Webdesigners: please make text readable

#70
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.

Post reply on HN