Slashdot Mirror
The Math of Text Readability
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?"
Having all the typefaces look *exactly* right is one of those things that only printers really care about. Don't get me wrong, it's worth the trouble, for the *printed page*.
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.
"When the atomic bomb goes off there's devastation...but when the atomic bong goes off there's celebraaaaation!"
The concept of WIRED magazine and its associated web site being interested in readability seems ludicrous.
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".
Bantam Dominique roosters crow a four-note song. Once you've heard it as "Happy BIRTHday" you can't NOT hear it that way
I have actually written software to kern text (for the sign-making industry) and can testify that kerning is not an exact science. Yes, one needs to even up the areas of white space between letter, but then one needs to bias the calculations in favour of the tops of the letters. And then make some allowance for any white space inside the letters, and .... and .... and ..... Spacing that is correct for 12-point type on paper would be quite wrong for a huge 3D sign on the side of a building, and so on.
For perfection, there is no substitute for the human eye. The algorithms used by our brains to unscramble text are very complex.
Personally I've noted that Magazines and Papers put a good bit of thought into layout, but I've never found them easier to read.
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."
Apology to Ubuntu forum.
I think you miss the point of this HTML thing. It's a markup language, not a display language. For that we have PDF and Display Postscript. I don't want that much font controll in the language because your exacting layout isn't going to work on my 320*240 (or smaller) portable display anyways.
There are 4 boxes to use in the defense of liberty: soap, ballot, jury, ammo. Use in that order. Starting now.
The space between letters on my screen generally has a lot of anti-alias grey pixels, and even subpixel-rendering-derived colored pixels, in it. It's not empty.
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.
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.
If you disagree, post your argument. (-1, Overrated) isn't your personal censorship tool for views you don't like.
Have you noticed that Wired's 'NEW' logo uses an almost monospaced font (ie: the kind used on old manual typewriters aka 'Courier' - where every character was the same width, hence the lowercase i with very large serifs to take up the space effectively)? Only the W is of a different width, but they've balanced it by using a slab-serif I and then balanced the useage of that amongst the sans-serif face by also including a slab-serif E so that it doesn't stand out in your subconcious. Such is the way of kerning... it's not mathematical at all, it's all in the 'feeling'. It's a purely aesthetic exercise and as has been quite rightly pointed out in the comments, a font that is perfectly kerned at 12pt becomes odd-looking when scaled up to a display size (even scaling to something like 120pt would show it) - hence some type families including a 'display' version specifically kerned for use at larger sizes. Typography... it's all in the whitespace y'know ;)
This is exactly why MS Word sucks and LaTeX is awesome, at least in terms of readability. Try reading a LaTeX'ed documunt on the screen, it is extremely pleasant.
Web fonts don't have custom kerning pairs
;)
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".
What kind of geek are you? I would think the biggest advantage of running 3200x2400 is the ability to fit at least 16 reasonably sized fixed-font xterms onscreen AT THE SAME TIME!
...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.
150 Opening BINARY mode data connection for slashdot.sig (129323052 bytes).
As David Kindersley's experiments have shown, it's more about the interplay of light and dark as perceived by the human eye than mere physical measurements.
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
Sphinx of black quartz, judge my vow.
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 fitted together on a line, they would have a specific amount of space between them which was largely based on their overall size. (the shots were three-dimensional, and therefore, actually had volume)
For the common, body-text type, the rectangular spaces (proportional to a letter's width) were enough to make the type readable. However, with larger type in the masthead, headline or other large type, the space between letters could sometimes lead to a confusing appearance. The larger letters were often made of wood, not metal, so the spaces would be cut-away near the corners. The notches that resulted made the angular letters (e.g., like ‘VA’ or ‘WAY”) fit-together more closely, and yet would not lose any space when placed next to letters that occupy the full rectangle. (such as with ‘AMV’, ‘MAN’, or ‘OMG’)
Since only the corners of certain letters were trimmed-away, it came to be known as “cornering”, which in-time became the vernacular we know today, kerning. Presumably, some Northern European dialect gives us the word we now use.
So many people confuse kerning with a system called tracking and think the two are one and the same... NOT so! While each is a name for a system to determine the visible space between letters, they do it in fully different ways. In a nutshell, tracking applies to a full typeface and is applied to all text at the same time. (as if to increase/decrease the size of the letter-shots themselves) Whereas kerning only applies to the space between two, specific letters.
In that light, you may have already guessed that kerning is not widely used with body-text (like the text you're reading now) and tracking is used instead. For instance, the next time you read a fully-justified column, (aligned both left and right sides) notice how some lines appear “stretched” or “compressed” when compared to others. Tracking is the mechanism for making justified text.
Where you'll find kerning most often is in mastheads, corporate logos, and occasionally in article headlines. Working with only two letters at a time is a tedious process, so it's generally reserved for when fewer letters are displayed at a larger size.
The very logo for Slashdot (top of this page) is a fair example of kerning; the letters are almost touching, but the same effect can not be done so precisely by simply adjusting the tracking of the same text. (even the slogan, “NEWS FOR NERDS, STUFF THAT MATTERS” is kerned just a bit)
What amuses me the most in this thread is the number of people claiming they can compare the effects of tracking or kerning from one poster to the next. Are you all using the exact-same font on your browser? (Slashdot posts appear in the default font for your browser--go ahead, test it!)
With the obvious variety of platforms represented here, I'd safely say “no”. Unless you're in the same room, looking at the same PC monitor, you can't make any comparisons. While the page reads the same, I'm sure it appears just-a-bit-different on my screen than it does on yours. There's no proof there.
Besides “Optical Volumes” does sound just a bit cooler than “Optical Areas”.
This post © Copyrite Duggeek, all rights reversed.