Live data from Hacker News

Balancing text for better readability

blogs.adobe.com

31–40 of 92 posts

Re: Balancing text for better readability

#32
I long for something that would just wrap all big paragaphs of text at 70-ish characters without hacking at element widths (I've tried user stylesheets, scripts... nothing satisfactory). If this were implemented, I imagine it would be easier to do that.

(For example, the first line of the first paragraph of the post renders as 134 characters on my screen. Maybe I am just old, but I find this hard to read.)

Re: Balancing text for better readability

#33
post #14
post #4

Wouldn't it be easier and give you more editing control to just put text in a element? Seems like it would be hard to algorithmically determine what will visually look good

InDesign already does this (as does quite a number of other software) and it works remarkably well. There is rarely a situation in which manual adjustment improves the typesetting and the automatic solution i definitely always good enough. A manual solution is possible but not very practical, as was also mentioned in the article. Especially when the web design is responsive, such manual adjustments are problematic. B…

I do agree that typesetting in CSS is a bit lacking. We haven't really had any significant changes in this area since CSS 1.0 came out (with word-spacing and text-spacing). @font-face is great, but it's more about specifying the font to use instead of specifying the type layout.

It's also nice to see some constructive issues already being raised on the project. Whether or not the current implementation is perfect, it'd be really neat to have this type of functionality implemented in a CSS spec.

Re: Balancing text for better readability

#34
post #2

I think it's odd that a post about readability has grey text (#686868) on a white background. Next to the black screen grabs the text is very light.

Thanks for the feedback. I just fixed it.

It's still nearly unreadable for me.

http://i.imgur.com/Xu13n7j.png

The typophiles here will surely yell at me for getting the terminology wrong, but my experience is that fonts are heavier on OS X and whenever I see a site with whisper-thin text like the above I suspect it was tested on OS X only.

Edit: removing the font-weight CSS attribute makes the page legible. The issue is that you specified a font-weight under 400 ("normal"), and different font engines snap in different ways.

Re: Balancing text for better readability

#35
post #32

I long for something that would just wrap all big paragaphs of text at 70-ish characters without hacking at element widths (I've tried user stylesheets, scripts... nothing satisfactory). If this were implemented, I imagine it would be easier to do that. (For example, the first line of the first paragraph of the post renders as 134 characters on my screen. Maybe I am just old, but I find this hard to read.)

I used a user stylesheet that added max-width: 50ex; to

and tags for a long while, but found too many sites ended up funny (especially those that mixed

and
). These days I just make my browser narrow.

Re: Balancing text for better readability

#36
post #32

I long for something that would just wrap all big paragaphs of text at 70-ish characters without hacking at element widths (I've tried user stylesheets, scripts... nothing satisfactory). If this were implemented, I imagine it would be easier to do that. (For example, the first line of the first paragraph of the post renders as 134 characters on my screen. Maybe I am just old, but I find this hard to read.)

What was wrong with setting a max-width to (for instance) 70ex for p elements?

Re: Balancing text for better readability

#37
post #7
post #2

I think it's odd that a post about readability has grey text (#686868) on a white background. Next to the black screen grabs the text is very light.

The contrast ratio is 5.57:1 well above the 4:5:1 requirement. It seems that they're using Adobe Clean Light ( Helvetica Neue Light as a fallback). This must be the source of your readibility problem. Depending on browser/platform font-weight: 300 can be a huge problem. [1] http://juicystudio.com/services/luminositycontrastratio.php#...

You hit the nail on the head: The font-weight:300 is killing the readability in Chrome on Windows. When I toggle it off the text becomes readable.

I don't know what this 4:5:1 requirement is, but it also looks better to my eyes with the color:#444 toggled off so I get black text. But it's not as huge a difference as turning off the width.

Re: Balancing text for better readability

#39
post #34

Earlier quoted context omitted.

Thanks for the feedback. I just fixed it.

It's still nearly unreadable for me. http://i.imgur.com/Xu13n7j.png The typophiles here will surely yell at me for getting the terminology wrong, but my experience is that fonts are heavier on OS X and whenever I see a site with whisper-thin text like the above I suspect it was tested on OS X only. Edit: removing the font-weight CSS attribute makes the page legible. The issue is that you specified a font-weight under…

Even in your screenshot it looks perfectly readable for me.

Re: Balancing text for better readability

#40
post #2

I think it's odd that a post about readability has grey text (#686868) on a white background. Next to the black screen grabs the text is very light.

font-weight is indeed the main problem, but regardless I hate this new trend of not making text black. What would a bookmarklet look like to set the body color to black?
Post reply on HN