Advertisement
Typography

Web Typography Case Studies: January 2011 Edition

by

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.


03: Finch

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!


05: Kaleidoscope

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.


06: Fe.rocious

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.


07: RGA

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.


09: Infinvision

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.


10: King Size (WordPress Theme)

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.


12: Greater Dunnellon Historical Society

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.


Conclusion

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!

Related Posts
  • Web Design
    Complete Websites
    Design a Travel Startup Landing Page Using PhotoshopLanding thumb
    In this tutorial I’ll walk you through a process of creating a simple and clean travel startup landing page design. I'll be using Photoshop CS6 to design a professional and lightweight layout combining beautiful imagery and some stylish fonts.Read More…
  • Web Design
    Interviews
    A Quick Q&A With Jason PamentalJason thumb
    Jason Pamental has been working the web for a long time; so long in fact, he's even used something called "Netscape". This experience, coupled with his passion for responsive design and web typography (amongst many other things) have made him a familiar face on the speaking circuit. I caught up with him, shortly before he heads to London for the Future of Web Design, and fired a few questions his way.Read More…
  • Web Design
    Design Theory
    9 Quick Wins for Halfway-Decent Design9 wins thumb
    To truly design something well, you need a deep understanding of what you're designing, and who you're designing for, as well as a deft mastery of the tools and technology you use. But that's not always possible, especially if you're a beginner. Fear not! These few tips will get your designs looking halfway-decent, quickly.Read More…
  • Design & Illustration
    Web Roundups
    23 Must-Have, Free Fonts for Graphic DesignersFree fonts 400x4001
    Do you need a font that will make your design sparkle? Low on dough? As you probably already know, there are plenty of free fonts on the Internet. Like anything free, quality varies. With a little research, it's possible to find a few gems out there that won't cost you a dime. This article highlights twenty-three high-quality free fonts suitable for a variety of graphic design projects.Read More…
  • Web Design
    Typography
    How to Establish a Modular Typographic ScaleScale retina
    Possibly the most obvious typographic question in the hands of a designer is "which typefaces should I use?" The second question, one which rarely gets the kind of attention it ought, is "at what sizes should I set my type?" Establishing a modular scale is the best way to determine typographic sizes, in fact, it can help with laying out measurements and proportions across your whole page layout.Read More…
  • Web Design
    Industry
    Flat Design, iOS 7, Skeuomorphism and All ThatFlat retina
    The notion of flat, "digitally authentic" design has been a popular topic of conversation and controversy recently, especially with the software design efforts of Apple, Microsoft, Google and their respective flagship operating systems. Subtle colours, light typography and the other commonalities of modern flat design have all found a working role in the construction of the neoteric design trends we're all coming to love (or hate). We're going to take a look at these trends in this article to see what all the fuss is about.Read More…