Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.
Ready for this month's dose of web design typographic awesomeness? I'll bet you are! Max is taking the month off, but he's given us a list of 15 sites that showcase some of the best typography for you guys n' gals to check out. Let's dig in!
About the Web Typography Series
Talking about the technical rules of proper typography is great... but where the rubber really hits the road is when we can begin looking at examples of typography in action and analyze why it works. One of the beautiful things about typography is that, much like the languages that we use to communicate with each other in, the way in which you use type in a design gives it a voice. You can yell and scream or you can whisper quietly... it's all up to you and how you want your message to be heard.
Each month, we'll be looking at between 10 and 20 examples of excellent typography in web design... but more importantly, we'll also analyze why the typography works. Let's dive into this month's offering:
01: Thrive Solo
It's far too rare that I come across sites like this... honestly. It's an approach that you tend to see a lot of in print design, but rarely brought to the web. What are the components?
- Big, Bold Type (set in a simple, top to bottom hierarchy)
- Structured Grid Layout (with intelligent breaks from the grid)
- Vibrant Color (just three colors - Orange, White, Black)
- Simple Texture (enough to give it some grit)
Look at how simple the design is... there isn't a single element that a first-year design student can't create... but how elegant and sophisticated does it feel on the screen? This is what we're talking about when we discuss inspirational typography. By using a simple, well structured layout, the designer manages to articulate a sense a confidence and professionalism before the visitor even reads the text.
02: Amazee Labs
Sometimes a design requires something out of the ordinary to grab the visitor's attention. This is what the Amazee Labs site does so well. Not only does Amazee opt not to use standard web fonts, they also blend HTML set type alongside image-based type to deliver a high level of creativity and excitement. In many ways, Amazee is breaking the rules... but it's how they do it that makes it shine:
- A consistent layout for similar elements (like the informational blocks down below)
- Type Blocks and images are well aligned with each other.
- Consistent color usage - everything falls under a handful of "brand" colors.
- Consistent "functional type selection" - while there are probably 20 different typefaces on the homepage alone, when it matters (h1, h2, h3, paragraph, links, etc), the typefaces used are consistent.
All of this helps to preserve the sense of order, even when the type selection is all over the map.
The Finch site is surprisingly minimal in it's type usage. Don't be deceived by the huge logo on the front page... everything in this design is understated (in a good way).
The thing about using type on a blank page is that, when done properly, the page feels like it has a lot more going on than just text.
04: Image Mechanics
We mentioned Image Mechanics in our Yearly Web Design Trends post, but it's worth bringing up again because it rocks. The design deviates from the standard UI navigation paradigm by making actual blocks of text the navigation (as opposed to single words or buttons). This draws the visitor in, reminding them that there are actual ideas behind each link. The actual body content within the design is remarkably well designed as well - it feels almost like a magazine, with big, bold header text, well paired illustrations, and subtle color changes (kinda like spot colors in a print zine). I also love the huge logotype on their "Meet the Makers" page!
Alright, I'll admit that I'm immediately drawn in by the huge, sexy color-wheel-erific illustration... so much so that the typography might even be horrible without it (it's not), and I probably wouldn't notice. The point I'm trying to make with this one is that properly pairing image with type (through size, style, color, etc.) can do wonders to create a memorable site design. Want to make a lasting impression? Take some notes on Kaleidoscope's bold approach.
The Fe.rocious site is an instance where each and every part of the site feels "designed". Which is to say that nothing has been left to the default browser settings to style... This can often be a bad thing when it's not done right, but in the hands of the Fe.rocious designers, it feels smart and stylish.
I'm not going to say too much about this design because I think it speaks pretty well for itself. The layout and type usage is pretty ordinary, but where it gets interesting is in the big images used in the slider. Remember, web typography can exist in images too... creating a distinct visual style for image-based typography can bring a lot to an otherwise ordinary layout.
08: Ghost Horses
I'll be the first to admit that I love Condensed Sans-Serif Typefaces... but they can go oh-so-wrong if not used properly. Here, they take center stage as a cross between a headline and accent font. The result: just the right amount of shouting. Integrating the fancy script font helps to bring a bit of style to the rigid forms of the League Gothic face as well. Notice how the two fonts balance each other out. Good? Yeah, it's great.
The Infinvision site structure is simple and subdued... which helps to emphasize and draw attention to the fantastic little type-driven illustrations that they use to introduce their company. White space works suprisingly well here - nuff said.
King Size is the only template on this list - What I like about it typographically is that it doesn't feel like a WordPress theme at all. The big ribbon, combined with the laurel design makes this feel stark and Roman in aesthetic... something that you don't see often (if at all) in template designs that usually feel rigid and predictable.
11: Devin's Heaven
The logo for Devin's Heaven is great, but what I really like about the site is how the type is laid out for the blog posts. The intro paragraph is full width, and the rest of the posts revert to the standard 2-column content/sidebar approach. It's so simple... but that full width intro paragraph makes you feel like the entire page is dedicated to that single article. Where other blog layouts feel like templates that articles simple fit into, this one feels like it's all about the article first and foremost.
The Greater Dunnellon Historical Society site just feels fun. Consider first the purpose of the site: to preserve Dennelon's history for the community. As such, the typography within the site mimics much of the characteristics of the society that they are preserving. There isn't anything wild and crazy... but everything from the multi-columns, newpaper inspired body copy to the buttons feel authentic to the history (with a few modern updates). The crown molding, whimsical illustrations and shelving adds the right amount of depth to make this site really feel like a mini-time-capsule for this community.
13: Stuart Hobday
Stuart Hobday's site layout is a breathe of fresh air after looking at some of these highly illustrative sites. Its stark minimalist approach feels simple and unpretentious. Everything is placed logically and without embellishment... sometimes what a designer can do with less says a lot more about how much his maturity and discipline. In a world of extravagant portfolios and harsh competition, it takes some serious confidence and vision to pull off an understated design like this.
14: Ryan Scherf
We've covered Ryan's new site in our 2011 Web Trends article, but it's honestly great enough to mention again. Ryan blends type and illustration seamlessly in a beautiful vertical scrolling site. The combined effect is one that creates a sense of adventure and creative exploration... which works perfectly as a method of promoting himself to potential clients.
15: Pat Dryburgh
Pat Dryburgh's site stands in contrast to Ryan Scherf's... but not in a bad way. Pat uses a rigid, well designs structural layout, sophisticated typeface selection, and an interesting blend of positive and negative space to create an overall aesthetic that feels confident and professional. I especially like the large columns of white-space left on the left-side of the big areas of type (under the main image). Could he have filled that space with something? Sure... but what he's decided to leave out of the design speaks volumes to his constraint as a designer.
Well, it's that time of the post again. We've had some laughs, some cries, but together we've made it to the conclusion, and here I have to leave you. As I mentioned up above, if I did't hit your own favorite this month, be sure to share it down below in the comments section! I'll be sure to check it out for the post next month!
Read more about Web Typography at my post on Choosing the Right Font: A Practical Guide to Typography on the Web!
We've also started a great list of articles in the Web Typography category... so check them out too!