The Math of Text Readability 282
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?"
Volumes not areas? (Score:5, Insightful)
Re:Volumes not areas? (Score:5, Funny)
It looked better in print.
Print Volumes (Score:2)
It looked better in print.
Yes, back in 1940 you could see the thickness of lead in the linotype output, which was indeed a volume. That sounds good, but it might not be right because I just made it up. I do, however have a jar of old lead letters about that old for fun and props. No linotype blocks though.
If you want to get really hoary, I'll bust out my old IBM typewriter, hook it up to WP 4.x and show you proportional fonts that are all about areas instead of volumes. Then we can party like it's 1
Slashdot even blocks what HTML allows (Score:2)
But I can't do that here. Slashdot prevents posters from using non-breaking spaces, among many other things (I can't use standard physics or trigonometric notation, because
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: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.
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).
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...
Re: (Score:3, Interesting)
Re: (Score:2)
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: (Score:2, Redundant)
It is explained and really short too.
Re: (Score:2)
Re:Volumes not areas? (Score:5, Funny)
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
Re: (Score:2)
I can't say that 10,000 kerning pairs is surprising.
Re: (Score:2)
There are 676 possible combinations of two letters (26)^2. But that doesn't include punctuation or capitals, or numbers. Including all the numbers (10), commas, quotes, periods, and colons and all the punction above the number keys yields 2*26+10+10+5 = 77, or about 6,000 possible two-glyph combinations. And that's just with most of the standard English glyphs.
Re: (Score:2)
I have the choice of 26 letters for the first letter, and 26 letters for the second. To me that's not a series, it's just 26*26 = 676. Still not 10000, but double your number...
Re: (Score:2)
I HAVE spent 2000+ hours using Adobe InDesign in the past year, and I do use optical kerning on almost every body of text I deal with. I'm guessing this is what they are talking about (although optical kerning would work much better with fonts with good kerning pairs).
Really? You shouldn't.
If you're using decent fonts, they come with kerning pairs which will work at the size for which they're intended (so body fonts should not need optical kerning at body copy sizes). Optical kerning is for those time
Re: (Score:2)
Ah, which is why I'm so happy I use TeX. Knuth et al. really perfected computerized kerning. Visit here [nitens.org] for some examples of the beauty of TeX.
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:2)
Really, other than on blogs and news sites, if you are presenting on the web you should write for the web. That means writing something clear and coherent and then paring it down as far as you can. News sites and blogs should just use a good serif font [wichita.edu] on the web and move on. If someone really wants to
I Care But (Score:2, Insightful)
The main reason why it is much harder to produce a good looking font on a screen is due to the low dpi factor of screens. In print, you can get a much higher dpi and as such some fonts like Times look great. But on the screen they look like crap because the screen only has so much resolution. You can play a few tricks with current lcd technology and anti-aliasing but compare it to anything in print and there's no comparison.
I certainly wouldn't mind higher resolution displays to display crisper fonts. A
Re:I Care But (Score:4, Funny)
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: (Score:2)
On the other hand, look at the Wired logo in the article, in which they brag about how it follows their law of readability. It looks like unreadable crap.
Probably a bad idea. (Score:2, Informative)
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 wa
Re: (Score:2)
That's work, and that's only a small part of what's known as typography.
Consider this:
"Linux operating systems usually include several hundred additional programs. The Slackware is particularly fussy - as it an include more than 10,000 different programs just to get every combo of installations correct"
That's work,
Re: (Score:2)
A Magazine is better... (Score:2, Funny)
Re: (Score:2, Funny)
My biggest CSS gripe (Score:2)
Re: (Score:2)
Re:My biggest CSS gripe (Score:4, Insightful)
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
Re: (Score:2)
-nB
Print vs Digital (Score:5, Insightful)
The term you're looking for (Score:4, Interesting)
Re: (Score:2)
Also, people read on planes, in lobbies, while waiting in line, and other places that a computer isn't as convenient. Either use a paper book, or a Gameboy.
More important to me, paper is more intuitive for casual reading. Computers are better
Re: (Score:2, Insightful)
You are partially correct. Kerning alone won't make print more attractive than web documents. However, kerning is only one part out of many things one can do to text (justification, hyphenation, smaller line-lengths, line-spacing, judicious use of emphasis, indentation, ligatures, etc.) to make it more readable, i.e. typography. The sum of all these adjustments, while not consciously visible to the reader, most definitely has an effect on the
Re: (Score:2)
I think the biggie is vastly higher resolution. Typical screens are what, 72-100 ppi? It's simply tiring to keep scrolling about. Letter size paper or a larger newspaper fits more information and lets the reader scan about without much effort.
Also, something about being able to easily add color seems to make everyone want to do it. Those thick, darkly colored bars of slashdot headings sharply contrast with the black-on-white text and in many cases activate the negative space between the bars.
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".
Re: (Score:2)
Re: (Score:2)
The content is pretty much the same as before: a lot of tech hype with a very low probability of ever seeing the light of day, but with a few reasonable articles.
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:2)
Re: (Score:2)
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:2)
I do wish the LaTeX group could pull up their socks. Version 3 is being "worked on" (read: the mailing list occasionally has sparks of life), but the need for an underlying engine that does all of this properly seems clear to me.
Adding layers on top of LaTeX only goes so far, if the underlying engine has flaws. If TeX can't do kerning adequately any more, then fixes above it will simply be implementation-dependent - which is largely what happened when LaTex 2 broke down a
Re: (Score:3, Informative)
[*]: (Of course, you can run it on
Re: (Score:2)
ever try to put up a 100 foot long, 12 foot high cinder block wall using just your eye?
No for perfaction there are measureing tools.They are a hell of a lot better then anyones eye.
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.
Re: (Score:2)
Re: (Score:2)
Re: (Score:2)
Doesn't LaTeX do kerning? Couldn't it make big signs as well?
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
Re: (Score:2)
I created comp.fonts in the 80s and I can't ever recall seeing that spelling.
I do live under a rock though. So maybe it's just me.
Screens stink for long texts (Score:3, Insightful)
Computers breaks my study habits
Re: (Score:2)
I find books distasteful. PDFs: Double click, ctrl-f, put in some text, click next a few times...done.
To be somewhat less sarcastic, perhaps you should look into a widescreen monitor that you can swivel and put into portrait mode. I find that makes reading PDFs and web pages much more natural.
I would say e-books flopped because
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.
Re: (Score:2)
http://en.wikipedia.org/wiki/TeX#History [wikipedia.org]
Re: (Score:2)
Re: (Score:2)
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".
Re:Web fonts don't have custom kerning pairs - hmm (Score:2)
Which one looks better is largely a matter of opinion, though I like the way DejaVu has funny spacing between T and small letters.
FWIW (Score:3, Informative)
Re: (Score:2)
Actually, the optimal line length for extended reading has more to do with the angle through which yours eyes must rotate to get back to the start of each line from the end of the one preceding it. It happens that for typical typefaces, text sizes and reading distances, this works out at around 4–5", or 1.5 alphabets, or whatever your preferred practical rule of thumb is.
Re: (Score:2)
Dont mess up the ascii art !! (Score:2)
Kerning is a scam to destroy ascii artists !!
No kerning? You're full of crap. (Score:2)
Unfortunately, Web fonts don't allow custom kerning pairs, so you can't work the same magic online as in print.
They don't? What the hell are you talking about? A TrueType font contains a kerning table. If the font rendering does not kern properly, it just means the rendering engine is a piece of shit. There is nothing about "web fonts" (what the hell does that mean?) that preclude proper kerning. It just means that the fonts which are typically installed have shitty kerning tables.
Wired's Logo is still really ugly (Score:2)
Re: (Score:2)
Why some people still prefer newspapers & mags (Score:2)
maximum readability??? (Score:2)
Where is the actual evidence that this "maximizes readability"?
Courier (or courier new) (Score:2)
For example, this sentence takes up more space, but is easier to read.
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
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.
Re:The biggest problem with readability on the web (Score:2)
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."
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:2)
We humans like things regular. I would tend to think that what makes a text legible is that they have regular spacing on the whole, hence the kerning theory Wired made. However, that doesn't take into
Re: (Score:2, Informative)
Re: (Score:2)
Actually, if you're dealing with a topic that isn't totally geeky, you'll find that this is frequently the case around here. I'm not incredibly versed in typography, but I certainly know more than the average bear on the subject, and I'm disturbed by how many of the posts here have been modded up when it's clear that the authors have no idea what
Re: (Score:2)