Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

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.

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 Link

  1. 1 https://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 https://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 https://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 https://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 https://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 https://www.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/
  58. 58 http://www.typewolf.com
  59. 59 https://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
SmashingConf Barcelona 2016

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

Advertisement

Jeremiah Shoaf is a freelance designer from Colorado. He is the curator of Typewolf and creates flat-file CMS themes for his other side project, Type & Grids. He also continually updates a curated list of open-source free fonts.

  1. 1

    Blondie would be proud :)

    0
  2. 2

    Oi mate, very good work.

    One question always lingering in my mind.

    Do you know of anyone who has done legibility A/B split tests for body copy fonts? Writing about just the type that look ephemeral and beautiful is fine and all… but where are the disciplined scientific tests for what is functional. Tests for what CONVERTS. Converts viewers into participants. Converts the ignorant into the informed. Converts prospects into customers.

    Someone must test this and put this online? If not, why aren’t you?

    0
    • 3

      Jeremiah Shoaf

      December 30, 2014 4:17 pm

      The studies about legibility that I’ve read tend to suggest that people find the fonts they are the most familiar with the most legible. Type designer Zuzana Licko is quoted as saying “you read best what you read most”. So my guess would be that Arial is the most legible font on the web simple due to it being the font that people are most accustomed to. Does that mean that it’s the best choice for a body font? Definitely not.

      I would love to see a study that tests conversions. I think this type of study could be problematic though. Typeface choice really depends on the brand and the message and that would vary greatly across different markets and demographics. And it might be hard to measure how it affects brand perception over a longer time frame as well. But it would be an interesting study nonetheless.

      3
      • 4

        Ben Attenborough

        February 27, 2015 12:24 pm

        A few thoughts on this. I’ve studied typography at Masters level in England and there are a few principals to consider when it comes to legibility and readability in typefaces.

        The first is that differentiation between letter forms is important, if letters look too similar they can be misread, which is why serif typefaces have an advantage over sans serifs. The x-height (the height of a lower case x compared with an uppercase character) is also a factor. Again too high an x-height makes characters difficult to differentiate, you can see this when trying to read copy that is all in caps.

        There are other factors to consider for good body type typography such as having generous (but not too generous) leading, keeping line lengths to an optimum, how you justify text, these all have an influence beyond typeface choice.

        There have been various test done, but as has been said before it is a complex field. People will say they find reading Helvetica (or Arial) easier than other typefaces but then the tests will show they read a serif face quicker. And post-modern typefaces which were considered unreadable were soon assimilated by readers and could be understood.

        A good quick test you could try is reading the text aloud and seeing how smoothly you can read the copy.

        0
    • 5

      You do it!!!!

      0
  3. 6

    Actually some very great examples.. thanks! :)

    0
  4. 7

    This is a good topic with great examples.

    0
  5. 8

    Wow! Thank you for sharing these. I also agree with your opinions. Every web developer must read your post and take it as a reminder before they have done websites.

    0
  6. 9

    Daniel Schwarz

    December 23, 2014 1:21 pm

    Lovely collection here, nice to see some new faces!

    0
  7. 10

    Nice article! Was a good read..

    0
  8. 11

    Thanks for featuring United Strands! Much appreciated.

    0
  9. 12

    Great article with great examples. Thanks for posting.

    0
  10. 13

    Nicely done. Thanks!

    0
  11. 14

    While most of the article is great, suggesting to use web type (or any to-be-rendered object) for a logo is a plain bad idea. Most browsers/OSes display fonts quite differently (even more so for CSS styles). A few pixels in position or weight may not be a problem for a website element, but for a logo, even the slightest deterioration is a problem. Always use images – screen readers will get their data from alt tag/aria (plainly reading logo text along with content would not be too resourceful anyway).

    1
  12. 15

    Indeed typography is playing a bolder role in website design these days but I would have to agree with poisonborz about rather using an image for the logo, instead of an embedded font or the like. When designers really get around to testing different fonts in different browsers, then only do they see how much of a difference there really is – a risk not worth taking.
    We live in a world with high speed Internet access so I don’t believe that a few images really hurts user experience.

    Cheers,
    Devin
    http://www.howtocreateawebsite.co.za

    -1
  13. 16

    Thank you for your insights; I learned a lot from this article.
    That said, I have to take exception with your statement: “And good typography starts with choosing an appropriate typeface”.
    On that, I couldn’t agree with you less. Too many people see the right font as the “silver bullet” for a design problem. In fact, good typography starts with accurately assessing the design problem at hand, and how typography can be strategically employed to provide the optimal solution.
    Also, I wish you’d provide clear examples of the referenced typefaces. It’s very difficult to see the examples you’re presenting via the typewolf.com links.

    0
  14. 17

    Dat feel when you check that the types you’ve been considering to use in you next project are the “I think X would make a nice combination paired with Y” in Typewolf.

    As poisonborz and devin pointed, I know it’s not advisable to use embedded fonts for logos, but somehow it seems so right to me. Sometimes I can’t avoid it!

    Great article.

    0
  15. 18

    Hi Jeremiah,
    I’m at work surfing around your blog from my new iphone! Just wanted to say I love reading your blog and look forward to all your posts! Keep up the great work!

    3
  16. 19

    Thanks for this. It’s a really great resource to read. Plus, it enlightens me even more with web design making and the importance of reading it first before making and taking your ideas into actions. Aside from that, I found this http://www.lionleaf.com/blog/using-web-fonts-with-the-google-fonts-api/ which gives positive outcome as well but your tips are way clearer and easy to understand. Do you also make tips about the hectic job of selecting the fonts to use for a site as well?

    0
  17. 20

    Typography is the basis of any good web design. You can have the coolest and greatest information but if it isn’t displayed in a planned out and integral way then it is not going to be appealing to the reader. Typography and fonts have become so complex and so important to any good web design. Some fonts are made to be in BOLD, other are meant to be scuttle and delicate. Knowing when to use which font is one of the headrest jobs. Now a days when there are so many types of fonts it is so hard to choose. Great web designs utilize typography and use it to their advantage to draw the reader in. I think that “Simply Gum” did a great job of using a combination of typography and photos to draw the reader’s attention to the subject. Typography is constantly changing and keeping up with the newest forms of it is a must when designing a website that is so typography based.

    1
  18. 21

    Pelican Books,
    KERNING IS YOUR FRIEND.

    -Great list!

    0
  19. 22

    I want to share our new article about web typography. It’s a small guide for beginners – http://designmodo.com/web-typography/ I hope you like it.

    0
  20. 23

    Iran Delsey

    May 18, 2015 1:26 pm

    You are so awesome! I don’t think I have read a single thing like that before. So wonderful to discover another person with a few unique thoughts on this topic.

    0

↑ Back to top