Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Webdesigners: please make text readable

contrastrebellion.com

Post reply on HN
Print view View original

31–40 of 109 posts

Re: Webdesigners: please make text readable

#31

Post by Terretta »

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.

Re: Webdesigners: please make text readable

#32

Post by flyosity »

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…

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.

Re: Webdesigners: please make text readable

#33

Post by arkitaip »

hammock wrote: post #27
arkitaip wrote: post #4

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

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?

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.

Re: Webdesigners: please make text readable

#34

Post by duopixel »

arkitaip wrote: post #21
duopixel wrote: post #12

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…

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.

Helvetica on Windows is terrible, see 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.

Re: Webdesigners: please make text readable

#35

Post by erikpukinskis »

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.

Re: Webdesigners: please make text readable

#36

Post by ugh »

Jabbles wrote: post #20

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

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.

Re: Webdesigners: please make text readable

#37

Post by rplnt »

aw3c2 wrote: post #11
parfe wrote: post #7

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

In Opera (depending how you designed yours): Page -> Style -> Accessibility Layout.

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

Re: Webdesigners: please make text readable

#39

Post by rplnt »

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.

Re: Webdesigners: please make text readable

#40

Post by petercooper »

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.
Post reply on HN