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......
~
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.
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.
--- Just say no to negativity.
"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.
Unfortunately the WIRED headline "underwire" doesn't obey those rules.
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 the 80s?)
I've actually found the Wii Opera browser quite readable even on a 576i PAL TV (once zoomed in on the content anyway), and I attribute that to decent fonts and colours.
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. And no, I'm not talking about running Windows at 3200x2400 so I can fit 4 1600x1200 browser windows on the screen, but rather so that my 10pt font looks much sharper. Then, maybe then I wouldn't have to read a blurry pdf on the screen or be forced to zoom in so the fonts render clearer.
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.
White space, fonts and text density are minor concerns to me (intense reader for decades). Computers are fine for relaxed reads, but for long texts, the medium's just wrong: I prefer paper books.
... intense focus and keeping my circulation moving ... and so I find PDF manuals distasteful. Books: Grab, flip open, crawl inside... quickly, wherever. Maybe it's long habit, but considering the e-book flop, I 'spect I'm part of a majority.
Computers breaks my study habits
"You must try to forget all you have learned. You must begin to dream." -- Sherwood Anderson
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".
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 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'....
I think you miss the point of this CSS thing. It's a style defining syntax, not a markup language. It exists to put a Style - you know, the "middle S" - on top of a generic markup language. Your tiny device should a) treat styles in a way appropriate for its capabilities, or b) suck it.
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 little devices, and will design CSS to help make things readable on tiny little devices, because they care about such things. I'll turn that crap off, because I think web designers with a print graphics background should not be allowed near my computer. And we'll all be happy, because separating content from presentation is a good thing.
...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 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!"
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.
The point of the article is that current fonts don't have enough kerning, not thar there is none at all.
The main difference between normal text and programs is that in texts the smallest semantic unit is the morphem (which is mostly a syllable), while in programs the smallest semantic unit is the single character (or symbol). It thus makes sense for programs to use monospaced fonts, because then every semantic unit has the same size.
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 morphems don't map to symbols in the letter based alphabets anyway, so each morphem has its individual size to begin with. Monospaced fonts don't help spotting morphems in letter based alphabets.
It's different in Chinese or Korean though, where each morphem has its own character, and those languages use - monospaced fonts!
Windows can do it in some applications. Actually, the one thing you can't fault Microsoft on is their work on fonts, typesetting, and encoding. Security? They're idiots. Usability? They're at best semicompetent. But in the NT/2K/XP/Vista line, they've done as much with OpenType, Uncode compability, and readability as any other OS vendor/group.
Good lord, you must be kidding! The one thing I do fault MS for, and the reason I used to avoid their systems if at all possible and now do again is precisely because they don't know the first thing about fonts and typesetting.
When a formatted multi-page document changes layout merely because you print to a different printer, even within the same brand (HP III to HP II for instance) it indicates serious problems with how you're handling fonts and layouts. Yes a pure text document will change layout under certain circumstances under windows with an application that handles fonts, like, say, Word.
This is extremely annoying when you're creating a document for publishing on blue-line paper.
The cesspool just got a check and balance.
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.
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 want U+2001 EM QUAD and friends.