Choosing Display Typefaces for the Web

Typography on the Web has advanced by leaps and bounds, both technically and creatively. The availability of display fonts optimized specifically for the Web has greatly increased typographic freedom. Advanced browsers now have the capability to display dynamically loaded fonts, so typography on the Web can achieve levels of excellence not previously possible. Consequently, the selection of Web fonts for display usage has become as broad, and as important, a task as it has always been for print.

Choose display typefaces that evoke the mood and tone of the content, as demonstrated above in the illustrative words set in the Burlingame®, Mandevilla™, and Charcuterie Etched typeface designs.

Using Web fonts for display is preferable to using web-safe fonts or to converting type to a static image, for several reasons:

Web fonts offer the creative potential for original solutions and greater expressiveness – helpful for attracting viewers in the highly competitive Web environment – as compared to the extremely limited previous palette of “web-safe” fonts.
Display type set as live copy, as opposed to converting it to a static image, is search engine friendly. It is also scalable, editable, and faster loading than most graphics.
For branding purposes, the wide selection of fonts available for both the Web and desktop usage facilitate consistency. Marketing materials, ad campaigns, and other key communications can have the same look both in print and on the Web, reinforcing brand identity.

Before selecting a display typeface for use on the Web, review the goals of the project in its broadest context:

Who is the intended audience? Choosing a typeface that will appeal to whomever you want to attract is a great starting point, bearing in mind that the typeface must also be appropriate for the content and purpose.
Does the project have typeface branding requirements and/or style guidelines? If so, adhere to these parameters and use Web-optimized versions that are licensed for this usage.
How many weights are needed? One weight or version might be sufficient for a single or reoccurring headline treatment, but some projects might benefit from an italic or additional weights for emphasis, subheads or other treatments. Keep in mind that extreme weights and versions (very light, very condensed, etc.) should be avoided, as they tend not to show up clearly on small screen devices.
What other typefaces will the display settings be combined with? Make sure your display fonts combine well with the body text treatment.
Are there multi-language requirements? If so, be sure to select a typeface that supports the necessary languages.

Consider in advance how many weights you might need for a display setting on the Web. While the Fling™ typeface is only available in one weight, the Samantha family has four versions which might be useful for multiple or hierarchical type treatments.

As always, view your potential typeface(s) on as many devices and environments as possible #150; from low to high resolution, and at the largest to the potentially smallest type sizes #150; to ensure that your selections maintain their readability and can achieve your objectives. Taking the time to explore all design possibilities, as well as technical and performance issues, early in the process will assure the most effective results.

Select display designs that combine or contrast harmoniously with your chosen text typeface(s). The upper two examples use contrasting typefaces for text and display (the DIN Next typeface with the PMN Caecilia® eText designs, and the Hummingbird design with the Gill Sans® typeface), while the bottom showing uses two weights from the same family (the ITC Woodland™ design).

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.

Are you new?

Discover legacy content from Fonts.com, preserved for your reference.

Choosing Display Typefaces for the Web