Navigation

20 typographic websites

By Kendra Gaines | Inspiration, Typography, Web Design | Feb 12, 2013

It’s the trend that people are calling for this year. But it’s really a trend that’s been here for the past couple of years. Typography is a concept that’s been practiced for many centuries. And it’s one that’s going to stick around for years to come.

What is it about typography that makes everyone go crazy? It has this artistic component to it, where it can increase the aesthetics of a page. It also has that graphic design component that allows reading to come easy and make sense. After all, if I can’t read it and it doesn’t make sense, hasn’t it lost its purpose?

Typography matters, whether it’s used to make reading easy, or whether it’s used to add some decoration. It’s becoming easier and easier, with better technologies, for designers to utilize great typography in their website designs. Today, we’re going to come to you with some great sites that use typography…

 

A List Apart

Let’s start with a web site many of us are familiar with — wait…have you seen this wonderful new redesign? A List Apart doesn’t waste a lot of space with images and such as they’re very interested in enlightening the community. Fortunately, they do a great job making sure the text isn’t too overwhelming.

 

Basheer Tome

Basheer Tome keeps it pretty clean and simple throughout his website. These thinner, rounded fonts tend to make everything feel sleek and modern. He’s kept it pretty standard by using Myriad Pro. 

 

Bleed Design

Huge headlines are popular because it makes readability a breeze. Of course, you want to pair that with a nice, clean font. I’m sure we don’t even have to tell you which popular font this is, but Bleed Design are obviously huge fans of Helvetica Neue.

 

VGrafiks

This site uses between three and five different typefaces per page, including Intro for their huge headers. They do not have a ton of written content but their typographic layout makes reading easy and speedy. 

 

Co Op

In most web designs for creative agencies, there’s a focus on the images and work rather than the copy and text. That’s usually fine and works out well. Co Op has taken a different approach and made their design equally dependent on both. Actually, with the Use of Open Sans, you could even argue that the typography is more eye catching.

 

Elysium Burns

With a blog layout, you know there’s going to be lots of copy. The idea, however, is to make sure there’s readability and everything isn’t just there and boring. Elysium has done a great job in making a pretty normal blog layout very exciting with the use of typography. The different typefaces help distinguish different things and Georgia does a great job for this site’s body text.

 

Integral Jean Beaudoin

This is a very interesting layout. There’s this ever-present and extremely prominent bit of text in the background with an overlay of more text and pictures. The bending of rules and what’s normally ‘right’ is extremely creative here and it helps with the typewriter-esque font here. They also get a bit of help from Benton Sans for their headers.

 

Kurppa Hosk

The beauty of their typography is the layout as well as some of the blatant disregard for some of the rules. After all, isn’t that creativity? Kruppa Hosk seems to use one dominant font, Graphik Web, to present their content.

 

Life & Thyme

Unlike other websites we’ve covered here, Life and Thyme is almost visually dependent on images and video. Fortunately, they didn’t let the consistency in their brand go to waste, as they used typography to create a very thorough, ‘put-together’ image. With the help of New Baskerville, Life and Thyme show us how to create typography that adds to images.

 

MailChimp 2012 Annual Report

Infographics have become a great ‘go-to’ in the way we display information. MailChimp has created various infographics to help visualize their 2012 annual report. With the help of some great typographic schemes and Proxima Nova headlines, this annual report is a certified hit.

 

Minimalissimo 

The minimalist way of designing will almost certainly live on for ages to come. This website utilizes minimalism with a bit of an old book style, using Skolar for the body text.

 

Monobrow

Browsing the Monobrow homepage does no justice to the way in which copy is organized and visualized on this site. You have to dig deep to see some of the best layouts. Several font families, along with Brawler and Open Sans, mesh well together to present information. 

 

Negative Labs

Futura is a font favorite of mine, so when I stumbled across this website, I knew it had to be added to the list. Of major importance here is not just the typeface, but the way in which the text is set up in columns and also how it’s set up to work next to the images. Scrolling down will reveal more typographic layouts that are absolutely beautiful as well.

 

Premium Draught

Premium Draught offers hand-picked, fresh brews for consumers. Amongst the wonderful layout, we’d be remiss not to give praise to the menu idea. What’s great about this is the designer didn’t go out of his way to try to make a fancy, online menu. They kept it simple and used a standard print design to make a wonderful, easy to understand menu. 

 

Patrick Algrim

One thing that’s great to do in typography is to mix it up. Not only do you want to make a habit of mixing different typefaces, you want to mix up the styles. Patrick does a great job of mixing his serifs and his sans serifs. Camingo Dos is widely used on his website as his most used sans serif. 

 

Purple Orange

Sometimes it’s not all about your services and how great you are. Sometimes you have to do a little convincing so your customer can understand or find the need for your offering. Purple Orange knows that and presents their information in that manner. With help from Open Sans, they have a pretty good grip on why we should be re-thinking PR.

 

Ros

If you know you’re going to create a site design that prominently displays copy, it’s really hard to go wrong with Helvetica. Ros has coined the word ‘advertainment’ and looks to create an interest in this idea. With grids and different font sizes and colors, this website is definitely an eye catcher.

 

Tapmates

Tapmates has designed a website where their typography is definitely put on display.  Throughout the site, they use rather large font sizes and I believe this helps create an easier and quicker read. Think about ‘large text’ books and such. Tapmates uses Freight Text Book in their copy text to help with easy reading.

 

The Real Awards

This website uses lots of color and images. But as we said earlier, it’s not necessarily all about the images, but also about how you make everything work together. Going to the inside pages you’ll notice there’s a pretty forthright styling to the typography. Bold fonts like Proxima Nova help break up bunches of text to make things easier to read.

 

Moresoda

What I love about this website is the reliance of creative typography to peak your interest. This website is majority text and other elements that basically are not realistic photos. It shows that with wonderful fonts, such as Lubalin, you can create an entertaining and strong web design.

 

Typography is extremely important and some experts will even tell you that you can’t have a great website until you understand typography. 

How do you feel about the state of typography in web design? Did we miss any of your favorite sites? Let us know in the comments.

Share this post
Comments (no login required)
  • orange county web designer

    Great source of inspiration. Typography combined with the right usage of designs can make a web design glow. Thanks for sharing.

  • Johnson Lu

    These are great! I love the fact that typography is becoming more prominent. Hopefully this brings the importance of good typographic skills to light