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?"
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.
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".
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.
If you disagree, post your argument. (-1, Overrated) isn't your personal censorship tool for views you don't like.
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.
One man's -1 Flamebait is another man's +5 Funny.
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.
AAAAAAAAAA
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).
The parent's point is that a line of 10 Vs is as wide as a line of 10 As. So if a line of 5 "VA" is as wide, it basically means they don't invade each other. Do you mean to say those three lines are not the same width on your system ?
Then it just means one thing: You might look at two different fonts... Because your systems (OS, Browser) might just be different...
Write boring code, not shiny code!
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.