Print vs Web fonts: What’s the difference?

Q What is the difference between the fonts I use for print, and the web font version of the same design? Do I need both, and are they interchangeable?

A Although they both might be based on the same design, there are usually differences in the design, spacing, and licensing of each. Fonts intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. This can include a taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs. Another important adjustment – especially for fonts intended for smaller sizes – is more open spacing. All of these factors serve to improve character recognition and overall readability in the non-print environment, which can include the web, ebooks, ereaders, and mobile devices.

Web fonts come in two varieties: unique designs formulated specifically for the web, and optimized versions of desktop fonts. Unique designs have the advantage of being developed specifically for maximum readability and performance in a digital environment. The possible downside is there might not be a corresponding desktop version tailored for use in print.

The second category – desktop fonts optimized for the web – is the largest of the two as foundries scramble to make their font collections available for use onscreen. The advantage of these is that using the same typeface design (albeit different fonts) for both web and print allows for consistent branding and uniform typographic presence across all media.

It is important to note that the optimization from desktop font to the web can be done on an individual basis resulting in a high-quality conversion, or it can be completely automated, sometimes resulting in poor performance and readability. Therefore, be sure to view your intended font choices at the full range of sizes they will be used at (especially the smallest size) and test on the full range of devices, platforms, screen sizes, resolutions, etc. 

Some foundries offer web fonts designed for particular sizes and devices. For instance, Monotype’s eText Collection consists of new and existing designs crafted specifically for onscreen reading. Some are reworked classics, such as Galliard, Sabon, Baskerville and Palatino, while others are entirely new designs. And then there is Font Bureau’s Reading Edge™ Series which consists of eight font families, each with four basic styles, designed to function reliably at 9px–18px. More and more foundries and web font services are offering size-specific web fonts, so be sure to check them out before making your selection.

Licensing Issues

Many designers make the mistake of thinking they can use their desktop fonts for live text on the web and other digital devices, especially if they are for display and/or appear to render well on screen. But not only is this unethical, it is in essence stealing. Most desktop fonts come with a licensing agreement (aka EULA) that allows for desktop usage only, that is, for print. Web fonts (as well as other fonts intended for onscreen reading) are usually specifically licensed for the web and/or other digital devices and usages. Don’t commit a type crime – be sure to check with the foundry or web font service to make sure you have the appropriate fonts and licenses for their intended usage. It might mean purchasing a new font, or just getting a revised license from the foundry, but whichever it is, be sure to do the right thing to avoid having the type police come knocking at your door! 

ITC Galliard and ITC Galliard eText, a member of Monotype’s eText Collection, vary considerably. The eText version has been enhanced for onscreen reading with a slightly taller x-height, a less pronounced weight contrast, proportionally heavier thin strokes and serifs, and an overall heavier appearance.

 

Font Bureau’s Antenna, a stylish square sans design, has been optimized for onscreen reading as part of their Reading Edge™ Series, and consequently named Antenna RE. The overall design appears the same at first glance, but the more generous letter spacing and some skillful design tweaks contribute to a much more readable typeface for text.

 

The differences between the ITC Galliard originally intended for print and ITC Galliard eText, an enhanced version for onscreen reading, are considerable as seen in the comparison on the left. On the other hand, Antenna – a contemporary sans with very moderate weight contrast – required fewer major design changes in its transition to Antenna RE. One modification noticeable upon magnification is the extended crossbar and tail of the lowercase t. 

***

Ilene Strizver, founder of The Type Studio, is a typographic consultant, designer, writer and educator specializing in all aspects of visual communication, from the aesthetic to the technical. Her book, Type Rules! The designer’s guide to professional typography, 3rd edition (4th in the works), has received numerous accolades from the type and design community. She conducts her widely acclaimed Gourmet Typography Workshops internationally.  For more information on attending one or bringing it to your company, organization, or school, go to her site, call The Type Studio at 203-227-5929, or email Ilene at info@thetypestudio.com. Sign up for her free e-newsletter, All Things Typographic, at www.thetypestudio.com.

Tags
Posted on: September 17, 2013

Ilene Strizver

Ilene Strizver, founder of The Type Studio, is a typographic consultant, designer, writer and educator specializing in all aspects of visual communication, from the aesthetic to the technical. Her book, Type Rules! The designer’s guide to professional typography, 4th edition, has received numerous accolades from the type and design community.

4 Comments on Print vs Web fonts: What’s the difference?

  1. Hi, great article.

    can you please comment on the effect of retina screens and when dot size isn’t an issue. Does backlit vs reflective lit make a difference. Can software drive the representation s depending on device and mulscrees display systems?

    thankyou!

  2. If t lowercase has crossbar what is then cross stroke?

  3. Respondio muchas preguntas que tenia, gran explicacion, gracias.

  4. Suzanne Montazer

    September 3, 2015 at 8:01 am

    This article was so helpful that I just purchased your book too. As print designer transitioning to web and ebooks I know I need to learn more about type in the electronic medium.

3 Trackbacks & Pingbacks

  1. Web Typography | alanahardee
  2. If You’re Reading This, It’s Web Type. – camboudia
  3. Typography

Leave a comment

Your email address will not be published.


*