Serif vs. Sans for Text in Responsive Design

In today’s world, type is no longer read only in print, but also in a multitude of screen-based environments, including computers, smart phones, tablets and e-readers. Content is viewed on a range of media of the viewer’s choosing. People visit websites on their tablets and smart phones; they read e-books on computers as well as mobile devices. This array of “delivery mechanisms” adds a dimension of complexity to the designer’s job.

The Malabar™ eText typeface in use on the Barnes & Noble Nook reader.

Your design must respond to each user’s viewing environment. You cannot control how or where someone chooses to access what you have designed, but you must do your best to ensure its integrity. In a sense, you must anticipate as you design, to create the best “typographic experience” on a number of devices. Dynamically downloaded Web fonts will help ensure that your text will reflow from device to device. Many have also been speciÞcally designed and/or adapted for optimum performance in digital environments.

E-text fonts are another option when designing for small text on high-resolution media such as e-readers and mobile devices. These high-performance fonts have been designed to maintain their clarity, sharpness, and overall readability at small text sizes onscreen.

The Baskerville™ typeface, originally designed for print (upper), has been adapted for high resolution screen text (lower). The resulting font, Baskerville eText, includes adjustments to the x-height, weight, stroke contrast and spacing.

Legibility and readability of the content are key to engaging and holding the reader’s attention. So, which category of typeface is the better choice: serif or sans serif? While sans serif designs have in the past been the “type style of choice” for live text on the Web, this is no longer a given. The high resolution of much of today’s digital media, coupled with advanced font technology, has increased the clarity and legibility of fonts used for screen-based media.

So, what should you consider when deciding between serifs and sans serifs for text onscreen? In a word: readability – followed by brand-appropriateness, aesthetics and taste. A serif or a sans, specifically designed and optimized for screen-based media, is a viable option. Before you narrow your selections, do your research regarding your audience, and the media and sizes at which they will most likely be viewing the text. Test your choices early in the design process on as many platforms and devices as possible.

Today’s eText fonts can adapt to many delivery mechanisms, making both serif and sans serif designs viable options for text. Shown above are (top to bottom) the Neue Helvetica® eText, the Amasis™ eText, and the Palatino® eText typefaces.

But keep in mind that even if you select the perfect typeface and type size, most computers and some devices allow the viewer to override your settings. Nonetheless – and all the more – it is still the designer’s role to provide the audience with the most inviting reading experience possible in today’s ever-expanding digital environment.

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.