Slashdot Log In
The Math of Text Readability
Posted by
Zonk
on Thu Apr 19, 2007 06:11 PM
from the looks-good-to-me dept.
from the looks-good-to-me dept.
An anonymous reader writes "Wired magazine has an article that explains The Law of Optical Volumes, a formula for spacing the letters on a printed page that results in maximum readability. Wired's new logo (did anyone notice?) obeys the law. Unfortunately, Web fonts don't allow custom kerning pairs, so you can't work the same magic online as in print. Could this be why some people still prefer newspapers and magazines to the Web?"
This discussion has been archived.
No new comments can be posted.
The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.
Full
Abbreviated
Hidden
Loading... please wait.
Volumes not areas? (Score:5, Insightful)
Re:Volumes not areas? (Score:5, Funny)
It looked better in print.
Parent
Re:Volumes not areas? (Score:5, Informative)
I'm just running an incredibly modern-futuristic computer here, but my computer arranges letter closer together and further apart depending on their shapes... is that different from 'kerning'?
Related, but more different than not.
There are monospaced fonts, where each letter takes up the same amount of space regardless of shape, so xxx and iii are the same width. Then there are proportional fonts, where the letters are as wide as the rectangle it takes to contain them, so xxx is much wider than iii. This is what you're thinking of.
Kerning takes it a step further. A proportional font that doesn't have some kind of hinting (and a program that can read/implement that) will still put too much space between the letters VA, while one that does will allow the V and A to 'invade' each other's rectangle. It can get quite complex with all the different glyphs (letterforms) that have to work with each other.
I'm mystified as to who would say computers can't do this, since I use them to do exactly that every day. It really has more to do with the fonts and applications (and possibly the OS) you are using.
Parent
Re:Volumes not areas? (Score:5, Informative)
VVVVVVVVVV
VAVAVAVAVA
no it doesn't. It looks like it might when you just look at the two letters together... but it's just an illusion. (see above example).
Parent
Re: (Score:3, Interesting)
To a great extent, the resolutions available for computer screens sufficient to even think about kerning have only recently become available to the mainstream. Kerning is a subtle, but important, effet that most screen fonts are designed to
Re:Volumes not areas? (Score:4, Informative)
Then it just means one thing: You might look at two different fonts... Because your systems (OS, Browser) might just be different...
Parent
Re: (Score:3, Interesting)
Re: (Score:3, Insightful)
You seem to be using non breaking spaces for a purpose different from its intended one. Non-breaking spaces are designed to be used—well...—when you want to disallow a line break at a space, in situations like "A. U. Thor" or to keep words together where it'd be awkward to have them separated—a good typographer will not let a short word like 'a' be left alone at the end of a line but join it with a non-breaking space to the word following it, for example.
You probably wan
Re: (Score:2)
Re: (Score:3, Insightful)
"Area" also has general meanings that go beyond 2d geometery (example: "area of expertise"). If looking at all meanings of the words, I think "volume" is really the better word.
Re:Volumes not areas? (Score:5, Funny)
Parent
Re: (Score:3, Informative)
Geeks not nerds? (Score:3, Informative)
I'd use mod points, but I'm a designer (Web and print) and this has to be set straight. Besides, who on /. actually reads TFA to comprehend these posts?
Waa-aay back on the early printing presses, characters were steel/pewter “shots” and held together with molten lead. The shots were lead-alloy and would break-away from melting the pure lead once the print-run was complete.
The letters each occupied a rectangular space, since the shots were forged from rectangular molds. When the shots were fitt
Web Volumes??? (Score:2, Informative)
~
Hinting distorts kerning (Score:3, Insightful)
True, PDF documents have kerning in them, but the hinting used to display glyphs in PDF documents on a 70 to 120 DPI screen without blurring the crap out of the glyphs distorts the spacing balance.
Not all that important (Score:5, Insightful)
But on the web? I don't think anyone would really notice or care that much. Plus, it'd be hard to achieve, since you can't rely on all machines rendering fonts at the same resolution, and you can't rely on fonts actually being present on all machines, and you can't rely on all the *versions* of a typeface actually being the same across different platforms. None of this is news. The web was designed to sort-of deal with these problems. Or at least, ignore them.
Someday, when we're all running ultra-high-res displays, and someone releases a shitload of completey free (as in beer and freedom), high-quality fonts (I think this is the biggest issue, personally), then we'll all see the same nice fonts on our computers.
Re: (Score:3, Insightful)
Re: (Score:3, Insightful)
Look at the Slashdot banner at the top of the page. What do you see? Kerning. And if it wasn't kerned, it would look like crap. All designers care about kerning, not just those in the print world.
Re:I Care But (Score:4, Funny)
Parent
A Magazine is better... (Score:2, Funny)
My biggest CSS gripe (Score:2)
Re: (Score:2)
Re:My biggest CSS gripe (Score:4, Insightful)
Parent
Re: (Score:3, Insightful)
Now, if people would just use HTML as intended, and use CSS as intended, my tiny little devices can ignore the web browser CSS and render the HTML in a way appropriate for their screens. Some people will know aobut tiny l
Re: (Score:3, Insightful)
Buy the magazine to see the kerning in action! (Score:5, Insightful)
Isn't it OS' responsibility? (Score:2)
Alas, I always thought that forcing downloading of custom font is a bad idea (jut like forcing user to use some fixed font size) as not
Print vs Digital (Score:5, Insightful)
The term you're looking for (Score:4, Interesting)
Parent
Since when was WIRED interested in readability? (Score:5, Insightful)
Consider their track record of using tiny type, garish color schemes, and layouts that I find difficult to characterize, making it nearly impossible for anyone with any of a number of (even slight) impairments to their eyesight (including especially presbyopia - the lack of accommodation that accompanies middle age) to read their publications comfortably - or even at all.
I've often thought that this was done deliberately, to repell all but young readers, as part of targeting their circulation on the perceived avant-garde youth of gen-Y and beyond.
Now they're modifying their logo for readability. ORLY? Is their target demographic aging enough that this is now a problem? Are readers deserting them due to headaches just as they graduate into serious spending money? Or are they just playing around with another art/layout fad?
If they were really serious about readability I'd expect them to be modifying other aspects of their magazine and site layout. But TFA shows that is not happening. So I'll go with "fad".
no i didn't notice (Score:2)
The new one is just the opposite of the old one, very interesting. I don't really see how this umm law applies more to one than the other tho.
I do see what they are saying tho. A good sample is the button below for Plain Old Text. In that font it looks like the sans-serif T wants to get away altho in this font the seriffed T looks fine cause of a extra dot.
Kerning is not an exact science (Score:5, Informative)
For perfection, there is no substitute for the human eye. The algorithms used by our brains to unscramble text are very complex.
Re: (Score:3, Informative)
If you're referring to METAFONT-style fonts, then there is some supplementary information you can encode in the font file to indicate kerning between specific pairs, and also some moderately flexible ligature support. It's nowhere near as powerful as what you can do with Opentype, but suffices for reasonable quality when setting Roman alphabet languages. It can also be adapted, if you try hard enough, to support more complicated scripts like Devanagari. The nastiest limitations for that sort of work usually
Re: (Score:3, Informative)
[*]: (Of course, you can run it on
Re: (Score:3, Funny)
But I take your point. Might I also suggest that using an automatic spell checker is better than trying to compose on the fly.
Web Site Readability (Score:2, Interesting)
I'm generally unhappy with kerning on websites, unless they use certain fonts (sorry, I've never cared enough to look them up, although oddly enough they were serif fonts whereas I like sans-serif on websites).
The biggest issue for readability was:
- not too small
- decent line spacing
- NOT black on white. Dark grey on white, or black on pale grey
- Nice margins to other content
(aside, remember when people used to call them founts back in th
Screens stink for long texts (Score:3, Insightful)
Computers breaks my study habits
Does this really apply to screen-rendered fonts? (Score:5, Insightful)
One approach would be to apply this sort of kerning logic to a font in a completely analog way (like one would in print), assuming an infinite-resolution display, and then use antialiasing and subpixel-level antialiasing to squeeze more resolution out of the screen.
Nonetheless, text looks better when lines fall evenly on a pixel boundary -- if a line is one pixel wide, for instance, I'd rather have column 10 illuminated fully than a mix of columns 10 and 11 dictated by the kerning algorithm and provided by the antialiasing code.
Zelaous application of the kerning rules would result in nearly all characters falling halfway between two pixels. Antialiasing makes diagonal lines look smooth, and it's wonderful for that, but I don't want all my text looking like it's displayed on an LCD at non-native resolution.
Interestingly, The GIMP has two modes for its text tool -- one that makes some compromises on "the exact shape and spacing dictated by the font" in order to *improve* readability once you quantize distance by sticking the characters in pixels. I find this mode is far more readable for small characters than the one that doesn't.
Disappointing (Score:5, Interesting)
I thought someone might finally have come up with some serious research showing how to objectively improve readability, but it's just a summary of kerning.
Why is this area so bare of real scientific results? There have been a few studies into on-screen readability, typically measuring things like reading speed, accuracy of recollection afterwards, and subjective approval of the document by the reader. However, there are so many variables that people don't seem to control that it's hard to see any general patterns. For example, changing the font from 10pt to 12pt on screen may well not just scale the size by 120%, but also make the dominant strokes two pixels wide rather than one. There is little consistency among conclusions about optimal font size for reading across fonts or whether serif or sans-serif fonts are more readable, perhaps because there are so many variables.
Oh well, I guess we'll just have to wait a bit longer for comprehensive research.
But have you noticed... (Score:3, Insightful)
latex (Score:5, Interesting)
Re:latex (Score:4, Informative)
The irony, of course, is that the latest versions of Windows support Opentype pretty comprehensively, the latest fonts from MS support some Opentype features, pretty much all of the serious, commercial, professional-grade fonts you can buy these days come as Opentype (at least from sources like Adobe), Opentype features are far more powerful than anything in the TeX/METAFONT world, yet Microsoft were too busy revamping their UI again to add support for these features in Word 2007. So much for BillG's claims about readability on the screen being important.
Parent
Web fonts don't have custom kerning pairs - hmmmm (Score:4, Informative)
Whilst true, this is a bit misguided.
First things first - web fonts, and print fonts are the same. Fonts are fonts. Some are better than others and include more default kerning pairs than others. But rest assured, Georgia, Arial etc have got kerning pairs (for print and screen) and hinting information (for screen).
Type rendering engines *do* support kerning pairs, that the typographer who designed the font decided to create and embed in the font file. There are a bunch of patterns that are used to expose badly spaced pairs that typographers use when checking these spaces and fixing them.
Custom kerning for print is actually font independent and is done in the print design app of choice. Print design uses these same font files and their kerning pairs, and print designers won't custom kern large blocks of text, unless of course they want to spend 3 days per page of content. Print designers do often kern large headings and logotypes where any subtle problems are (literally) magnified and are obvious to the reader. Online designers do this in a number of ways, but typically resort to using an image (because the logotype font isn't likely to be on the end users computer anyway). CSS does give you the ability to create custom kerning pairs if you would want it, through a mixture of text-indents, spans and margins but its not very clean.
So the author if this piece is correct, but a little misguided and not being particularly fair on "the web".
FWIW (Score:3, Informative)
The biggest problem with readability on the web... (Score:5, Insightful)
...is that nobody seems to care about margins.
In so many websites (and yeah, Slashdot, I'm lookin' at you) every square inch of screen space seems to be cram-jam full of content, pictures, navigation menus, adds, sidebars, logos...
Stop. Please... just stop.
Re:The biggest problem with readability on the web (Score:3, Informative)
I agree. Whitespace is very important. I prefer to have decent margins and padding when I create web pages and I tend to use san-serif fonts for readablity. Also fixed-width is very important too. It's harder to read wide columns. Another good place to start is A List Apart [alistapart.com], but there are other good resources as well.
Too simplistic (Score:4, Informative)
See his _Optical Letter Spacing For new printing systems_ for a more detailed system and account --- but as Dr. Charles Bigelow has stated, no system fully accounts for all subtleties of all designs and the perceptions of the human eye. Co-designer of the Lucida superfamily, and having worked out the spacing system used for the Optima capitals sandblasted into Maya Lin's Vietnam Veterans' Memorial and newly placed as a profesor at RIT he's well-worth pying attention to.
William
Re:I'm not so sure... (Score:5, Funny)
Yeah, I agree, though I think that has more to do with their dumbed-down slang phrasings than the typography.
8-year-old: "6 divided by 3 is 2."
Time magazine: "Okay, take the number six. You're all familiar with it, yes? It's a half-dozen. Now, imagine it divvied up into little chunklets -- three, specifically -- and each chunklet has the same number that math professor Gregory Beckens at Overinflated Ego University calls a 'quotient'. The so-called 'quotient' in this case? Dos."
Parent
Re: (Score:3, Informative)
Deal.
oh wait, this contradicts me:
http://dictionary.reference.com/browse/math [reference.com]
wait, no it doesn't.
Re: (Score:3, Interesting)
But we read text by reading morphems, and the reader even can easily be confused by hyphenation through morphems (re-adi-ng is difficult to read compared to read-ing), and morphem