14 Examples Of Web Typography Yielding Awesome Websites

La Wine Agency

Effective Web Typography

As the quote from Steve Jobs’ Stanford commencement address notes,

Steve Jobs @ Sanford

Typography is not some random spur of the moment decision, there’s many factors and values that should be considered to generate well-tailored typography that not only looks good, but provides the functional advantage of being easier to read and take value away from.

-Steve Jobs making the Commencement speech at Sanford University.

My article last week, What you Should Know about Web Typography that Will Make You a Better Designer, was an introduction to typography, the anatomy of type and how we can use typography to establish a visual hierarchy on your web page.  This week, I’m providing some great examples of websites that are using typography effectively to communicate a message to their message.

Good typography can play a vital role in the success of a web design. The number of fonts, the space between the lines of text, the measure, the alignment and the weight are all important characteristics of typography.

Let’s look at some websites that are using typography well…

The New Yorker

http://www.newyorker.com/

The New Yorker

 

The New Yorker’s website is clean, modern and legible with a strong resemblance to the printed newspaper. As a user, it feels good to read through this site because of the easy to read large font size, appropriate spacing and use of white space to sparate elements. The nostalgic feel and easy-reading of the site aids in the sophistication that has always been associated with the New Yorker.

jjr2012

http://jjr2012.srf.ch/ 

SRF

 

The typography on this German website is mind blowing. There are so many great examples of Typography. You should really visit this interactive site yourself to see how the type’s words, colors, weight, shading, depth and sizes create a picture that shifts from side to side. Each word is clickable and a sentence froms from within the picture. Pretty cool, huh?

Click the Text Result

Hello Bar

http://www.hellobar.com

Hello Bar

 

This site makes great use of simplicity, whitespace and contrast with typography to tell users about their tool, the Hello Bar.

BriAbby

http://www.briabby.com

Screen Shot 2013-02-11 at 11.12.22 AM Screen Shot 2013-02-11 at 11.12.40 AM

BriAbby does a great job speaking the users language and making an emotional appeal to the user. The typography here is bright, fun and has a crafty, homemade feel that will resonate well with their customer, mom’s. The site is easy and fun to read and the kids are just too darn cute!

La Win

http://lawineagency.com/where-to-find/

La Wine Agency

This wine company’s site is another interactive site you should visit yourself and click around.  You can see above where I entered by birthday to gain access to the site. It is a great example of how typography can become the primary design. Although I’m not crazy about the use of all caps for every word,  this is a site made beautiful with interesting type and color.

La Wine 2

We Shoot Bottles

http://www.weshootbottles.com/ 

We Shoot Bottles

 

This simple design makes great use of white space to get their primary message across “We shoot bottles.”

just dot

http://www.justdot.gr/

Just Dot

The innovative typography in the just dot website looks like drawings on a chalkboard. It’s a good example of how type can be used as a design element. The design aesthetic feels casual and conversational as well as interesting to follow the narrative on the “chalkboard.”

Atticus Pet Design Studio

http://www.atticuspetdesign.com/

Atticus Pet Design

Who doesn’t love a website with puppy dawgs?! I love the look and feel of this website that is accentuated with modern, yet elegant typography. This clean design is easy to read with appropriately spaced, colored and weighted typography.

Tom, Dick & Harry Creative Co

http://www.tdhcreative.com/

TDH Creative

Tom, Dick and Harry do a great job of incorporating different fonts and font styles to create a beautiful site. The typography is enhanced with icons and shapes, contrast and spacing. Even thought it’s typically not recommended to use multiple fonts on the same page,  I really like the look of this site.

Ben Lind

http://benlind.com/

Ben Lind

Oh, hi Ben! I chose to include this site because it’s just plain cute. All Ben has done is use a simple san serif font and manipulated in an interesting way and “Boom” you have a website. It’s not quite that simple, but simplicity in the canse of Ben Lind and his websites, this is totally working for me.

indubitablee

http://www.indubitablee.com/index.html 

Indubitablee

The indubitablee website is a splendid mixture of the BriAbby and just dot websites. The type matches the icons and logo that give the page a  look and feel more closely associated to a cut-out or drawing. The site makes good use of typography without going overboard with content. There are few words, but they ones used are made impactful with typography.

 It feels very artsy and unique which is a good feeling to evoke in a user visiting the website of a designer.

Games We Played

http://www.gamesweplayed.sg/

Games We Played

You must visit this website! It is absolutely stunning, engaging and inspiring. Each letter is animated and bring to life a new narrative – the “Games we played growing up in Singapore.” Every letter is different, each one a different color and surrounded by a different graphic. It is a simple concept with a fun and memorable effect.

I haven’t even hear of most of these games but it does a wonderful job teaching and explaining each one. I am seriously in awe of this website.

Austin Beer Works

http://austinbeerworks.com/

Austin Beer Works

This brewery website is almost all typography on top of a dark background. It’s obviously “bold” and impactful to the user. The contrast of colors, sizing and placement establish a clear visual design hierarchy for the user. Simplicity is key for the effectiveness of this site.

Build Responsibly

http://buildresponsively.com/

Build Responsibly

Build Responsibly’s site is primarily type but it still looks very designed. I like large, bold, easy to read and see their hierarchy of importance within a page. Even though white on black can be difficult to read, this site does a nice job reducing the type weight and spacing out lines (leading) and letters (kerning) to make it easy to read.

 

One comment on “14 Examples Of Web Typography Yielding Awesome Websites

  1. Pingback: Web Design Trends In 2013 (And Why) | A Better User Experience

Leave a Reply