Choosing Text Typefaces for the Web
The increasingly sophisticated digital environment offers a realm of expanded possibilities for typography on the Web, both technically and creatively. The availability of fonts optimized specifically for the Web is a major contributor to this development.
It is important to appreciate the typographic distinctions between Web and desktop fonts. Web fonts are fine-tuned to enhance both character recognition and onscreen performance in a broad range of digital environments. Design and other technological improvements ensure that the fonts perform well in modest resolution environments. This is especially important for traditional text typefaces, because lower resolution rendering often tends to sacrifice fine detail, resulting in uneven and unattractive strokes and curves, irregular spacing, and overall reduced readability.
A Web font’s design differences from a desktop font can include moderate, or reduced, weight/stroke contrast; a larger x-height; more open counters; and, in some instances, modified curves and angles. Web fonts intended for text usage may have more open spacing than their desktop counterparts. Another, more technical, modification is enhanced hinting for better screen rendering.
Most Web fonts are optimized versions of desktop fonts, but some designs have also been produced “from scratch” for the Web. The former offer the possibility of using the same typeface design (albeit different fonts) for both Web and print applications, allowing for a consistent look across all media. Conversely, Web-only fonts, which have been developed specifically for maximum readability and performance in a digital environment, may not have a companion or complementary desktop version for use in print.
Before selecting a text typeface for use on the Web, consider the requirements of the project at hand:
- Who is the intended audience? Whether it be children, Millennials or seniors, sophisticated consumers or prospective employers, a typeface with the appropriate look and personality will help attract and hold their interest.
- How many weights will be needed? Two weights with italics might be adequate for some communications, but other projects may warrant additional weights and versions in order to create good visual hierarchy for subheads, charts, listings, initials – and general emphasis.
- Are there typeface branding requirements and/or style guidelines to keep in mind? If so, use Web-optimized versions that maintain legibility and translate well to the Web.
- Will there be multi-language requirements? If so, select a typeface or family that supports the necessary languages.
- What devices will the site be viewed on, and at what resolution(s)? Users search, read and shop not only on desktop or laptop computers, but also on mobile devices and tablets. Consider how your selected typeface will look in all potential viewing environments.
Before finalizing your selection, test your font possibilities on as many devices and environments as possible – from low to high resolution, and from the largest to the potentially smallest type sizes (usually a mobile device). In addition, make sure any fonts you choose include the appropriate license for your intended Web usage.
All trademarks are the property of their respective owners. Additional information regarding Monotype’s trademarks is available at monotype.com/legal. Fontology is a trademark of Monotype Imaging and may be registered in certain jurisdictions.
- Editor’s Note:Ilene Strizver, founder of The Type Studio, is a typographic consultant, designer and writer specializing in all aspects of typographic communication. She conducts Gourmet Typography workshops internationally. Read more about typography in her latest literary effort, Type Rules! The designer's guide to professional typography, 4th edition, published by Wiley & Sons, Inc. This article was commissioned and approved by Monotype Imaging Inc.