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.
