Webdesigners: please make text readable • Hacker News Board

Re: Webdesigners: please make text readable

#41

Post by FilterJoe » Tue, Jul 26, 2011, 2:51 PM UTC

Terretta wrote: post #31

FilterJoe wrote: post #28

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…

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/ I find the comments and list items (within an item) need more line height for comfortable web reading. Body paragraph line height seems fine.

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.

Re: Webdesigners: please make text readable

#42

Post by petercooper » Tue, Jul 26, 2011, 2:52 PM UTC

pilif wrote: post #22

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 ) 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 m…

I am mostly on your side. I wrote a rant a while back too: http://peterc.org/blog/2010/235-webkit-font-smoothing-antial...

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.

Re: Webdesigners: please make text readable

#43

Post by Torn » Tue, Jul 26, 2011, 2:58 PM UTC

erikpukinskis wrote: post #35

pilif wrote: post #22

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 ) 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 m…

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.

There's a number of tech blogs linked here regularly which use anti-aliased html5 fonts that end up looking spidery/ghostly and really hard to read. I have to use Readable or text highlighting just to read them.

Campaigns like the OP that raise awareness are very much needed, there's no downside to them.

Re: Webdesigners: please make text readable

#44

Post by tripzilch » Tue, Jul 26, 2011, 3:03 PM UTC

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.

Re: Webdesigners: please make text readable

#45

Post by ZoFreX » Tue, Jul 26, 2011, 3:05 PM UTC

aw3c2 wrote: post #10

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

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.

Re: Webdesigners: please make text readable

#46

Post by owenmarshall » Tue, Jul 26, 2011, 3:08 PM UTC

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

Re: Webdesigners: please make text readable

#47

Post by tripzilch » Tue, Jul 26, 2011, 3:08 PM UTC

bigohms wrote: post #17

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…

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

Re: Webdesigners: please make text readable

#48

Post by tintin » Tue, Jul 26, 2011, 3:14 PM UTC

cryptoz wrote: post #5

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

Exactly. Some used fonts are also very narrow and therefore hard to read.

But ofcourse they are called Contrast Rebellion. Not Readable Rebellion.

Re: Webdesigners: please make text readable

#49

Post by DrummerHead » Tue, Jul 26, 2011, 3:16 PM UTC

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.

Re: Webdesigners: please make text readable

#50

Post by ugh » Tue, Jul 26, 2011, 3:17 PM UTC

Torn wrote: post #43

erikpukinskis wrote: post #35

Earlier quoted context omitted.

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.

There's a number of tech blogs linked here regularly which use anti-aliased html5 fonts that end up looking spidery/ghostly and really hard to read. I have to use Readable or text highlighting just to read them. Campaigns like the OP that raise awareness are very much needed, there's no downside to them.

The downside is that the argument is not very effective.

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.