A Woman in Need : By Lateef Adeola Sanus
Benton Modern, A Case Study On Art-Directed Responsive Web Typography

27 May, from Smashing Magazine

Having the ability to set legible body copy is an absolute must, and we’ve come a long way with web typography since the dawn of web design. However, I feel like we have allowed the lack of variety prior to the rise of web fonts to dampen our creativity now thatthousands of web fonts are at our disposal. Have usability conventions and the web’s universality steered us away from proper art direction? Have we forgotten about art direction altogether? I believe so.

As designers, we can achieve much more with type, and with just a little more thought and creativity, we can finally start to take full advantage of the type systems available. Let’s look at ways we can push typographic design on the web further, beyond the status quo of today.

¹

Benton Modern Formal version. (View large version²)

The Benton Modern brochure website³ (a project I was involved in) is a perfect example for showcasing how a large type family can be utilized to improve legibility and readability across breakpoints, while at the same time evoking emotion and providing a pleasant experience. We shall explore the ideas introduced to push the boundaries of typographic design on the web and get practical, too, with a key focus on responsive web typography.

First, The Basics Of Responsive Web Typography

You’re probably aware of responsive web typography by now and how it can solve challenges outside of core responsive web design. However, as the focus of this article isn’t on the ins and outs of responsive web typography, we shall not be exploring it in any great detail.

If you’re interested in learning more about general typesetting for the web and how to approach certain issues, many⁴ resourcesexist⁵ to help you.

Furthermore, my “Responsive Typography⁶” talk and chapter in Smashing Book 4⁷, in which I propose reusing “traditional” typography rules and translating them to the language of CSS, should help kickstart any aspiring web typographer to improve their typography game.

To also help you on your way, here’s a quick rundown of some of the methods I’ve been advocating in recent years, methods that were applied to the Benton project, too:

• Provide different font sizes for different reading distances, currently achievable by detecting a device’s form factor using @media queries. Long term, this is probably not ideal — that is, until reading distance-detection techniques⁸ become more feasible. In the meantime, use Size Calculator⁹ by Nick Sherman¹⁰ and Chris Lewis¹¹ to calculate the physical or perceived font size when factoring in reading distance.
• Maintain perfect proportions in a paragraph with letter spacing, word spacing and line height properties for each breakpoint.Universal Typography’s demo¹² by Tim Brown¹³ of Nice Web Type¹⁴ is a very useful tool that can help you experiment with and adjust your paragraph proportions accordingly.
• Establish hierarchy using either a typographic scale (Modular Scale¹⁵ is a useful tool by Tim Brown and Scott Kellum¹⁶) or different styles at the same font size — for instance, uppercase for h2, small caps for h3 and italics for h4 subheads. For more options and ideas on styling subheads, may I suggest you read “Setting Subheads With CSS¹⁷” and explore examples of subheads set with CSS¹⁸.
• For small screens, indent paragraphs and separate page sections with white space. For large screens, use block paragraphs and separate page sections with graphical elements (lines, shapes, color).
• Use graded fonts to normalize rendering across different pixel densities. Font grades are very subtle font weights used to compensate for different ink and paper qualities, as well as for different pixel densities on screen. This method is explained in detail in iA¹⁹’s article “New Site With Responsive Typography²⁰.” In short, lighter grades are used for low-DPI screens and heavier grades for high-DPI screens, while graded fonts will also compensate for different sub-pixels’ direction between portrait and landscape mode on mobile and tablet devices.
• Look for type families that have multiple optical sizes²¹, and use appropriate styles for body copy, tiny text and display sizes. For instance, Font Bureau²², the company behind the Benton Modern family, makes many families like this with a wide stylistic palette.
• Use different font widths according to the width of the screen (see what happens with the subheads on the Benton website²³when you resize the browser window). For instance, use a condensed font for small screens and a wider font for larger desktop screens, just like on the brochure website for Input²⁴ (again, resize the window). In the case of the Benton project, we set different font widths manually for each breakpoint, but there’s also a solution for automatic swapping using Font-To-Width²⁵ (by Sherman and Lewis) that takes advantage of multiple-width type families to fit pieces of text snugly within their containers.
  Here’s another tip: If you intend to use Georgia or Verdana on large screens, replace them with Georgia Pro Condensed or Verdana Pro Condensed²⁶ on mobile screens. The reason why Georgia Pro and Verdana Pro’s condensed widths work well at small sizes is because they aren’t extremely condensed and, hence, can still be read comfortably.

With this basic primer on responsive web typography out of the way, let me walk you through the process of designing a web page that is meant not only to inform, but to amaze!

Show, Don’t Tell

Webtype²⁷ commissioned us to build a brochure website for Benton Modern soon after Indra Kupferschmid²⁸ had seen my talk on responsive web typography at Smashing Conference in Oxford. The brief was to showcase what could be achieved typographically with a versatile type family coupled with responsive web typography using as many responsive techniques as possible, essentially putting into practice the elements presented and demonstrated in my talk. With Indra Kupferschmid as the chief type savant and Nick Sherman as the onboard quality assurance director, there was certainly to be no trouble with experimenting and pushing the boundaries.

From the very start, we wanted the user to experience the type family through the design and not just through a full page of body copy. That being said, in searching for the right metaphor to use, we eventually settled on creating two distinctive designs — the formal²⁹ and the expressive³⁰. Both are fully responsive, utilizing the same HTML, and for all intents and purposes showcase the benefits of separating structure from presentation, so don’t forget to resize your browser and inspect the HTML and CSS.

Learning About The Typeface

Indra’s elaborate copy was a good starting point to get to know the typeface. When you receive content up front, as was the case in this project, it’s so much easier to create semantic HTML and to explore different styles. Here’s how we started our investigative testing, bearing in mind that Benton Modern comprises 48 styles in total:

1. First, we tested all of the styles at large and small sizes, stretching and squeezing every which way possible. We used Reading Edge optical sizes³¹ (designed for 9- to 14-pixel font sizes) as subheads, and display optical sizes (designed for headlines) for body copy. We wanted to see what could go wrong and challenge the intended use for each style. However, the solution that we settled on was still pretty much in line with the intended use for each optical size.
2. Next, we tested how different styles behave in narrow columns versus wider blocks of text. Hyphenated and justified verus left-aligned. Tightly spaced versus loosely spaced.
3. Lastly, we analyzed all of the glyphs one by one, searching for little hidden gems. Apart from the ampersand — which is always an obvious choice — another good candidate was the uppercase R.

³²A Woman in Need : By Lateef Adeola Sanusi