Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Benton Modern, A Case Study On Art-Directed Responsive Web Typography

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 that thousands 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 version1
Benton Modern Formal version. (View large version2)

The Benton Modern brochure website3 (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 Link

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, many4 resources exist5 to help you.

Furthermore, my “Responsive Typography6” talk and chapter in Smashing Book 47, 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 techniques8 become more feasible. In the meantime, use Size Calculator9 by Nick Sherman10 and Chris Lewis11 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 demo12 by Tim Brown13 of Nice Web Type14 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 Scale15 is a useful tool by Tim Brown and Scott Kellum16) 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 CSS17” and explore examples of subheads set with CSS18.
  • 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 iA19’s article “New Site With Responsive Typography20.” 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 sizes21, and use appropriate styles for body copy, tiny text and display sizes. For instance, Font Bureau22, 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 website23 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 Input24 (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-Width25 (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 Condensed26 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 Link

Webtype27 commissioned us to build a brochure website for Benton Modern soon after Indra Kupferschmid28 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 formal29 and the expressive30. 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 Link

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 sizes31 (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.
An early stage prototype32
An early-stage prototype. (View large version33)

From there, the next step was to apply some basic styles to the page. One of the early ideas was to adopt a traditional newspaper column layout, which we tried. With the exception of this high-level concept, we still didn’t have a definitive layout concept by this point.

Indented paragraphs in columns were too narrow to be justified and hyphenated34 properly, so we just kept the hyphenation to improve the texture a little bit.

.columns p {
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;
}
.columns p + p {
   text-indent: 1.5rem;
}

We used columns only when there was enough horizontal space. But we also wanted to avoid columns bleeding out of the screen vertically, because that would require scrolling up and down during reading when moving from column to column. That’s why we introduced another @media query to test the height of the screen before applying columns.

@media only screen and (min-height: 25em) {

   @media only screen and (min-width: 40em) and (max-width: 59.9375em) {
      -webkit-columns: 2;
      -moz-columns: 2;
      columns: 2;
      -webkit-column-gap: 2.7em;
      -moz-column-gap: 2.7em;
      column-gap: 2.7em;
   }

   @media only screen and (min-width: 60em) {
      -webkit-columns: 3;
      -moz-columns: 3;
      columns: 3;
      -webkit-column-gap: 2.7em;
      -moz-column-gap: 2.7em;
      column-gap: 2.7em;
   }
} 

Designing Content Link

The next step was to analyze the content in more detail. That way, we were able to establish what the different sections were and adjust the details as we went along.

The formal version was the first to be developed. We created a huge headline to reflect newspaper headlines and added the year that the series started. The deck was the obvious element to style next. We experimented with a condensed version, and to our surprise it worked immediately. At that stage, the page navigation still didn’t exist and was only included much later on to improve overall usability, as well as to demonstrate the use of brackets as graphic elements.

The sections were a little dull, though. The hierarchy and arrangement of subhead, intro paragraph and columns were quickly established using the rules explained previously, but something was still missing. After some trial and error, we decided to separate the different sections with dotted borders to further emphasize the fine detail in the design of the Benton Modern series, and we introduced the section sign § (Alt + 6 on a Mac) to mark the sections. However, that still wasn’t good enough, so we again previewed numerous glyphs to find suitable candidates for other sections. We ended up using § for “About,” • for “Optical Sizes,” an italic i for “How to Use,” + for “Bonus Features” and * for “Pairings.” Some of these characters are rarely used in web design, so introducing them as decorations felt natural.

Plenty of little details35
Plenty of little details. (View large version36)

At this point the design was pretty solid, but we still needed to highlight the most impressive facts to showcase to the reader the inherent versatility of the family. So we established a no-nonsense look and feel by enlarging the important numbers: 3 optical sizes, 48 styles to choose from, and 4 widths in display styles.

The first version of pairing swatches was set in Pinterest37-inspired columns, as with the rest of the sections. Yet we had a need to change it — at least slightly — because this section was not about Benton Modern, but about its companions. Benton Modern RE fonts38 are really great at small sizes, so introducing the pairs as contrasting large headlines made sense. Indra’s selection of pairings worked very well without many additional adjustments. The only areas that required special attention were the custom sizes for each headline, especially if we wanted the headlines to resize with the screen.

Viewport Width For Smooth Type Scaling Link

The only CSS units that support smooth scaling are vw (1% of the viewport’s width), vh (1% of the viewport’s height), vmax (1% of the longest side) and vmin (1% of the shortest side). The resulting CSS for one headline is composed of three font-size declarations — values in pixels, root ems39 (rems) and viewport widths — one for each flexible breakpoint (small to medium screens) that covers older browsers, too:

#swatch-benton-sans h1 { 
   @include rem(font-size, #{208/16}); 
}
@media only screen and (max-width: 29.9375em) {
   #swatch-benton-sans h1 {
      @include rem(font-size, #{57/16}); 
      font-size: 18.75vw; 
   }
}
@media only screen and (min-width: 30em) and (max-width: 61.9375em) {
   #swatch-benton-sans h1 {
      @include rem(font-size, #{86/16});
      font-size: 20vw; 
   }
}

As you can see, we’re using a Sass mixin here. It returns the given property with values in pixels, as well as in root em units.

@mixin rem($property, $values) {
   $max: length($values);
   $pxValues: '';
   $remValues: '';
   
   @for $i from 1 through $max {
      $value: strip-unit(nth($values, $i));
      $pxValues: #{$pxValues + $value*16}px;
      @if $i < $max {
         $pxValues: #{$pxValues + " "};
      }
   } 
   
   @for $i from 1 through $max {
      $value: strip-unit(nth($values, $i));
      $remValues: #{$remValues + $value}rem;
      @if $i < $max {
         $remValues: #{$remValues + " "};
      }
   } 
   
   #{$property}: $pxValues; 
   #{$property}: $remValues; 
}

OpenType Features Link

Whenever you need to showcase important details within the content — in this case, OpenType features such as the alternate R, the ligatures and the small caps — it’s always good to highlight these features in an interesting way. We didn’t want to use CSS images for graphic details, so we simply enlarged the type and brought the details to focus. The difference between ligatures and default glyphs is clear, and comparing small caps with uppercase and lowercase counterparts is easy.

OpenType Features40
OpenType Features. (View large version41)

If you were wondering how to enable OpenType features in CSS, here are a couple of examples with vendor prefixes:

/* Alternate characters */
-webkit-font-feature-settings: "ss01";
-moz-font-feature-settings: "ss01" 1;
font-feature-settings: "ss01";

/* Common ligatures (ff, fi, ffi, fl, ffl, fj, …) */
-webkit-font-feature-settings: "liga";
-moz-font-feature-settings: "liga" 1;
font-feature-settings: "liga";

/* Small caps */
-webkit-font-feature-settings: "smcp";
-moz-font-feature-settings: "smcp" 1;
font-feature-settings: "smcp";

You can test all of the OpenType features available with CSS in Richard Rutter42’s CSS3 Font-Feature-Settings OpenType Demo43. Consult Bram Stein44’s excellent The State of Web Type45 to check which features are supported in which browsers and to what extent.

OpenType Features in Safari Are… a Drag Link

There’s one piece of bad news. Safari on both Mac and iOS support OpenType features but ignores any assigned value46. The safest way to use alternate characters or small caps in Safari is by loading subset fonts (subset fonts contain only a subset of glyphs from the full font file). For the Benton Modern project, we decided to test browser capabilities with @support before applying small caps, and we provided a fallback for browsers that don’t support font-feature-settings:

@supports ((font-feature-settings: "smcp") or
   (-webkit-font-feature-settings: "smcp") or 
   (-moz-font-feature-settings: "smcp" 1)) {
   .small-caps {
      text-transform: lowercase; 
      -webkit-font-feature-settings: "smcp"; 
      -moz-font-feature-settings: "smcp" 1;
      font-feature-settings: "smcp"; 
   }
}

Expressive Details Link

The Formal newspaper-inspired style looked really great. It was well organized, with plenty of small details. But we wanted to push the design a little further. How about creating a magazine-inspired design? We retained the same emphasis on elements as in the formal version but fed the opening section and all section subheads with steroids using pseudo-elements (for example, the R and the asterisk on the “cover” page), and we created a specific arrangement for each subhead by repositioning each word in a subhead in a Lubalinesque47 manner.

Expressive Details48
Expressive Details. (View large version49)

3D Effects Link

The 3D effect on “The Complete Series” was achieved with multiple text shadows, as explained in Tim Brown’s Typekit Practice50 lesson “Using Shades for Eye-Catching Emphasis51.”

3D Effects52
3D Effects. (View large version53)

Drop Caps Link

Drop caps can be achieved simply by floating the first character. But vertical metrics complexities54 as well as cross-browser inconsistency make it virtually impossible to get drop caps right. Luckily, Adobe engineers wrote dropcap.js55, a small script that solves that problem. The setup is very straightforward, and it’s easy to adjust positioning by specifying the number of lines the drop cap should span, as well as the height of the drop cap itself. There’s a bonus: The script doesn’t require any external JavaScript libraries.

var dropcaps = document.querySelectorAll('.drop-cap');

if (window.innerWidth < 600) {
   window.Dropcap.layout(dropcaps, 3);
} else {
   window.Dropcap.layout(dropcaps, 5, 3);
}
Drop Caps56
Drop Caps. (View large version57)

Flipped and Rotated Type Link

All elements that needed special treatment were wrapped in their respective spans and given dedicated class names. This meant adding non-semantic markup, but there was no other way around it, especially if we wanted to take full control over the presentation.

Flipped and Rotated Type58
Flipped and Rotated Type. (View large version59)

We flipped parts of the pairings section subhead with the transform: scale rule. The great thing is that if the transform property is not supported by the browser, nothing will happen.

.flip {
   display: block;
   -webkit-transform: scale(-1, -1);
   -moz-transform: scale(-1, -1);
   transform: scale(-1, -1);
}
Flipped and Rotated Type60

Flipped and Rotated Type. (View large version61)

The same applies to the O in the “Bonus Features,” which we rotated with the transform: rotate rule. When rotating letters, you might want to readjust the positioning after rotation (watch out for the aforementioned vertical metrics issues). The values will vary from typeface to typeface and glyph to glyph, so there’s no generic rule.

.o {
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
   /* Glyph-specific adjustments */
}

Setting Expressive Subheads Link

Setting responsive expressive subheads is a piece of cake when you grasp the underlying concept. We need to do only two things:

  1. set the font size of a container in viewport width units,
  2. size everything that’s inside the container in em units.
<div class="container">
   <h1>
      <span class="s1">You</span>
      <span class="s2">&</span>
      <span class="s3">Me</span>
   </h1>
</div>

Elements inside the container can be repositioned either absolutely or using negative margins. If you’re using absolute positioning, then it’s best to fix the aspect ratio of the h1, thus retaining proportions. If you’re fixing the aspect ratio, you can also use percentages instead of ems, because now you have a height reference for vertical properties in place.

Setting Expressive Subheads62

Setting Expressive Subheads. (View large version63)

Example of positioning with margins:

.container {
   font-size: 10vw;
}
.container h1 {
   font-size: 1em;
   line-height: 1;
   width: 100%;
}
.s1 {
   margin-left: 1em;
   margin-top: 1em;
}

Example of absolute positioning:

.container {
   font-size: 10vw;
}
.container h1 {
   font-size: 1em;
   line-height: 1;
   position: relative;
   width: 100%;
   height: 0;
   padding-top: 75%; /* 4:3 aspect ratio */
   padding-top: 50%; /* 2:1 aspect ratio */
}
.s1 {
   position: absolute;
   left: 10%;
   top: 10%;
}

Voila! Compare all three positioning variants in the Expressive Web Typography64 demo.

Steal Ideas! Link

Now you hopefully see how far we can take typography on the web. To take full advantage of the methods discussed in this article, look for type families with multiple font styles and optical sizes. The only reason we were able to make all of these responsive adjustments is that the Benton Modern is such a versatile typeface family with so many variants.

View the HTML and CSS source on Benton Modern65, use those techniques to improve typography in your own projects, and let us know if you come up with something different. Setting type on the web still involves a lot of manual labor, especially for the smaller, more delicate details, but typographic tools are emerging66 to speed up the process. Until then, don’t be intimidated because there is always a solution to a given problem. The next time you are offered a challenging project, bite the bullet, test like crazy, and do whatever it takes.

(al, ml)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2015/05/01-formal-opt.png
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2015/05/01-formal-opt.png
  3. 3 http://bentonmodern.webtype.com/
  4. 4 http://nicewebtype.com/
  5. 5 http://rwt.io/
  6. 6 https://vimeo.com/96406270
  7. 7 https://shop.smashingmagazine.com/products/smashing-book-4-ebooks
  8. 8 http://webdesign.maratz.com/lab/responsivetypography/
  9. 9 http://sizecalc.com
  10. 10 http://nicksherman.com
  11. 11 http://chrislewis.codes
  12. 12 http://universaltypography.com/demo
  13. 13 https://twitter.com/timbrown
  14. 14 http://twitter.com/nicewebtype
  15. 15 http://modularscale.com
  16. 16 https://twitter.com/scottkellum
  17. 17 http://blog.typekit.com/2013/07/25/setting-subheads-with-css/
  18. 18 http://webdesign.maratz.com/lab/subheads/
  19. 19 http://ia.net
  20. 20 http://ia.net/know-how/responsive-typography
  21. 21 http://kupferschrift.de/cms/2012/05/multi-axes-families/
  22. 22 http://www.fontbureau.com/
  23. 23 http://bentonmodern.webtype.com/
  24. 24 http://input.fontbureau.com/info/
  25. 25 http://font-to-width.com
  26. 26 http://georgiaverdana.com
  27. 27 http://www.webtype.com/
  28. 28 http://kupferschrift.de/
  29. 29 http://bentonmodern.webtype.com/formal/
  30. 30 http://bentonmodern.webtype.com/expressive/
  31. 31 http://www.fontbureau.com/ReadingEdge/
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2015/05/02-early-opt.png
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2015/05/02-early-opt.png
  34. 34 http://practicaltypography.com/hyphenation.html
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2015/05/04-separators-opt.png
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2015/05/04-separators-opt.png
  37. 37 https://www.pinterest.com/
  38. 38 http://www.webtype.com/font/bentonmodern-re-family/
  39. 39 http://www.w3.org/TR/css3-values/#rem-unit
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2015/05/03-opentype-opt.png
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2015/05/03-opentype-opt.png
  42. 42 https://twitter.com/clagnut
  43. 43 http://clagnut.com/sandbox/css3/
  44. 44 https://twitter.com/bram_stein
  45. 45 http://www.stateofwebtype.com/#font-feature-settings
  46. 46 http://www.stateofwebtype.com/#font-feature-settings
  47. 47 http://lubalincenter.cooper.edu
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2015/05/benton-expressive.png
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2015/05/benton-expressive.png
  50. 50 http://practice.typekit.com/
  51. 51 http://practice.typekit.com/lesson/using-shades/
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2015/05/06-3d-opt.png
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2015/05/06-3d-opt.png
  54. 54 http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/
  55. 55 http://webplatform.adobe.com/dropcap.js/
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2015/05/07-dropcap-opt.png
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2015/05/07-dropcap-opt.png
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2015/05/08-flipped-opt.png
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2015/05/08-flipped-opt.png
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2015/05/09-rotated-opt.png
  61. 61 https://www.smashingmagazine.com/wp-content/uploads/2015/05/09-rotated-opt.png
  62. 62 https://www.smashingmagazine.com/wp-content/uploads/2015/05/10-optical-sizes-subhead-opt.png
  63. 63 https://www.smashingmagazine.com/wp-content/uploads/2015/05/10-optical-sizes-subhead-opt.png
  64. 64 http://webdesign.maratz.com/lab/expressive-web-typography/
  65. 65 http://bentonmodern.webtype.com
  66. 66 http://typetester.org
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Marko Dugonjić is a designer from Velika Gorica, Croatia. As the user experience director at Creative Nights, he improves customers’ digital experience for local and international clients, speaks at international web design conferences and runs in-house workshops. He founded Typetester, a popular web typography design tool.

  1. 1

    This is a great article about web typography, with some lovely details for designing expressive type, but there’s a huge omission which makes the whole thing tricky to get on board with: performance.

    The brochure site mentioned is 2.7MB at 44 requests, which took an initial 7.21 seconds to load on my fast desktop and superfast home braodband (and incidentally 2.5 minutes for the whole site to complete due to a 3rd party file timing out).

    On an emulated iPhone in Chrome Dev Tools, the number of requests and file sizes is the same. The fonts are 2.23MB of that payload. If I throttle dev tools to emulate a “regular 3G” network, it takes over 30 seconds to load the site. Throttling to a “good 2G” network, it’s a whopping 52 seconds, and a “regular 2G” connection takes 1.5 mins to complete.

    Now, I appreciate it’s a brochure site for a font, and that you wouldn’t have this much overhead on a typical web-page, but still… no mention of the performance hit of using web-fonts is a serious oversight in an article like this and should be addressed.

    Designing solely for aesthetics at the expense of performance is no longer an option in modern web design and I’m surprised at the omission.

    9
    • 2

      Hi Matt, thank you for raising this question. The early draft outline did indeed include a section on performance, though had it been included the article would’ve been over 1000+ words longer, and so it was removed. I do, however, explain in Smashing Book 4 how to optimize web font performance with some practical advice on subsetting and base64 encoding (pg 340–341) which I’d recommend everyone to read – if they haven’t already.

      Nevertheless you raise a very valid point, performance is indeed a big issue, and it should apply to web fonts. The challenge faced is finding the right balance between performance and appeal.

      As we know web fonts are perfect for standing-out from the crowd, as they remove the need to use other types of visual elements that create visual clutter and are difficult to maintain (e.g. CSS background images). In my experience, websites that rely on web fonts and typography for branding and establishing a particular setting for the content are much easier to govern. However, if diversity and variety is not at all important then web fonts should simply not be used.

      The problem is not in using web fonts or other types of assets that enhance the emotional part of the user experience, but in the fact the mere variety (visual or other) equals more data. There’s no way around that. More content = more data (HTML / multimedia), more accessible content = more data (text alternatives / timed content alternatives / captions), more colors = more data (CSS), more complex (responsive) layout = more data (CSS / JS), more interaction = more data (CSS / JS), more fonts = more data (webfonts).

      That being said, the Benton Modern website is a website about a specific font family, 48 fonts precisely. The fonts are the content. There’s no other way of presenting what the family can do, except perhaps taking screenshots of each detail to showcase and embedding them as images, which for this level of detail would’ve produced even more requests and kilobytes in assets. For example, retina screenshots of the Formal and Expressive versions weigh 5.6MB (2590 × 23106 px) and 7,2MB (2590 × 34070 px) respectively. So I think using web fonts to represent themselves was the best choice we could have made.

      For instance, the Expressive version comprises of 15 different visual arrangements, which are essentially 15 individual designs you’d usually see on 15 different websites. If these were implemented as 15 different websites instead you’d have to go visit each site and you’d end up making even more server requests. It’s true, we could have created separate CSS projects for each detail or version and loaded each conditionally, but it made sense to download everything in one go as we assumed the audience for this website would be very specific and interested in experimenting with the typeface.

      We did think about performance, and with primed cache the situation is made much better and so return visitors shouldn’t experience any lags. That being said, though this is a responsive website, it was not meant to be read on a 2G network on your way to work, but rather resized and experimented with in modern browsers.

      Sometimes designing for aesthetics at the expense of performance can be an option. This was one such case.

      What do you think?

      2
      • 3

        Hi Marko, thanks for the detailed reply.

        I concede that the Benton Modern brochure site has a target audience that is going to be a bit different than the ‘average’ user. The chances are that the site will be viewed by designers with powerful kit on fast networks, so I understand the reasoning behind why you added all the fonts on that one page, and agree that using screenshots would have been a bad choice.

        The problem with the article is two fold:
        (1) There’s no optimisation for mobile at all.
        (2) There was no discussion about performance of webfonts.

        A 1000 word article is not especially long, so I don’t really understand why a small section on performance wasn’t included. It’s great that you have information about that in the Smashing Book, but that doesn’t help someone reading this article right now.

        You say that it wasn’t intended for the site to be read on a 2G network, but that’s really at the crux of the issue. None of us know when, where or how our users might be accessing our sites, so it’s in our interest to make them as fast loading as possible. If I view the Benton site on a slow network, I would still expect some baseline experience within a couple of seconds of hitting the page. This could have been achieved using clever loading of different fonts at different breakpoints, or even different content, but there was no discussion about that — puzzling in an article about responsive web design.

        I completely understand that these are hard things to solve and that we can’t build everything we’d like in a way that performs well for all our potential users. But ignoring the issue and not informing readers of the potential pitfalls is dangerous: designers and developers often take the ideas/code given on Smashing Mag (and other publications) exactly as it’s given, and if we don’t add any caveats to the techniques discussed, we’re setting up the web to become even more bloated and slow through ignorance or bad decision making.

        I know I’m playing devils advocate somewhat — after all the article was addressing better typography, not web performance. But I think it’s important that performance should always be a consideration in these sorts of articles: after all, we don’t know who is reading or what their knowledge level might be.

        I did very much enjoy the article and I did learn a some new techniques here. Thanks for writing it and engaging with me on performance issue.

        3
  2. 4

    Vincent Visser

    May 28, 2015 11:04 am

    Totally agree with Matt on this.

    The problem you have that unlike print where “what you see is what you get” there are many factors that affect your design when online.

    Company firewalls for one might be a problem. Our firewall does not like web fonts. So when viewing your site it looks broken because your site has been set to default browser fonts.

    I do understand that the site is showing what can be achieved using fonts but I have seen many site break because they use a lot of web fonts and has made me think very carefully what I do with web fonts and how I use them.

    0
  3. 5

    Jeremiah Shoaf

    May 28, 2015 2:59 pm

    I just wanted to play devil’s advocate in response to the comments about the slow site performance. I’m a designer who spends a ton of money on fonts (probably their target market). On my system the site loaded quickly and looks amazing. Benton Modern is now on my typeface “want” list.

    1
    • 6

      I completely agree that Benton Modern typeface is gorgeous, and the brochure site discussed in the article displays it wonderfully. However, it’s neither here nor there whether it loaded quickly on your system. If you’re a designer, I suspect you have a powerful Mac and high speed broadband, so it’s irrelevant that it loads fast for you. Your setup isn’t a typical use case for modern web browsing anymore: mobile is where it’s at.*

      It’s more important to consider the needs of average users on mobile connections, than power users with the latest kit. Dodgy wireless connections flake out and drop constantly, so when we build asset-hungry sites that barely load on a slow networks, we’re saying that design is more important than content. And that’s plainly ridiculous.

      When we ignore the very real needs of day-to-day users by forcing them to load assets they don’t need, we do it at the expense of them getting to the information they want… and that’s not really the point of the web at all.

      *I appreciate that a font-brochure site is most likely to be viewed in different circumstances than mobile-on-the-go. The point is that the article didn’t address web font performance at all, hence I’m discussing the importance of site performance in more general terms that would apply to the majority of sites.

      3
      • 7

        Jeremiah Shoaf

        May 28, 2015 4:14 pm

        My point is just that you should design for your target audience. I wouldn’t say my use case is irrelevant as designers with modern systems are typically the people who purchase fonts.

        0
  4. 8

    Kate Greenstock

    May 28, 2015 4:25 pm

    GREAT article. Thanks a lot.

    Readers might also be interested in this topical post that I wrote;
    https://medium.com/@kategreenstock/strong-silent-type-a85e1674f944

    -5
  5. 9

    Matthew Snyder

    May 29, 2015 6:13 am

    Marko,
    This is a great article. The world of Responsive Typography gets more and more interesting for us when we build out a platform for creative design and advertising. We have become engrossed with this topic and this analytics is extremely interesting for us. Would be further interested in how this plays out overall with advertising.

    Regards,
    Matthew Snyder
    CEO, ResponsiveAds

    -9
  6. 10

    Ricky Ferrer

    May 29, 2015 4:21 pm

    We use Benton Modern and Benton Sans on my magazine’s site. I love seeing the font-brochure site and see how Benton can be pushed even further than I ever realized. The Expressive version is so fresh and editorial. I’ll be digesting this site for a long while.

    Unfortunately, we are moving away from the Benton family due to costs. With our modest budget, we could only afford 8 fonts for web license. We average 5M pageviews a month. Even at a discounted rate, it’s $2,400 a year, which means I have to be VERY strategic about which fonts I select. For instance, I need to have a bold, an italic, but can I really afford a bold italic? or a condensed italic? or Benton Modern RE, Benton Modern AND Benton Modern Display? I would love to have the full 48 fonts in the family, or even half of that. But that would be an exorbitant cost.

    We’re moving over to the Hoefler & Co. subscription model. It will allow us to use full families at a third of the cost. However, I will attempt to push the fonts we do end up using online to their full potential, and this brochure site will be a constant source of inspiration. Thanks for posting.

    5

↑ Back to top