*
programming and human factors
by Jeff Atwood
*
If you think of fonts as a bit of design esoterica, consider this New York Times article on the new Clearview typeface that will appear on all new highway road signs here in the United States:
The problem sounded modest enough: Add more information to the state's road signs without adding clutter or increasing the physical size of the sign itself. But with the existing family of federally approved highway fonts -- a chubby, idiosyncratic and ultimately clumsy typeface colloquially known as Highway Gothic -- there was little you could add before the signs became visually bloated and even more unreadable than they already were. "I knew the highway signs were a mess, but I didn't know exactly why," Meeker recalled.Around the same time Meeker and his team were thinking about how to solve the problem of information clutter in Oregon, the Federal Highway Administration was concerned with another problem. Issues of readability were becoming increasingly important, especially at night, when the shine of bright headlights on highly reflective material can turn text into a glowing, blurry mess. Highway engineers call this phenomenon halation and elderly drivers, now estimated to represent nearly a fifth of all Americans on the road, are most susceptible to the effect.
I've always considered road signs a rich field for study, as signage design has many parallels to modern GUI design in computer science. The accompanying slideshow for the article provides this image which illustrates the halation problem.
You could improve readability by simply making the font bigger. But this would result in billions of dollars spent on larger signs that increase visual clutter on the roadways. The Clearview font is an attempt to fundamentally improve readability with better design -- a completely redesigned typeface, optimized for highway use.
Here's a detailed comparison of the old FHWA typeface, Highway Gothic, and the new Clearview:
This isn't just aesthetics-- it also results in a practical benefit for drivers. That's the best kind of design, and like all the best designs, they provide the data to prove it:
Intrigued by the early positive results, the researchers took the prototype out onto the test track. Drivers recruited from the nearby town of State College drove around the mock highway. From the back seat, Pietrucha and Garvey recorded at what distance the subjects could read a pair of highway signs, one printed in Highway Gothic and the other in Clearview. Researchers from 3M came up with the text, made-up names like Dorset and Conyer -- words that were easy to read. In nighttime tests, Clearview showed a 16 percent improvement in recognition over Highway Gothic, meaning drivers traveling at 60 miles per hour would have an extra one to two seconds to make a decision.
I've talked before about font legibility experiments, where fonts designed for the web allowed users to read faster. This isn't opinion; it's backed by actual experimental data. There was a more recent experiment from the same source that also found even more benefits from the newest typefaces designed around RGB anti-aliasing. That's why I think Microsoft's font rendering strategy is ultimately smarter than Apple's.
So before you write off a design exercise as seemingly trivial as font choice, consider whether that tiny bit of design could improve the user experience, if only a little. And more importantly-- how would you measure the improvement?
Am I first!?
Great. Now all they need to do is make the lines on the road so they're visible at night in the rain, and I'll be a much happier driver. :)
James on August 13, 2007 3:32 AMFor those of you that are interested in the overglow, this page has an overglow simulation image of the E-modified, Series D, and Clearview 5-W fonts:
http://mutcd.fhwa.dot.gov/HTM/clearfont/cf-english.htm
Direct link to the image:
http://mutcd.fhwa.dot.gov/HTM/clearfont/images/HALATION.gif
You can get the font here: http://www.clearviewhwy.com/
Scott Hanselman on August 13, 2007 3:41 AMUnless I have misread it, how does the Wichita legibility study of new fonts on Windows have anything to do with your opinion that Microsoft's strategy is "smarter" than Apple's regarding font rendering tech? If there was experimental data that showed that people reading the same source material in the same fonts were faster on Windows than on OS X, that would be relevant to support your opinion. It is obvious you are into typography and you think Windows does it better, but unless you have been running an OS blind font rendering "taste test", it's still only opinion no matter how many studies compare Windows fonts readibility to other Windows fonts readability.
Dave Murdock on August 13, 2007 3:49 AMDave Murdock: haven't you figured out that Jeff Atwood is a Windows nut? he relies on a convicted monopolist to provide poorly constructed technologies to make a livelihood (which, tangentially, is difficult to discern if he actually has one seeing as though he's always updating this place). relying on Jeff for OS agnostic tests is wishful thinking at best
p.s. same friggin' captcha: orange
rupert on August 13, 2007 5:06 AMThis post reminds me about something I keep forgetting to mention - Have you checked out your site in Firefox recently? The font rendering is a bit hazy; I thought maybe you were developing on a Mac for a little while.
It wasn't until I saw how much better it looks in IE7 that I realized that you may not test it in FF.
Anyways, nothing terribly constructive to say, just whining about font rendering ;)
Paul N. on August 13, 2007 5:16 AMLeave it to a Mac fan to take a sentences that begins "That's why I think..." and get all uptight over it and call someone a nut.
I personally liked the article, and I thought the rendering issue was spelled out just fine: Jeff believes Mac leans toward staying true to the font face at the expense of some bluriness, whereas he believes Windows leans more toward sharper boundaries to prevent blur. Since blur and readability is what this article was about, seems like a similar subject, and seems like Windows takes a similar approach to these sign engineers.
Geez people are uptight. It's easy enough to choose NOT to read the article.
Morgan on August 13, 2007 5:56 AMI'm a web designer who switched to Mac in October 2006. There were plenty of reasons in my mind not to switch, one of which was the worry that I would miss Windows XP's Clear Type font rendering and find OS X's font rendering fuzzy and unreadable.
As it happens, I much prefer the OS X type rendering engine. Often times with ClearType on XP, I would see a "sparkley" halo around anti-aliased text (especially white text on colored backgrounds).
The biggest readability advantage OS X has its collection of pre-installed, high quality, properly hinted typefaces. All the ClearType rendering in the world won't save the mostly bad typefaces that Windows comes with. Granted, the new Vista fonts are nice, but at body copy (12px) sizes they still seem somehow off. It's like the Windows character grid is somehow wrong.
Anyway, if you love Windows or develop software for the Microsoft stack, that's great, do whatever is best for your own productivity. If you're looking for an alternative that comes with pretty good pre-installed software and beautiful hardware (that isn't covered with stickers for Intel) then I heartily recommend Apple computers.
"made-up names like Dorset"
... what?
Porges on August 13, 2007 6:16 AM@Porges: "Made-up" here means "not taken from nearby cities and towns".
Tim McCormack on August 13, 2007 7:01 AMIt wasn't until I saw how much better it looks in IE7 that I realized that you may not test it in FF.
Believe me, I use FireFox, and the site looks identical. When people make this comment it's usually because they have ClearType turned off. Note that IE7 FORCES ClearType on.
The stylesheet for this website specifies Colibri, then Tahoma. *Colibri only looks correct with ClearType on*. So if you have..
1. The Colibri typeface installed (eg, you run Vista or have installed Office 2007)
2. ClearType turned OFF
you'll experience this effect..
http://www.codinghorror.com/blog/archives/000356.html
Jeff Atwood on August 13, 2007 7:15 AMHey Jeff, I'm already packing Scott Hanselman's fonts for my Visual Studio and people always look at my screen a little funny but I'm not the one complaining about eye fatigue :)
But really, I'll take this one step further here... fellow programmers, learn to format a fricken document and pick fonts that make sense and learn to indent. For two years I was the youngest guy in the office and bI/b had to teach everyone else the difference between serif and sans-serif fonts. I had to show people how to set up and use headers and different types of body text when building a document.
Pretty much all programmers are required to create documentation at some point in their career; so we should learn to build a document with appropriate page breaks (instead of 10 Enters) and headers that "stay together" with their text and documents that "build their own" TOC b/c you actually built the thing with headers. a href="http://www.codinghorror.com/blog/archives/000918.html"You talked about building a computer being an important part of a developer's long-term skill set/a. I'd like the wager my (less than important) opinion that learning to use a Word Processor (well) is on that level.
I've seen the first draft of a government document written in Comic font with all of the above errors and more: no page numbers on each page, no document name on the page header, no print time, etc. He held off on creating the Table of Contents b/c he didn't want the pages to change until he was done with it.
So I love reading this stuff, I just wish more programmers had a clue about this stuff!
Gates VP on August 13, 2007 8:10 AMInformative article on font legibility for highway safety improvement.
But the abrupt jump to Windows vs Mac font rendering is very strange. It's a different field of application, serving different needs. The mention of Windows vs Mac is even less relevant, when you consider that - by design - the font (ClearviewHWY font) is less dependent on rendering approach.
I feel ashamed to be interested in your blog.. I think I'm becoming a full-fledged programmer :(
Sweet blog though! :D
abel on August 13, 2007 10:51 AMrecent commentors believe that Jeff is comparing apples to oranges and are taking his words out of context. The blog's title has the word LEGIBILITY, and that's what he's comparing. His blog post on rendering was a couple of posts ago.
He even states that "signage design has many parallels to modern GUI design in computer science"
Jeff is stating another reason why microsoft's font rendering is more pleasing to him and is doing a simple comparison using like characteristics.
Matt on August 13, 2007 11:33 AMYou're a delight, Jeff. I complained about your font choice when you first switched over to the ClearType camp because it was unreadable to people on cheap commodity monitors and you proclaimed it was for the sake of the FUTURE. Now you finish with a link to another post where where you criticize Apple for having the very same philosophy regarding their font rendering strategy.
Regardless, although I'm not livid that you'd choose an MS design strategy over Apple's, the argument you gave seems to contradict your conclusion. I don't own a Mac. I only use Windows. But hear me out.
If readability is most important (which I agree it is), then wouldn't a strategy that preserved the designer's intentions work better? With this tactic, the burden is shifted entirely over to the designer, so readability can be improved easily by using a better font.
MS's strategy requires that you increase usability for the few at the expense of those who don't keep up with the newest technology. The designer has to do a balancing act based on what he wants the font to look like vs. what the technology decides the font will look like. But the real kicker is that the font will probably end up looking like crap if the technology changes abruptly. These changes increase the usability for a certain set of users at the expense of everybody else. A system like that is going to discourage improvements in usability in general because most designers won't want to alienate a large number of users to improve the experience for a few. You may be an exception, with your font that's unreadable with ClearType turned off, but most are not so headstrong.
This is the meat of Jobs' complaint about MS having no style. MS's strategy of pragmatism over well-defined design philosophy creates systems where designers are locked into mediocrity, and Apple's no-compromises policy on design gives them a huge advantage. Admittedly, it's this same philosophy that keeps their costs prohibitively high, ensuring MS remains the market leader, but let's acknowledge MS's design choices for what they are: ultimately BAD for usability.
Dan on August 13, 2007 11:48 AMMac's font rendering sucks! Based on using safari browser, it sucks! Linux and Windows are great.
jun on August 13, 2007 11:54 AMMy 10 year old ViewSonic 17" flat CRT is still better at fonts then my brand new ViewSonic 17" flat LCD. Every test I've seen comparing CRT/LCD at text concludes CRT does better. It does. Not that this LCD is bad; it's better than the 15 year old NEC CRT they gave. But it's not better than a decent CRT. Just takes up less room.
BuggyFunBunny on August 14, 2007 2:35 AMBut the abrupt jump to Windows vs Mac font rendering is very strange.
As a web programmer / designer I don't think this strange at all. I am always balancing readability and aesthetics - on top of the DPI difference between Mac and Windows there's the font rendering difference, RGB quirks, how many toolbars the user has on display etc etc...
Trying to convince a client that Century Gothic is virtually unreadable in certain colour combinations is a nightmare, let alone their penchant for non-standard fonts that will make pages look abysmal on systems without the necessary font installed.
I am reading this page in FF on a Mac - it seems perfectly fine to me, although it is displayed in Ariel.
Deb on August 14, 2007 2:54 AMOn no! teh ev1l spammers have broken your highly cryptic code! ;)
"Myriad Condensed Web" is the most aesthetically pleasing, and easy to read font bar none. http://www.linotype.com/10680/myriadcondensed-font.html
Ropata on August 14, 2007 2:55 AMSo if you choose a font that is more readable - people can read it easier - OK
If you use a more readable font of the Web people can read it faster - OK
So Windows font rendering is better - Maybe (a matter of opinion) But this does not follow, or is even relevant?
If you pick a hard to read font then no amount of tricksty rendering will make it readable, and an easy to read font probably won't need it?
Jaster on August 14, 2007 4:51 AMLooks rather like the Tiresias font
http://www.tiresias.org/fonts/design_report_sf.htm
I also prefer Gentium to Times Roman.
http://scripts.sil.org/cms/scripts/page.php?site_id=nrsiitem_id=Gentium
Interesting that here we have another example where designing for the needs of disabled people actually helps everyone.
hgs on August 14, 2007 5:03 AM"Linux and Windows are great."
Linux...fonts...great? HAHAHAHA!!
Never fails, mention Apple and Microsoft in the same post and flaming starts.
BTW, Macs are for girls.
MarketGarden on August 14, 2007 5:30 AMGreat. Now all they need to do is make the lines on the road so they're visible at night in the rain, and I'll be a much happier driver. :)
And that, my friends, is The Real WTF(TM). (Oh, sorry, wrong site -- but I totally agree.)
Chris C. on August 14, 2007 8:56 AMGreat. Now all they need to do is make the lines on the road so they're visible at night in the rain, and I'll be a much happier driver. :)
And that, my friends, is The Real WTF(TM). (Oh, sorry, wrong site -- but I totally agree.)
AMEN!!
Steve-O (cause too many Steve's post here) on August 14, 2007 9:28 AMThe new Clearview highway font is specifically designed for a specific application, as a superior replacement to Highway Gothic. But would you recommend using the Clearview highway font for web browsing? Of course not.
ClearType is a very clever technology designed for a specific application, as a superior font hinting method on LCD displays. Very true. But "Microsoft's font rendering strategy is ultimately smarter than Apple's?" Oh, please. As long as you're browsing the web on an LCD flat-panel, use ClearType all you want. But it is completely inappropriate for web-browsing on CRT or plasma displays, for text layout work intended ultimately for print, or for just about any other graphic application.
Fonts, displays, and graphics are deeply complex subjects. Artists and researchers can spend careers in the subtleties of color science, vision and perception. In all of these areas, it's important to know when to apply a particular technique as well as when NOT to. Big sweeping generalizations are facile. Please stop insulting your audience.
CompaniaHill on August 14, 2007 9:48 AM"Linux('s fonts) are great"
As someone (quite happily, I might add) reading from a Debian box, Linux fonts look terrible. Not as bad as they used to mind, but still pretty bad.
Bernard on August 14, 2007 10:29 AMJeff, I'm afraid there's been some good points made. Generalizations are like assumptions.
Retrospect on August 14, 2007 11:40 AMInteresting, but it's going to take forever for the new font to become universal. Here in Upstate NY, there are plentiful signs with highly-reflective green backgrounds and faded white lettering. When headlights hit those at night, there's barely any contrast on them. But as far as I can tell from traveling, it's a problem that's been solved for 25 years.
sapphirecat on August 14, 2007 11:55 AMAs long as you're browsing the web on an LCD flat-panel, use ClearType all you want
Which is, what, 90% of the market these days? And climbing rapidly? I don't know too many people using CRTs or Plasma displays on their computers these days.
[ClearType is completely inappropriate for] text layout work intended ultimately for print
I agree we should have a choice of font rendering strategy per-app. It's mystifying to me why Apple forces this specialized mode on everyone; maybe they assume every Mac owner is going to do print work?
it's important to know when to apply a particular technique as well as when NOT to. Big sweeping generalizations are facile.
I don't think the big sweeping generalization of "try different designs and measure the difference", which is my point here, is in any way facile. The title of the post is MEASURING Font Legibility.
Jeff Atwood on August 14, 2007 12:18 PMYes, the lesson is not to assume anything about "readability" unless you've seen the research.
Furthermore, readability is complex, and depends on typeface, setting, medium, and conditions. In certain applications, perhaps reproduction is more important than readability.
FHWA was designed for reflective signs under various lighting and weather conditions, while moving at 100 kph. But Font Bureau spent big money to redesign it as Interstate, suitable for general design, and yet again as Whitney, suitable for body text in print.
http://en.wikipedia.org/wiki/FHWA_Series_fonts
http://en.wikipedia.org/wiki/Interstate_%28typeface%29
Is the type meant for editing code on the screen, or reading an article on a web page? Is it meant to be a GUI element? Is it supposed to be a typesetter's preview of a print document, or a highway engineer's design for signage? Is it meant to display fonts optimized for screen, or print, or both and then some. Or are we talking about a general-purpose rendering engine intended for all of these purposes and more?
Mr Atwood, it's not clear whether by "Microsoft's rendering strategy" you mean ClearType rendering, or fonts designed for RGB displays. I haven't seen any empirical or theoretical research comparing Quartz to Cleartype rendering's effectiveness. But a strategy that distorts the strokes of letterforms to fit the pixel grid too much is not the best for everything.
Michael Z. on August 14, 2007 12:28 PMWoops, posting lag.
I agree we should have a choice of font rendering strategy per-app. It's mystifying to me why Apple forces this specialized mode on everyone; maybe they assume every Mac owner is going to do print work?
Is it a specialized mode, or a generalized one? Quartz *does* do font hinting at smaller sizes, but never as hamfistedly as ClearType some would say. Monaco font in my text editor and terminal window renders with no antialiasing at all.
The title of the post is MEASURING Font Legibility.
Has anyone measured legibility of Quartz vs ClearType?
Michael Z. on August 14, 2007 12:32 PMI still haven't seen a scientific study which suggests which font rendering tech makes the screen more readable
The fact that Apple's technique is explicitly optimized for print isn't enough for you? Do you think it's possible to render for print output and LCD output at the same time?
I'm not saying this is wrong, but I think it's something of a zero-sum game.. you can't render for print accuracy without hurting LCD readability. Just like you can't design a font for highway signs that's also ideal for, say, newspaper print.
Jeff Atwood on August 15, 2007 2:29 AMNo, the "fact" is not enough.
"The title of the post is MEASURING Font Legibility."
Michael Z. on August 15, 2007 2:50 AMOops, sorry to be glib, Mr Atwood.
But you are making a leap and taking it for granted. Your logical conclusion is based on false premises.
* One characteristic of Apple's technique is that it uses fractional character positioning on screen. One effect of this is that it lays out the same as print. Another is that it preserves the readability characteristics of good body-text fonts.
* Apple's technique *does* make use of font hinting, at least in some fonts at small sizes. You try to deny this by saying it "is explicitly optimized for print", but that's just incorrect. Again, it's possible that more accurate rendering of well-designed fonts is beneficial for readability.
In my opinion, Apple's font-rendering strategy is a generalized one, useful for content to be displayed in print, on LCDs, or both.
Windows' font-rendering strategy is optimized *not to piss off people used to seeing aliased text*. ClearType is made for interoperability of Windows 98 and Vista. It's meant for people who use Explorer 7 on Win 98.
That ClearType is more readable on an LCD than Quartz font rendering is supported by zero evidence.
The fact that neither MS nor Apple has put forward a comparison leads me to suspect that there is no significant measurable difference under general conditions. But if you say otherwise, you really should offer one shred of evidence.
Michael Z. on August 15, 2007 3:05 AM@rupert: Jeff and I make our living developing software using the same convicted monopolists technologies. I don't care that Jeff's opinion is Windows focused, it's his opinion and I read his blog for his opinion.
@Jon: I am not taking this personally at all, and by no means have I called Jeff a nut. See my previous reply, which I will expand on here. Maybe my comment was obtuse, but it's pretty simple. In the paragraph where Jeff references his MS vs Apple font rendering post, he preceeds that closing sentence talking about and linking to scientific research on font and legibility experiments, and then links (literarially) to an opinion piece. It doesn't matter if it's his opinion or not, its the conflating of two unrelated sides of an idea, scientific research based and pure opinion.
The point of Clearview was to design a new font that was more readable. The font designers backed up their design with scientific measurement of how the font was going to be used. That has no relationship to either the MS way or the Apple way for font rendering because I still haven't seen a scientific study which suggests which font rendering tech makes the screen more readable. I use both Windows and OS X all day long, and my opinion has been that the OS X font rendering is more readable, Windows makes fonts too skinny, but again just my opinion.
You might have seen the story in the new where a study was done that shows kids think food taste better with a McDonald's logo, even though it was exactly the same.
http://www.forbes.com/forbeslife/health/feeds/hscout/2007/08/06/hscout607093.html
I would love to see an OS blind font "taste test" to eliminate OS bias, and then the same thing with OS identification thrown in to see which font rendering tech is truly more legible and readable.
Dave Murdock on August 15, 2007 6:57 AMThey're gonna update all of the highway signs in the states, isn't this the perfect time to finally switch over to metric?
Ogre on August 15, 2007 12:55 PM@Jeff: No, it's not enough.
Michael Z said it well.
Dave Murdock on August 16, 2007 4:26 AMApple's technique *does* make use of font hinting, at least in some fonts at small sizes
http://type101.fontbureau.com/archives/19
--
Providing quality anti-aliased fonts on the Mac is a bigger challenge because the Mac OS, via the appearance menu, turns off hints when anti-aliasing is turned on. This brings the need for multiple outlines to accomplish what’s shown here. On Windows, and in Linux, where hints are effective at whatever size the type designer decides, a solution is possible that could be contained in a single outline, without using any patented TT hinting, as required for Linux.
--
Though the readability improvement with the new font is obvious, I'll be sorry to see Highway Gothic replaced---it's always been the ne plus ultra of folk typography to me. And what about all the poor font geeks whose sensibilities will be shattered by seeing the two side-by-side for an n-year transition period? Two or more similar faces nearby is a freshman mistake in design. Like seeing MS Sans Serif, Tahoma, and Trebuchet MS all on the same screen. Yeah, I'm talking to you, default Windows XP theme. ;)
Alex Chamberlain on August 16, 2007 6:13 AMYeah, I'm talking to you, default Windows XP theme.
It's even worse in Vista, where there are different fonts all over the place-- no consistency, thanks to lax enforcement of design policies across the entire Borg cube working on Vista.
One of the few Vista criticisms from Chris Pirillo that I agree with.
http://chris.pirillo.com/2006/09/26/fix-windows-vistas-fonts/
Jeff Atwood on August 16, 2007 6:26 AMthe Mac OS, via the appearance menu, turns off hints when anti-aliasing is turned on.
I don't believe this is true. Have another look at my font samples
In the 11-px Times sample, Mac OS X's rendering almost exactly follows the same grid as FontFocus's hinting, but adds sub-pixel antialiasing.
There's less of a visible effect in the tiny helvetica sample, but it seems to me that Mac OS at least aligns the horizontal lines to the grid, providing a crisp baseline and top of the x-height (contrary to FontFocus's claim).
I admit this effect is subtle or invisible with most fonts and sizes, but it simply doesn't seem to be true that there is no hinting or grid-fitting at all.
Michael Z. on August 16, 2007 11:41 AMvery interesting page
Kertsz dm on August 17, 2007 3:44 AMHe puts a few sentences in about the whole font rendering battle, and almost every comment is about that, squabbling over a few pixels. If you want to whine about it, do it somewhere else. Note to Mr. Atwood: Don't let even a few words slip about you-know-what in future posts.
Nerdynerd on August 17, 2007 6:35 AMAs a programmer, I can attest that the readability of a font is very important to me. Took me a while to work out my preferred style. With the correct font, I can work. With a bad font, I just can't concentrate.
lorg on August 18, 2007 4:11 AMI think you should check out the work of E. Spiekermann for the German government, about which is his book "Stop stealing sheep, plus find how type works".
nda
Nicola D'Agostino on August 27, 2007 6:55 AMHola, donde encuentro los fonts clearview demo, download para
conocerlos y usarlos, versiones beta?
I don't know how or what to key to hit to make the font bigger when I am copying something off the web.
Brooke_hollow@yahoo.com
I am still learning about the computer. I do know how to do the font in word, but not from a website. Please someone help me.
Thank you] Ginny
@Dave Murdock: Wow - you're really taking this personally.
If you re-read Jeff's previous post comparing the font-rendering of the two OS's, you'll notice that the biggest difference is the way Microsoft focuses more on the pixel grid versus the "design" of the font.
What the "Microsoft way" gives to the highway sign is a crisp, clear font rendering that is easy to read from further away. Even though we're not talking about digital rendering of the font, it's still the same concept. If they were to use the "Apple way", the fuzziness of the font wouldn't help drivers in any way to get rid of the blur they experience when reading the signs; especially at night.
I think it's perfectly fair for Jeff to make the comment about Microsoft "getting it right" - at least when considering readability in this context.
Jon on February 6, 2010 10:08 PMThe comments to this entry are closed.
| Content (c) 2012 Jeff Atwood. Logo image used with permission of the author. (c) 1993 Steven C. McConnell. All Rights Reserved. |
Subscribe in a reader
Subscribe via email
