Click here to buy from Amazon. Way back in 2007, I was working as an interactive designer for Sprint when it was becoming Sprint-Nextel. A brand refresh was part of this, and there was to be massive amounts of italic (well, oblique) type all over the place. As usual for branding, no one had thought of digital display, so it was just pressing print brand standards into play. I went to some effort to find out why this was terrible, and wrote it down on a public blog post once the new brand went live.

The original article can be read here.

I would love to be able to retire it, but I keep getting lots and lots of hits on that blog post, and cannot find a lot of other good information. So, this seems to be a key information source. Hence, I am just updating and placing it here. Sadly, this didn't make the book, though the basics are in there.

Avoid Italics and Obliques for Digital Display

As a general rule, italics and obliques should be avoided for digital display devices.

Overall, its just about resolution. Type traditionally is smoothly drawn or pressed; pen strokes or lead type create lines going any direction. Any irregularity from beat-up type, or paper texture was inconsequential at normal sizes (usually) and regardless had no direction, so italics with their angles suffered no discernability issues. In reproducable print, from the dawn of photo-lithography to today, the screen (whether angled, straight or stochiastic, square, round or oval) is of such high resolution that all shapes appear essentially straight. Except for very straight lines very close to (but not quite /at/) the screen angle, everything looks smooth and sharp.

Unlike print, the low resolution of type on the digital display means that angled items, like the vertical in italic type are rendered as a series of sharp steps. Cleartype, Smoothtype and other technologies try to mitigate this with a sort of anti-aliasing (sub-pixel rendering), but its imperfect; the sharpness cannot be preserved with such technologies. Its just a limit of physics.

View a larger version of this image.

Additionally, pixels are not like halftone dots. While a relationship can be drawn between print and digital resolutions, it is not directly equivalent. Printed matter uses circular (sometimes oval) dots, which vary in size depending on the density of the printing required. Pixels are squares, are always the same physical size, and change only luminance.

Halftone screen, zoomed in enough to see the individual dots.

Color displays have even more complexity, as they are composed of several colored pixels adjacent to each other (generally), and which merely appear to be a single square pixel at conventional digital resolutions.

Pixels on an LCD-TFT display. The black areas are letters, the colored areas will appear as white to the user.

Digital displays can be anywhere from 80 to over 300 ppi. The lower resolutions will display the stairstep effect discussed above, to the naked eye. However, anything over about 250 ppi can be assumed, even for mobile devices (held very close to the eye, so with higher angular resolution) to be of sufficient resolution that stress, obliques and italics can be used successfully. See Size of the Stimulus: Visual Angle to perform your own math on the exact sizes needed for your device at particular viewing distances.

However, the low cost and relative longevity of many devices with lower resolutions means they will continue to exist, and new ones will be made, for at least decades to come. Unless you know for a fact every user has a smartphone with a high resolutions screen, you must assume poor resolutions and avoid italics and obliques.

There are additional issues with readability (comprehension, fatigue) of italics or oblique faces in print as well. Do not use italics or obliques for all the body copy. If there are long quotes phrases, or large sidebars, be careful about using italics or obliques for these as well or you may see the same results; users will not read or not comprehend as well as they skim the type.

As it turns out, I never found the text of any large, well-done study that absolutely proves users cannot read jagged type. There's reference to one, and that's good enough for me. However, aside from the logic shown above, Fred Pilgrim (who worked for me at the time) collected this list of research, technical knowledge and anecdotal information from others. Interesting quotes about italics are here directly, but follow the link for context and more useful info. The IE box model bug is a great one I had forgotten about. Seen a similar one with Verdana (I think) having a space/letterform issue with their Ws.

http://www.grc.nasa.gov/WWW/usability/textfontcss.html (Link broken, cannot find very brief guideline article, but archive of it here http://web.archive.org/web/20070106061855/http://www.grc.nasa.gov/WWW/usability/textfontcss.html)

http://www.jimbyrne.co.uk/show.php?contentid=53

http://pcworld.co.nz/pcworld/pcw.nsf/how-to/put-yourself-in-their-shoes

http://www.smartisans.com/articles/web_writing.aspx

http://www.456bereastreet.com/archive/200501/ie_and_italics/


Next: Readability and Legibility Guidelines


Discuss & Add

Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here.

Examples

If you want to add examples (and we occasionally do also) add them here.

Make a new section

Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.

Italics and Obliques For Digital Display (last edited 2013-04-08 20:05:00 by shoobe01)