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?"
Well there IS pdf's, if you wanna be that picky......
~
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".
No,its Math.
Deal.
oh wait, this contradicts me:
http://dictionary.reference.com/browse/math
wait, no it doesn't.
The Kruger Dunning explains most post on
http://webtypography.net/ This link goes to a way of implementing Elements of Typology online; which is supposed to improve readability. Its interesting in that it sort of goes against the common idea with screen size and web text. The common idea, as I understand it, is that we should not worry about the 800X600 and use as much screen real estate as possible. Then, text columns can stretch as wide as my 19" monitor will let them. The problem is, that works against readability. The "optimal" is about 4.5". I use 37em for text body width, and that seems to work.
What those who want activist courts fear is rule by the people.
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.
The thing I find amazing about this discussion is that the Slashdot audience, often (in part if not in whole) so well-informed, appears here so utterly ignorant. Folks, to take a random example, twenty years ago I used to subscribe to a journal called Visible Language. Google tells me that it's still there, at http://www.id.iit.edu/visiblelanguage . It's far from the only source on such information. Yes, there is a research community on these topics. The research has been done. It was done, for print, centuries ago; it was done, for the screen, decades ago. It is something that matters, sure, to nerds as to anyone who reads. But how quite does it get to be news, now? Because someone at Wired recently half-remembered what he learned in a typography class at school?
So ja, sure, 'equal areas' is just an informal approximation, it's what you remember of the idea, informally, once your school days (or whatever other days they were when you read up on typography) are somewhere in the distant past. It doesn't mean there's no theory to it; it doesn't mean there's no well-researched and well-documented theory of it. It just means that it's one of those, OMG, pre-Internet topics that's tricky to Google for, and nobody, either here or at Wired, dropped by their local library recently to check it out in detail. Or, equally possibly, that it didn't seem worth the effort to explain in more depth when the purpose of tfa was, frankly, just to be cute.
As to why our on-screen typography pays little attention to such well-known ideas, I somehow suspect it's a combination of the cowboy programmer syndrome so pandemic in web technology and the distinct possibility that some corporate baboon somewhere has a patent-lock on 'text that doesn't look like crap'....
This probably isn't the reason, but in math, the general term used for the capacity of an object, regardless of its dimension, is "volume". And so "length" refers to the volume of a 1-dimensional object, and "area" refers to the volume of a 2-D object.
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.
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, but there are other good resources as well.
"You'll get nothing, and you'll like it!"
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).
Personally, I'd be upset if web designers had precise control over font rendering. I've overridden Firefox's default fonts with ones that I prefer, and regularly use ctrl + and ctrl - to adjust font sizes. It's better to have a fluid, customizable presentation layer for on-screen reading. Otherwise, we'd probably be using PDF instead of HTML.
Also, I feel like we already have plenty of free (freedom) fonts, and high quality renderers; kerning for desktop computers was solved in the 80's. (Antialiasing was huge and recent though.) Anyway, I'd like a 300 dpi display, and resolution independent rendering will make them practical. Today's models have the resolution of a dot matrix printer in draft mode... No mater how good the font renderer, it's going to look lousy compared to a modern printer or a book.
Dude.. :P
:P Maybe?
VA
Highlight one and look at the other.. unless you're drunk (like me)
If you're using lynx you're SOL
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.