The Good, The Bad And The Great Examples Of Web Typography

Choosing typefaces is an integral part of every web design project. With thousands of typefaces available from hosting services such as Typekit, as well an ever-improving collection of free fonts1 available, there has never been a better time to be a typography-obsessed web designer.

One could easily argue that nothing affects a design more than typography. And good typography starts with choosing an appropriate typeface. But can having too much choice be a bad thing? With more choices, we have more opportunities to make bad decisions.

In this article, we’ll review a collection of beautiful websites and analyze the impact that their designers’ typeface choices have had on the overall designs. We’ll critique both the good and the bad. Of course, type is subjective, so take any critiques with a grain of salt. Let’s dig in!

Vesper Hotel

Domaine Display2, a curvy and ornate display typeface from New Zealand-based type designer Kris Sowersby143, makes for a beautiful combination with Proxima Nova344 on Vesper Hotel5’s website. Although Proxima Nova may be one of the most overused web fonts of the last few years, pairing it with something less used, such as Domaine Display, can make a design feel distinctive and fresh.

01-vesper-opt6

I also love when a brand is able to use a web font for its logo. It makes the developer side of my brain happy knowing that a logo can be styled with CSS, read by a screen reader and scaled up and down — all without needing an image to be loaded.

Dragone

Seeing type set against gorgeous textures like this makes me regret that “flat design7” is such a prevailing trend. Dragone8’s website feels like a painting, and the elegant Playfair Display9 is the perfect typeface for this look. The italics of Playfair Display are especially beautiful, and this website features them prominently. The classic geometric sans Futura10 is used as well, providing a sturdy foundation next to the flamboyant Playfair Display.

02-dragone-opt11

Sometimes when text is set on top of images like this, legibility suffers. However, the designers of this website have taken great care to ensure adequate contrast by darkening the photos enough to make the type stand out.

My only nitpick is the use of Playfair Display for the body copy — a high-contrast display face really isn’t meant for long passages of text. That being said, the amount of copy on this website is fairly minimal, so it doesn’t pose much of a reading hazard. Georgia12 is a traditional face with similar characteristics, so it could have served as a more readable body font companion to Playfair Display.

Romain Balcerak

Tiempos Text13 is another typeface from the prolific Kris Sowersby143. It’s paired here with Sentinel15, a slab serif16 from Hoefler & Co17. Apercu2518, a quirky grotesque from Colophon Foundry19, is thrown in the mix as well.

03-romain-balcerak-opt20

Using three typefaces can sometimes be a bit much, but Romain Balcerak21 sticks to a consistent system, which holds the design together. Tiempos Text is set in bold for headings; Sentinel is always set in italic for subheadings; and Apercu is used for body copy throughout.

Rails Assets

Adelle Sans22 and Whitney23 are two sans-serifs with somewhat similar characteristics — both are grotesques with a humanist slant. Combining two similar typefaces is definitely unorthodox. It almost feels like the designer couldn’t choose between the two and so decided to use both.

04-rails-assets-opt24

As far as typographic crimes, I would consider this one to be minor. Their use is consistent — Adelle Sans for headings and Whitney for everything else. And with typefaces as well designed as these, it’s hard for a design to look bad.

Dollar A Day

I’m going to make a not-too-controversial proclamation: Apercu2518 is the trendiest font on the web right now. My side project Typewolf5826 features many websites that use Apercu; in fact, it’s the third most popular font on the website, and I still come across so many websites using Apercu that don’t get featured on Typewolf. It seems like a handful of websites with this typeface pop up every day.

05-dollar-a-day-opt27

My guess is that Apercu and other similar “quirky grotesques28” appeal to designers because, after years of Helvetica being used on the web, this style of typeface proudly declares “I’m not Helvetica.”

So, Dollar A Day29’s website, whose design might have felt cold and sterile if set in Helvetica, instantly feels fun, lively and unique in Apercu. Of course, when every website uses the same typeface, then the freshness is lost. But right now Apercu still feels exciting.

New Venture Scouting

New Venture Scouting30 is a website that has so many good things going for it in the type department, but it feels like things somehow didn’t quite come together between the design and development stages.

06-new-venture-scouting-opt31

On first impression, the slab serif Jubilat32 looks wonderful paired with Open Sans33 in the prominent hero graphic. A warm and curvy slab face combined with a no-nonsense humanist face makes for some solid branding. However, on closer examination, you’ll notice that another sans-serif, Proxima Nova344, is used for the navigation. And then below, Arial is used for the body copy.

If you are already importing Open Sans, then why not use it for the body copy as well? And it has a huge range of weights. Why is a separate sans-serif typeface family needed for the navigation?

The rest of the website seems to be a haphazard mix of Jubilat, Proxima Nova, Open Sans and Arial, with no clear use established for each. This kind of inconsistency usually happens when multiple designers are working on a website but aren’t on the same page. Creating a style guide35 early on in a project will usually prevent issues like this from occurring.

Talented designers were clearly working on this project, and the website still has a lot to be admired. But without consistency, mixing four typeface families is difficult to pull off.

United Strands

United Strands36 uses a single typeface, Montserrat37, whose open-source font38 is available for free on Google Fonts39. A lot of its popularity owes to its resemblance to two of the most popular commercial typefaces of the last decade, Gotham and Proxima Nova. Although it definitely has some resemblance to those two typefaces, I think it stands as its own unique design, with a distinctive character all its own.

07-united-strands-opt40

The one downside to Montserrat is that it doesn’t have an italic styles. And if you set body copy in a font without italics, you will end up with faux italics41. The copy on this website is fairly minimal, though, and I noticed only a few cases where this occurs. So, while it’s not “proper” typography, it’s not very noticeable in this case. Sans-serifs usually handle faux italics better than serifs anyway.

That being said, the designers did an excellent job overall of getting the most out of a single typeface with limited styles. The text elements set in uppercase have slightly wider letter spacing than normal, which is always a nice touch; the generous white space gives the type room to breath, and the bold color creates strong contrast.

Norwegian Rain

Norwegian Rain42’s website combines the classic geometric sans-serif Avenir43 with Freight Text5244. Avenir was selected as the favorite font among leading designers45 in a survey from earlier this year. The word “avenir” means “future” in French — type design legend Adrian Frutiger46 took the geometric principles behind Futura and added a warm, organic touch to create Avenir. It’s no wonder this is a favorite among those who truly appreciate typography.

08-norwegian-rain-opt47

Freight Text has a distinctive italic cut that pairs very nicely with the clean lines of Avenir. In fact, only the italic style of the Freight Text family is used on this website. This not only keeps the type system consistent, but keeps page-loading times48 down as well.

The line height of the text in the footer feels a little tight. Other than that, this is a great website, with a lot of fine typography to appreciate.

Pelican Books

Pelican Books49’ website features another extremely popular typeface among designers, Brandon Grotesque50. This is actually the special text version of Brandon Grotesque, called Brandon Text. The regular version of Brandon Grotesque was designed to be more of a display face, meaning that it’s not really suited to long passages of text. Brandon Text has a higher x-height and is optimized for body copy.

09-pelican-opt51

Interestingly, this website still uses Brandon Text more as a display face than for body copy, which is set in Freight Text5244. Brandon Text still looks great at large sizes but is not quite as charming as the original Brandon Grotesque because it’s more toned down and conservative. Freight Text is one of the most legible serifs around, so it’s an excellent choice for the long passages of text in the “Read Online53” section. Combined with the subtle paper texture, the typography really makes it feel like you are reading a book.

Simply Gum

Thanks to web fonts, matching the typography on a product’s physical packaging to the typography on the manufacturer’s website is becoming increasingly common. Simply Gum54 chose Gotham55 as its brand typeface, keeping its identity consistent across online and offline channels.

10-simply-gum-opt56

This website is also a great example of how a single typeface is all that is needed sometimes. By using the various weights of Gotham and setting headers in uppercase, Simply Gum has created a clear hierarchy with just one typeface.

The logo in the header and footer are both PNGs, so they lose the crispness and scalability of web type. Using a web font for a logo is not always feasible, especially if you need a lot of control over kerning; however, an SVG image57 is usually better than a PNG in this case because it can scale while retaining its crispness.

Wrapping Up

Hopefully, the examples above demonstrate just how big of an impact typeface choices can have on a design. Here are a few key takeaways:

  • If you are going to use multiple typefaces, then develop a consistent type system and stick with it.
  • When setting body copy, choose a typeface that comes with regular, italic, bold and bold italic styles.
  • If you are going to go with a popular typeface, try pairing it with a less used typeface to make the design feel distinctive.
  • Create a style guide early on in a project to ensure consistent use of type among members of your team.
  • Use contrasting typefaces, rather than similar ones.
  • Avoid display faces for body copy. Go with a typeface designed for the purpose.
  • Don’t be afraid to use just a single typeface family. You can establish hierarchy with different weights and styles from the same family.
  • If your logo allows for it, go for web type or an SVG image to ensure crispness and scalability.

Keep Up With the Latest in Web Typography

If you are as obsessed with type as I am, then head over to my side project Typewolf5826 for even more examples of beautiful typography.

Technical note: These screenshots were taken in Safari on a Mac. Font rendering59 varies from browser to browser, so your results may differ.

(al, il)

Footnotes

  1. 1 http://www.smashingmagazine.com/2014/03/12/taking-a-second-look-at-free-fonts/
  2. 2 http://www.typewolf.com/site-of-the-day/fonts/domaine-display
  3. 3 https://klim.co.nz
  4. 4 http://www.typewolf.com/site-of-the-day/fonts/proxima-nova
  5. 5 http://www.vesperhotel.com
  6. 6 http://www.vesperhotel.com
  7. 7 http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/
  8. 8 http://dragone.com/en
  9. 9 http://www.typewolf.com/site-of-the-day/fonts/playfair-display
  10. 10 http://www.typewolf.com/site-of-the-day/fonts/futura
  11. 11 http://dragone.com/en
  12. 12 http://www.typewolf.com/site-of-the-day/fonts/georgia
  13. 13 http://www.typewolf.com/site-of-the-day/fonts/tiempos-text
  14. 14 https://klim.co.nz
  15. 15 http://www.typewolf.com/site-of-the-day/fonts/sentinel
  16. 16 http://www.typewolf.com/top-10-slab-serif-fonts
  17. 17 http://www.typography.com
  18. 18 http://www.typewolf.com/site-of-the-day/fonts/apercu
  19. 19 http://www.colophon-foundry.org
  20. 20 http://romainbalcerak.com
  21. 21 http://romainbalcerak.com
  22. 22 http://www.typewolf.com/site-of-the-day/fonts/adelle-sans
  23. 23 http://www.typewolf.com/site-of-the-day/fonts/whitney
  24. 24 https://rails-assets.org
  25. 25 http://www.typewolf.com/site-of-the-day/fonts/apercu
  26. 26 http://www.typewolf.com
  27. 27 https://dollaraday.co
  28. 28 http://www.typewolf.com/top-10-quirky-grotesque-fonts
  29. 29 https://dollaraday.co
  30. 30 http://www.nvs.co.at
  31. 31 http://www.nvs.co.at
  32. 32 http://www.typewolf.com/site-of-the-day/fonts/jubilat
  33. 33 http://www.typewolf.com/site-of-the-day/fonts/open-sans
  34. 34 http://www.typewolf.com/site-of-the-day/fonts/proxima-nova
  35. 35 http://www.smashingmagazine.com/2014/10/09/front-end-development-ode-to-specifications/
  36. 36 http://unitedstrands.com
  37. 37 http://www.typewolf.com/site-of-the-day/fonts/montserrat
  38. 38 http://www.typewolf.com/open-source-web-fonts
  39. 39 http://www.google.com/fonts/specimen/Montserrat
  40. 40 http://unitedstrands.com
  41. 41 http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/
  42. 42 http://norwegianrain.com
  43. 43 http://www.typewolf.com/site-of-the-day/fonts/avenir
  44. 44 http://www.typewolf.com/site-of-the-day/fonts/freight-text
  45. 45 http://www.typewolf.com/blog/industry-leading-designers-share-their-favorite-typefaces
  46. 46 http://en.wikipedia.org/wiki/Adrian_Frutiger
  47. 47 http://norwegianrain.com
  48. 48 http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/
  49. 49 https://www.pelicanbooks.com
  50. 50 http://www.typewolf.com/site-of-the-day/fonts/brandon-grotesque
  51. 51 https://www.pelicanbooks.com
  52. 52 http://www.typewolf.com/site-of-the-day/fonts/freight-text
  53. 53 https://www.pelicanbooks.com/the-domesticated-brain/preface
  54. 54 http://simplygum.com
  55. 55 http://www.typewolf.com/site-of-the-day/fonts/gotham
  56. 56 http://simplygum.com
  57. 57 http://www.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/
  58. 58 http://www.typewolf.com
  59. 59 http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

The post The Good, The Bad And The Great Examples Of Web Typography appeared first on Smashing Magazine.

Leave a Reply

Your email address will not be published.