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

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

• By Jeremiah Shoaf


• December 22nd, 2014


• FontsOpinion ColumnTypography


• 3 Comments

Choosing typefaces is an constituent partial of any web pattern project. With thousands of typefaces accessible from hosting services such as Typekit, as good an ever-improving collection of giveaway fonts¹ available, there has never been a improved time to be a typography-obsessed web designer.

One could simply disagree that zero affects a pattern some-more than typography. And good typography starts with selecting an suitable typeface. But can carrying too many choice be a bad thing? With some-more choices, we have some-more opportunities to make bad decisions.

In this article, we’ll hearing a collection of pleasing websites and investigate a impact that their designers’ typeface choices have had on a altogether designs. We’ll critique both a good and a bad. Of course, form is subjective, so take any critiques with a pellet of salt. Let’s puncture in!

Vesper Hotel

Domaine Display², a curvy and exuberant arrangement typeface from New Zealand-based form engineer Kris Sowersby¹⁴³, creates for a pleasing mixed with Proxima Nova³⁴⁴ on Vesper Hotel⁵’s website. Although Proxima Nova competence be one of a many stale web fonts of a final few years, pairing it with something reduction used, such as Domaine Display, can make a pattern feel particular and fresh.

⁶

I also adore when a code is means to use a web rise for a logo. It creates a developer side of my mind happy meaningful that a trademark can be styled with CSS, review by a shade reader and scaled adult and down — all yet wanting an picture to be loaded.

Dragone

Seeing form set opposite pleasing textures like this creates me bewail that “flat design⁷” is such a prevalent trend. Dragone⁸’s website feels like a painting, and a superb Playfair Display⁹ is a ideal typeface for this look. The italics of Playfair Display are generally beautiful, and this website facilities them prominently. The classical geometric sans Futura¹⁰ is used as well, providing a stout substructure subsequent to a decorated Playfair Display.

¹¹

Sometimes when content is set on tip of images like this, legibility suffers. However, a designers of this website have taken good caring to safeguard adequate contrariety by extinguishing a photos adequate to make a form mount out.

My customarily nitpick is a use of Playfair Display for a physique duplicate — a high-contrast arrangement face unequivocally isn’t meant for prolonged passages of text. That being said, a volume of duplicate on this website is sincerely minimal, so it doesn’t poise many of a reading hazard. Georgia¹² is a normal face with identical characteristics, so it could have served as a some-more entertaining physique rise messenger to Playfair Display.

Romain Balcerak

Tiempos Text¹³ is another typeface from a inclusive Kris Sowersby¹⁴³. It’s interconnected here with Sentinel¹⁵, a chunk serif¹⁶ from Hoefler Co¹⁷. Apercu²⁵¹⁸, a quirky unusual from Colophon Foundry¹⁹, is thrown in a brew as well.

²⁰

Using 3 typefaces can infrequently be a bit much, yet Romain Balcerak²¹ sticks to a unchanging system, that binds a pattern together. Tiempos Text is set in confidant for headings; Sentinel is always set in italic for subheadings; and Apercu is used for physique duplicate throughout.

Rails Assets

Adelle Sans²² and Whitney²³ are dual sans-serifs with rather identical characteristics — both are grotesques with a humanist slant. Combining dual identical typefaces is unequivocally unorthodox. It roughly feels like a engineer couldn’t select between a dual and so motionless to use both.

²⁴

As distant as typographic crimes, we would cruise this one to be minor. Their use is unchanging — Adelle Sans for headings and Whitney for all else. And with typefaces as good designed as these, it’s tough for a pattern to demeanour bad.

Dollar A Day

I’m going to make a not-too-controversial proclamation: Apercu²⁵¹⁸ is a trendiest rise on a web right now. My side plan Typewolf⁵⁸²⁶ facilities many websites that use Apercu; in fact, it’s a third many renouned rise on a website, and we still come opposite so many websites regulating Apercu that don’t get featured on Typewolf. It seems like a handful of websites with this typeface cocktail adult any day.

²⁷

My theory is that Apercu and other identical “quirky grotesques²⁸” interest to designers because, after years of Helvetica being used on a web, this impression of typeface proudly declares “I’m not Helvetica.”

So, Dollar A Day²⁹’s website, whose pattern competence have felt cold and waste if set in Helvetica, now feels fun, sharp-witted and singular in Apercu. Of course, when any website uses a same typeface, afterwards a mutation is lost. But right now Apercu still feels exciting.

New Venture Scouting

New Venture Scouting³⁰ is a website that has so many good things going for it in a form department, yet it feels like things somehow didn’t utterly come together between a pattern and growth stages.

³¹

On initial impression, a chunk serif Jubilat³² looks smashing interconnected with Open Sans³³ in a distinguished favourite graphic. A comfortable and curvy chunk face total with a no-nonsense humanist face creates for some plain branding. However, on closer examination, you’ll notice that another sans-serif, Proxima Nova³⁴⁴, is used for a navigation. And afterwards below, Arial is used for a physique copy.

If we are already importing Open Sans, afterwards since not use it for a physique duplicate as well? And it has a outrageous operation of weights. Why is a apart sans-serif typeface family indispensable for a navigation?

The rest of a website seems to be a rambling brew of Jubilat, Proxima Nova, Open Sans and Arial, with no transparent use determined for each. This kind of craziness customarily happens when mixed designers are operative on a website yet aren’t on a same page. Creating a impression guide³⁵ early on in a plan will customarily forestall issues like this from occurring.

Talented designers were clearly operative on this project, and a website still has a lot to be admired. But yet consistency, blending 4 typeface families is formidable to lift off.

United Strands

United Strands³⁶ uses a singular typeface, Montserrat³⁷, whose open-source font³⁸ is accessible for giveaway on Google Fonts³⁹. A lot of a recognition owes to a similarity to dual of a many renouned blurb typefaces of a final decade, Gotham and Proxima Nova. Although it unequivocally has some similarity to those dual typefaces, we consider it stands as a possess singular design, with a particular impression all a own.

⁴⁰

The one downside to Montserrat is that it doesn’t have an italic styles. And if we set physique duplicate in a rise yet italics, we will finish adult with mistake italics⁴¹. The duplicate on this website is sincerely minimal, though, and we beheld customarily a few cases where this occurs. So, while it’s not “proper” typography, it’s not unequivocally conspicuous in this case. Sans-serifs customarily hoop mistake italics improved than serifs anyway.

That being said, a designers did an glorious pursuit altogether of removing a many out of a singular typeface with singular styles. The content elements set in uppercase have somewhat wider minute spacing than normal, that is always a good touch; a inexhaustible white space gives a form room to breath, and a confidant tone creates clever contrast.

Norwegian Rain

Norwegian Rain⁴²’s website combines a classical geometric sans-serif Avenir⁴³ with Freight Text⁵²⁴⁴. Avenir was comparison as a favorite rise among heading designers⁴⁵ in a consult from progressing this year. The word “avenir” means “future” in French — form pattern fable Adrian Frutiger⁴⁶ took a geometric beliefs behind Futura and combined a warm, organic hold to emanate Avenir. It’s no consternation this is a favorite among those who truly conclude typography.

⁴⁷

Freight Text has a particular italic cut that pairs unequivocally easily with a purify lines of Avenir. In fact, customarily a italic impression of a Freight Text family is used on this website. This not customarily keeps a form complement consistent, yet keeps page-loading times⁴⁸ down as well.

The line tallness of a content in a footer feels a little tight. Other than that, this is a good website, with a lot of glorious typography to appreciate.

Pelican Books

Pelican Books⁴⁹’ website facilities another intensely renouned typeface among designers, Brandon Grotesque⁵⁰. This is indeed a special content chronicle of Brandon Grotesque, called Brandon Text. The unchanging chronicle of Brandon Grotesque was designed to be some-more of a arrangement face, definition that it’s not unequivocally matched to prolonged passages of text. Brandon Text has a aloft x-height and is optimized for physique copy.

⁵¹

Interestingly, this website still uses Brandon Text some-more as a arrangement face than for physique copy, that is set in Freight Text⁵²⁴⁴. Brandon Text still looks good during vast sizes yet is not utterly as desirable as a strange Brandon Grotesque since it’s some-more toned down and conservative. Freight Text is one of a many transparent serifs around, so it’s an glorious choice for a prolonged passages of content in a “Read Online⁵³” section. Combined with a pointed paper texture, a typography unequivocally creates it feel like we are reading a book.

Simply Gum

Thanks to web fonts, relating a typography on a product’s earthy wrapping to a typography on a manufacturer’s website is apropos increasingly common. Simply Gum⁵⁴ chose Gotham⁵⁵ as a code typeface, gripping a temperament unchanging opposite online and offline channels.

⁵⁶

This website is also a good instance of how a singular typeface is all that is indispensable sometimes. By regulating a several weights of Gotham and environment headers in uppercase, Simply Gum has combined a transparent hierarchy with only one typeface.

The trademark in a header and footer are both PNGs, so they remove a compactness and scalability of web type. Using a web rise for a trademark is not always feasible, generally if we need a lot of control over kerning; however, an SVG image⁵⁷ is customarily improved than a PNG in this box since it can scale while maintaining a crispness.

Wrapping Up

Hopefully, a examples above denote only how large of an impact typeface choices can have on a design. Here are a few pivotal takeaways:

• If we are going to use mixed typefaces, afterwards rise a unchanging form complement and hang with it.


• When environment physique copy, select a typeface that comes with regular, italic, confidant and confidant italic styles.


• If we are going to go with a renouned typeface, try pairing it with a reduction used typeface to make a pattern feel distinctive.


• Create a impression beam early on in a plan to safeguard unchanging use of form among members of your team.


• Use resisting typefaces, rather than identical ones.


• Avoid arrangement faces for physique copy. Go with a typeface designed for a purpose.


• Don’t be fearful to use only a singular typeface family. You can settle hierarchy with opposite weights and styles from a same family.


• If your trademark allows for it, go for web form or an SVG picture to safeguard compactness and scalability.

Keep Up With a Latest in Web Typography

If we are as spooky with form as we am, afterwards conduct over to my side plan Typewolf⁵⁸²⁶ for even some-more examples of pleasing typography.

Technical note: These screenshots were taken in Safari on a Mac. Font rendering⁵⁹ varies from browser to browser, so your formula competence 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/

↑ Back to topShare on Twitter

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