TYPOFILE - Will-Harris House

By Daniel Will-Harris

It doesn't matter how many hours of video and megabytes of graphics can be stuffed onto a silver platter, typefaces still serve an essential function that can't be duplicated by other means--transmitting complex intellectual and emotional messages in a very concise and precise way.   But the limitations inherent to reading on-screen--especially the low-resolutions of monitors, mean that the digital designer has to be more careful about choosing typefaces that are easily readable on-screen.

Consider this--a fax in normal mode is 100 dpi. As rough as that is, it's still better than Windows at 96-dpi, and almost 25% better than the Mac at 72 dpi.

Size is the key

         You can use any typeface, as long as you make it large enough. While 10 point body text is generally not a good idea on-screen. 14-16 point won't look unusually large on a monitor, and will be significantly easier to read than smaller type. If you want to use smaller type sizes, then you have to be more careful about your choice of typeface.

Weight is also important because faces that are too dark can block up and become unreadable. Faces that are too light can experience drop outs, but light faces actually tend to look better because they look simpler, cleaner, and less chunky.

Chuck Bigelow, the co-designer of the Lucida family of typefaces (with Kris Holmes)--suggests several ways to choose type that is easiest to read on-screen.

Serif or Sans?

         First, he suggests considering sans serif faces for body text. "When printed, the serifs on typefaces are only a tiny percentage of the typeface's design. But on-screen, in order to display the serifs using the limited number of available pixels, they take up a much bigger proportion of the information than they do on a printed page. Serifs should be small things--but on screen they become big--no longer visual cues but noise--distracting chunks of interference."

While some traditional serif faces don't translate well to the screen, others are excellent on-screen, and a serif's more familiar shape makes it more comfortable and familiar for most people. This site uses Memphis/Rockwell or Bitstream Geoslab703, a simple slab serif that's very comfortable on both PC and Mac. (You can download this font for free). Microsoft's Georgia is an impressive achievement in font design because it looks as sharp and clean on-screen as most type looks on paper.

Bigelow also stresses that the hinting of individual fonts can be as important as the typeface design itself. (Hinting is a process where by individual pixels of the screen are controlled when fonts are certain sizes. )

"At small sizes on-screen, the look of the face can depend more on the hinting than the original design." This means you not only have to choose an appropriate design, but a well hinted font of that design. "Even our Lucida looks different on-screen from different foundries." A well-hinted font can make a world of difference--so much so that the same typeface can be unreadable if on-screen if poorly hinted, or highly readable if well hinted.

TrueType, as a technology, has stronger hinting possibilities than Type1, but it all depends on the foundry. Bitstream and Monotype's hinting is first rate, because they developed their own technology. But other foundries' (actually, vendors) low-cost typefaces can and do look like mush on-screen.

Larger x-height

         Next, he suggests choosing a face with a large x-height. "You have very few pixels to work with on-screen, and most of a typeface's information is carried in the lowercase x-height characters. So choosing a face with a larger x-height gives you more pixels to work with for the lowercase--more pixels mean more information, which means characters have more definition. For the screen it's a good idea to have an x-height that's one pixel larger than half the body size--so a 12 point typeface would have an x-height of 7 pixels--that's how the Lucida faces are designed. X-heights larger than that give type less of a traditional "typeset" look, so capital letters start to lose their importance.

Until Cascading Style Sheets become more common (with their ability to control leading), typefaces with large x-heights can make lines of type look too close together, and uncomfortable to read.

Extra Tracking

         Finally, Bigelow suggests adding a bit of extra tracking between characters. "Collisions between characters becomes very annoying on-screen--when two characters touch even by one pixel you get a lot of noise in the tangle of shapes." Don't add too much--you want the word spaces to remain clear, just enough so the characters don't touch. Bigelow doesn't recommend his own Lucida Bright on-screen because it's spaced tight for print. His Lucida Fax, however, has extra space built-in to avoid character collisions in faxes, and on-screen.

Both Georgia and Verdana are carefully spaced so that the characters never touch, and this helps make them especially readable.

Of course, the limitations of low-res screens won't be with us forever. First, on-the-fly anti-aliasing (gray-scaling the type so it looks smoother) will be available on many systems, notably Windows 95. Done correctly, anti-aliasing allows more typefaces to look good at smaller sizes. Next, companies such as Xerox are already showing experimental flat screens with 300 dots per inch--the same as a laser printer. When that happens, choosing type for the screen will be little different than choosing it for paper.

Tips

        
  • The Bigger the better. You can use any typeface on-screen if you use it large enough.
  • The Simpler the better. For smaller text, look for typefaces with simple letterforms and larger x-heights--sans serifs are easiest to read at smaller sizes.
  • Don't touch! Touching letters are especially hard to read on-screen, so add a bit of extra tracking at small sizes.

How
they
look

         Here are examples of typefaces that work well on-screen.
  • Memphis/Rockwell or Bitstream Geoslab703. This simple slab serif is clear and easy to read. So much so that I've designed my site with this as the default font. You can download this font for free, and once you do both the Microsoft Internet Explorer 1 and newer, and Navigator 3 beta 5 and newer will automatically display all text on this site in this font.
  • Verdana and Georgia. Microsoft hired noted type designer Matthew Carter to design serif and sans serif families especially for the screen. The results are perhaps the two easiest-to-read fonts you have seen on your screen. They've both available for free download.
  • Lucida fax's serifs are not distracting on-screen, though its italics can appear bolder than the roman weight. Lucida's demi-bolds don't look very bold on some screens, or too bold on others.
  • Serifa has a solid appearance, with simple slab serifs that aren't overwhelming--the light weight 45 looks cleanest.
  • PNM Caecilia is a relatively new slab serif face with a more traditional look than other slab serif designs and attractive true italics.
  • Melior (or Bitstream's well-hinted Zapf Elliptical) has shapes that are especially clear for a serif face. The italics are true but could use some extra tracking. 10.5 point.
  • Microsoft's Times New Roman and Arial have between them more manual hinting than any other fonts. Even so, Times New Roman's smaller x-height and condensed proportions make it less comfortable on-screen.
  • Arial's extensive hinting makes it very clear on-screen, but it can appear narrow at smaller sizes, it lacks true italics and while clear, it's bland.
  • Avenir is another sans serif that works well on-screen. It has a feeling similar to Futura, but its larger x-height and more distinct letters such as the lowercase "a" make it much easier on the eye. 10.5 point.
  • Blueprint is a sans serif with the feeling or architectural lettering. It's a relief from the standard sans serif faces, has plenty of built-in spacing, but it should be used larger (11-point). Tekton tends to look a bit busy and cluttered on-screen and is spaced too tightly.
  • Monotype's new book weight of Gill Sans works better than the other weights of this popular face. Because its x-height is smaller, you might want to use it one or two points larger than the other faces here. 11-point
  • ITC Officina Sans is very popular for the nouveau-hip typewriter look, but its narrow width and tight setting can make it difficult to read unless it's opened up a bit. 10.5 point is much easier to read than 10 point.
  • ITC Legacy Sans has a softer, more classical feel to it, and true italics (which need letterspacing for the screen), but like Gill Sans, its smaller x-height means you need to use it at a larger size. 11-point.
  • Lucida Sans has a large x-height and interesting but not distracting character shapes. Its true italics are a plus because they aren't just slanted romans. Lucida uses demi-bolds instead of true bolds, so they're clear, but not very bold. 10-point
  • Myriad Multiple Master is a useful screen face because you can get precisely the right weight you want. You can also adjust the width, and the semi-extended versions are especially readable on-screen. The lightest (215) and widest (700) weights work best in small sizes, the condensed versions also look OK with additional letterspacing. The Semi-bold fares better than the normal, bold or black weights.
  • Lucida Handwriting is one of the few script faces that is solid enough to work well on-screen at anything less than large sizes.

Headline: Adobe Myriad Multiple Master in weights and widths from the narrowest to the widest, the lightest to the darkest.

Typofile Home | Will-Harris House: Home > Writing > Design > Type > Toni > Store > Kitchen