Advertisement
Typography

Web Typography Case Studies: Spring 2011 Edition

by

Ready for this month’s dose of web design typographic awesomeness? I’ll bet you are! Connor is taking the lead this month with Brandon doing some backup curation - and we've got a list of 17 sites that showcase some of the best typography for you guys n’ gals to check out. This month we even have a special section dedicated to some new(ish) web-based typography and layout tools to make your life a bit easier. 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: SquareSpace SXSW

SquareSpace actually has a history of well designed typography on their sites, but they pulled out all the stops for this year's SXSW event. The site content is all about people posting whacky photos from the event, but take another look at how well it's laid out. Beautifully set headlines... plenty of variety in the layout... and subtle background image/textures that reference typography of old. The hip, ultra modern skull illustration doesn't hurt things either.

The site isn't huge, some SS has done well to keep things fresh and interesting as you scroll down the page. If you pay attention, there's really no set standard for the typography (beyond the same font families) - sizes are all over the place and so is the placement... But that's perfectly acceptable in this case because each individual section (that which is visible on a screen at the same point) works in harmony with itself. The colors are all from the same general palette, and everything feels like it's hinged on a grid, even if you can't quite nail it down.


02: Grip Limited

Grip Limited is one of those sites that you run across every once in a while that is so incredibly out-of-the-box that you just kinda have to sit and take it in for a minute or two. I get the strange feeling that just looking at it makes me a better typographer. The type variety is so diverse that without the unifying monochrome palette, the site would probably be hard to look at. Heck, most usability experts might say that this is utter rubbish even in its current state, but I'll argue that this kind of fun, "shotgun" approach to type is exactly what web designers need to indulge in from time to time.

Will you be recycling this layout over and over for business or corporate projects? Of course not, but just taking a small bite of type off of this site would do wonders to spice up an otherwise ordinary project that you might be working on. For instance...


03: Burton

Burton is kinda/sorta on the opposite spectrum as the Grip Limited site. It's highly organized, set in a rigid block layout, and super duper easy to use. Take a closer look though and you can probably see what I've placed these two sites together in this list. While the layout itself is pretty well locked down in terms of structure, the actual typography across the site is far from what you normally see on the web - and a lot more like what you might see in a snowboard magazine or catalog. Type is set in circles and other un-ordinary web shapes to give each page the right amount of visual interest. They've also scattered in info-graphics and other simplified illustrations into some of the ordinary grid blocks to break up the monotony and rhythm of each page.

This version of the Burton site has been around for a while... and yet it always feels new and fresh every time I check it out. By simply swapping out photos and the key colors, they can get a lot more mileage out of the site for each new season.


04: Impact Media

Impact Media uses different fonts, colors and sizes in it's main slider and throughout their website. Like the font - Impact - the choice of typography throughout this particular site is bold, large fonts that contrast a lot with their backgrounds.

I love the current style of bold script fonts on the web right now and Impact Media uses it in their second line to generate a lovely, welcoming effect.


05: IAMGAZ

Gaz Battersby is a graphic designer based in Leeds, UK who's minimalist site acts as his portfolio. The site uses a serif font throughout his design, but contrasts elements only by changing font style (to italics) instead of a whole new font. This results in a simpler, cleaner typography scheme.

Battersby's site also uses color to build up a heirachy with his headings being encased in turquoise circles to catch the user's attention.


06: SURROUND

I won't say too much about SURROUND because, well, there's not much to say. It's a reminder that sometimes, a simple approach to layout and typography works perfectly fine. No unnecessary frills, nothing in between the visitor and the content. Just simple functioning techniques that deliver a message.


07: InvisibleCreature

Invisible Creature is actually one of my favorite studios in the world... going all the way back to when they were teamed up as Asterik Studio. Long story short: they create kickass posters, album artwork, and other fun stuff. What I like about this site is it's control and discipline. As a leading "rock/metal" studio, they could just as easily designed a site that caters to that side of their work: wild, abrasive, chaotic. Instead, they've opted to use clean lines, simple colors, and sans-serif fonts - which ultimately lets their work speak for itself.


08: Feed Me

Feed Me is a one-page web design that uses typography to create a clean color scheme across the page. The contrast between it's standard font and a bolder, brush-style one creates a simple heirachy that puts emphasis on key terms.

Feed Me has it's own merits as a whole web design and the typography is a key ingredient to it's success. The curved green fonts co-ordinate with the nature theme of the web design which I love.

It's difficult to point out the exact reason for the effect generated by this graphic designer's site, but I do know it's a great one!


09: Get My Boss to North Cape

Get My Boss to North Cape is an interesting website. A Belgian web design company - namely, Inventis - are trying to leverage a gruleing 545km cycle to get some addition Facebook likes. The website itself uses an interesting range of typography and uses color to emphasise the most important parts of each statement (for example "5000 likes" and "bike 545km").

The color of the text on this page co-ordinates with the background it resides on as seen in the brown text used on the title signage. Inventis also use inner shadowing to distinguish the text from it's background in cases where this is needed, but not where it's not (such as the milestones on the cycling track).


10: WesBos

Like Gaz Battersby's site, Wes Bos uses few different fonts in his design and instead opts for using a ribbon background on his editors to create his hierarchy. Very simply, I love the contrast from the script font to the serif one and the all-caps emphasis on his job titles.


11: HTML5 Logo

Although not a new site, W3C's HTML5 logo site is still a great example of good typography in play for a number of reasons including the use of a lovely bold, condensed font in titles to match that of the page's namesake.

The pargraphs on the page are also spaced appropriately for easier reading for the end user.


12: Chirp (Twitter)

As you can probably guess from the screenshot, this is not a new site. However, it kept appearing on other typography roundups at such a great frequency, i'd think of it as a glaring omission should I chooose not to include it. Chrip was Twitter's official developer conference that happened about this time last year.

I once learned a rule of thumb about typography: don't use more than three typefaces. Whilst Chrip gives off the impression of a lot of activity (something you really want to create for a confernece), I can only count three different fonts used if one ignores the logo.


13: Jeremey Church's Reduce the Noise

I especially love the title in Jeremy Church's portfolio. The emphasis on the "the" looks awesome but draws more attention to a main aim of to "reduce noise". Apart from his bold, shadowed titles, the rest of the design uses a very simplistic, sans-serif font that draws more attention to it's main contrast.


14: Black Ant Media

Black Ant Media uses a range of very smooth faces that look amazing, but is hard to poinpoint why. Black Ant Media opts to use the same font instead of many and only vary size, color and weight to distinguish different element's prominences.

Like some of the other examples on this, Black Ant Media also use coloured backgrounds instead of scale to bump titles up it's visual hierarchy.


15: Premium Pixels

Premium Pixels is a WordPress theme that makes the list thanks to it's relevance to some of the current typography standards discussed in Brandon's recent article on Typography. The noisy background is contrasted with the text on the page thanks to a white text shadow that offers it a sense of depth. Each post on the page is also titled with a compact, bold font.

Each of the posts in this WordPress theme has big line spacing so it's a lot easier on the eye to read and the ethic of large padding is evident across each element on the page.

Subtly, there's also a serif face thrown in between each post's meta data.

As a side note, Orman Clark's newest website redesign is also worthy of mention on this list, as it exemplifies some great typographic layout principles. Clean, simple, and well organized. here are a few screenshots:


16: Pelicanfly

Web designers talk a lot about recreating "print aesthetics" on the web... but usually designers take that to mean simply using rich textures, whacky unstructured layouts, and lots of corner shadows or trompe l'oeil effects. Rarely do designers really remember that print typography is often just as structured as type on the web. Pelicanfly merges the best of both worlds (in my opinion), by using simple column structures, typographic symbols, and contemporary CSS effects to create a site that's memorable. I'm going to guess that it's been designed with tablets in mind as well, because there are a couple cases where you'd need to flip your screen to read.


17: SciWeavers Free CSS3 Online Type Generator

Free tool: This is a fairly new tool that I ran across the other day. It allows you to essentially tinker with the base typography for a project until you get everything perfect - then it spits out the CSS(3) that generates the styling that you created. I'm sure there are a handful of similar web-apps out there, but this one struck me as one of the more valuable simply because of the huge amount of tinkering that you can do and it's ease of use.

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
    Email
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.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
    CMS
    Styling Our Ghost Theme With LESSGhost less retina
    Welcome to the fourth part of our Ghost theme design tutorial series. In the introductory tutorial, you learned that there are two stages to designing a theme. During the instalments therefater we began and completed what we've referred to as "the first stage" of creating your theme's templates. This fourth part of our series takes us into the next stage of theme design, namely styling.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…