Effective Web Typography
As the quote from Steve Jobs’ Stanford commencement address notes,
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
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.
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?
This site makes great use of simplicity, whitespace and contrast with typography to tell users about their tool, the Hello Bar.
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!
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.
We Shoot Bottles
This simple design makes great use of white space to get their primary message across “We shoot bottles.”
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
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
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.
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.
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
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
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’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.