The simplest solution to a similar problem (a single hanging word in a headline) that I've seen is to replace the 'space' between the last two works with an This forces the last two words to stay together as a unit. It can be automated with a simple piece of ECMAScript.
Balancing text for better readability
11–20 of 92 posts
Re: Balancing text for better readability
#12The simplest solution to a similar problem (a single hanging word in a headline) that I've seen is to replace the 'space' between the last two works with an This forces the last two words to stay together as a unit. It can be automated with a simple piece of ECMAScript.
It's not the single word alone in a line. It's a final line that significantly shorter than all the others. You want to strive for text that's mostly ██-shaped, not ▐▀-shaped. Replacing the last space by a non-breaking one just shifts the problem around a bit (and you still have occurrences like “I am” at the end of a sentence – it's not like the final word is always something nice and long like “sightseeing”).
Re: Balancing text for better readability
#13I 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.
Which device are you using and with what light settings? I've received one report from a user saying that the text on my site is "unreadable" due to the contrast but nobody inside my organization can see what the problem is, so I'm interested in how other people are experiencing such problems.
I'm using a 17" Dell M6500 running Windows 7 and the text is unpleasant to unread in all browsers I have installed (Firefox 18.0.2, Chrome 24.0.1312.57 and even IE 9).
It looks quite a bit better on my external monitor - which is 1600x900 rather than the 1900x1200 of my laptop display.
Re: Balancing text for better readability
#14Wouldn'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. But HTML is (luckily) also very flexible and neither font size nor the font are guaranteed to be constant, making a manual solution break horribly in e worst case.
CSS desperately needs feature parity with something like InDesign when it comes to typesetting. Adding stuff like this is obvious, something those working with layout programs had at their disposal for a long time.
Re: Balancing text for better readability
#15I 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 font is the issue, not so much the color. Light fonts as the bread font are just a bad idea.
Not that it matters even a little bit in this case. It's an irrelevant diversion of the worst kind. It's ignorant and foolish, something for small minds.
Re: Balancing text for better readability
#16Why not just use the Knuth-Plass algorithm as implemented in http://www.bramstein.com/projects/typeset/ ?
None of Knuth's extensive work on typography seems to be well respected among designers (I'd love to be proven wrong about that).
Not respected, or not known?
Edit: I'm seriously asking here, if anyone knows.
Re: Balancing text for better readability
#17I 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.
Which device are you using and with what light settings? I've received one report from a user saying that the text on my site is "unreadable" due to the contrast but nobody inside my organization can see what the problem is, so I'm interested in how other people are experiencing such problems.
FWIW, the text looks fantastic on a retina ipad (on safari). It could do with being a bit darker to increase contrast, but still it looked great and was easy to read. So screen resolution seems to make a difference.
Re: Balancing text for better readability
#18I 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.
1. Open blog post about readability.
2. Notice that text is unreadable without zooming in.
3. Close blog post about readability.Re: Balancing text for better readability
#19I 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.
Re: Balancing text for better readability
#20I 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#...
New rule... Don't use large blocks of colors like orange. That's just plain distracting.