This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.
You know what I love? The internet. Specifically, I love that feeling when you stumble upon one of those wonderful little corners of beauty with some particularly nice typography. Today, we'll put the magnifying glass to 10 great examples of web typography in a new monthly series that seeks to bring you fresh typographic inspiration!
Inspirational Web Typography, A Webdesigntuts+ Monthly Series: Throughout my travels on the world wide web, I've taken note of the examples of sites that inspire me as a designer. By using type in a way that is innovative, artful, or simply wonderful, these sites have helped me to push my own typographic skills... and I hope that they'll prove to be inspiring for you too. In this series, we won't just list these sites... we'll actually examine how and why they work.
Without further ado, I hereby present this month's curated collection of 10 examples of inspirational typography. If I don't hit your own favorite this month, be sure to share it down below in the comments section!
The Design Cubicle
Brian Hoff's design blog uses a mixture of Sentinel and Tungsten for the header and other small headings, and FF Dagny Web Pro for both the body and post titles. The combination of these two staggeringly different styles of type work off each other very nicely.
The header looks both proud and professional, with the two excellent faces from Hoefler & Frere-Jones complementing each other wonderfully. The condensed, vertical form of Tungsten contrasts with the finely detailed italic Sentinel to produce a title that is both readable and pleasing to the eye.
For the body, there's not really much going on, and I think that's how the designer wants it. Dagny is a wonderful, no-nonsense typeface that works in both small body text and larger, bold titles. Not much else to say here, aside from it's a wonderful choice of font, and one that anyone who sees it will definitely appreciate.
Ah yes. No proper typography post would be complete without mentioning Mike Kus' 2009 redesign of carsonified.com. The site employs tremendously sized Cooper Black, a typeface whose real power is apparent when set at such a huge size. You see all the details of the font, and really get a feel for what kind of a company Carsonified is.
The rest of the type on the page gets out of the way, with barely-noticeable Helvetica in the navigation, and Georgia for the body copy and most of the titles. I'm not sure what font is being used for the titles on the right of their homepage, but I can see that its hand-drawn qualities beautifully contrast with the almost typewriter-esque feel of Cooper, as if they were two sides of the same coin.
Really, though, what I think ties together the design of this site is the colors. Each page has a unique background color that works perfectly with the tan of the text. The colors are really different across pages, but they all share a nostalgic, vibrant feeling, one that works with green, blue, and even bright orange. The beauty of the text color is that it has enough contrast against a dark background, as well as a very bright background.
Tyler Galpin's site is a wonderful mix of industrial, detailed, and emotional. He uses a wide array of fonts for just the tagline—something which would usually look stupid, but here, Tyler chooses just the right ones to make it work. Although they appear so different to the naked eye, all the typefaces display a singular message.
Not to belabor the point, but I would say the defining feature of this site are the sheer number of fonts used throughout it. One moment you're looking at a nice slab-serif, then you scroll down a bit, and what's this? A script? Here? You can tell just from looking at it how much time and effort was put in to choose the type that you can glance at in just a few seconds.
Another important element of this site is how each page was custom designed, if you will, without using a default CMS template. Each page is also typeset with even more fonts, creating a consistency through the total lack of consistency throughout the site.
Let's talk color. Galp.in has one of the most restrained color palettes I've seen on the web lately. Simple black on white, with splashes of yellow and red thrown in for emphasis, and emphasize it does. It really is amazing what a single color can do to create striking visual contrast in the right hands. Beautiful typography, beautiful website.
Dawghouse Design Studio
The website of Jan Cavan is very unique. She relies heavily on texture, and not so much on type. So why is she included in this roundup? The type she does have on her site is very tastefully chosen. For instance, the main title of each page is set in a vibrant, retro style script, a bold choice for a bold design. These "retro script" fonts are tricky to use on the web though... and this design carefully avoids all-out cliche' with a restrained application.
I can't actually put my finger on why I enjoy this design so much, but I think it has something to do with the color, or maybe the texture? Wait, I think I got it. All the elements of the design blend perfectly together, and no one area gets more attention than another.
There's also a lot of subtle things going on here. The blog post titles are set in all-caps, a decision which works well with the classy serif she chooses to set them in. All these little things in Jan's design contribute to the retro vibe that the page is putting out.
Eight Hour Day
The Studio of Nathan Strandberg & Katie Kirk. The name of the game here is subtlety, and this wonderful website does not disappoint. From the beautiful type to the vivid colors, it's truly an experience to visit eighthourday.com. All the typefaces are tastefully chosen, with a header in a nice sans-serif and a script subheading. All the text is balanced; nothing is clamoring for your attention. This is very much a welcoming website.
As I mentioned, color plays a huge part in the typography, as well as the design as a whole. That nice red-orange is used throughout, accompanied by other soft colors. In this site, it seems that the type and color are intrinsically woven together. The type wouldn't work without the color, and visa versa.
There's nothing special about the typefaces by themselves. Sure, they'd still look good, but not nearly as perfect as they do now. That makes this site especially fun to examine in order to discover how the type and color interplay with each other.
A Night for Adoption
A great website for a great cause by Matthew Smith. What I love about this site is the attention to detail. Look at those subtle italics in the titles. Beautiful. I admire his use of Georgia for the headings. It's normally used for body text, but putting it in the size he did for the header really shows off the gorgeous details of the age-old typeface.
Notice the way the light shines above the text in the header. It's those little things that make a design great.
Georgia is also used for those lovely buttons, with that combination of all-caps and small italic. This design truly shows off the flexibility of one typeface, and I'm loving it.
I also want to mention that nearly all the text on the page is real text, embedded via @font-face, so hats of to Mike Meyer for that.
Another Mike Kus design, this one featuring some very unique typography. Since most of it is image-based, I can't say what font is used in this design, but I can say that it represents very well the image that Twitter emits as a company; it's fun, light, and a little bit silly.
Color-wise, you have the familiar Twitter blue used throughout the site for most of the text, and it works beautifully. There's also a really nice red used for embellishments and attention-grabbers that coexists very peacefully across the site's pages.
What's amazing to me here is that, even if it didn't mention the company at every turn, you could still tell that this is a Twitter site. It projects their unique brand at every level, with the type, color, illustration, and even texture. What a lovely little site.
Slab-serif, sans-serif, serif, this site uses all sorts of type, and uses them well. It's a good choice to leave the slab-serifs for the largest titles, which leaves the heavy lifting, if you will, to italic Times New Roman—a typeface normally not used in web design, but one that works well if used correctly.
The tiny body copy is left to Tahoma, another bold choice that works well in a small size. You barely notice that it's even there, and I'm sure that's how the designer wanted it.
Once again, I am unsure what is used for the large titles, although I would probably put my money on Rockwell, a really solid pick.
Color-wise, this design employs a rarely used light on dark scheme that doesn't work with longer bodies of text, but for an image-heavy site like this, I think works very, very well. As per usual, another color is used for emphasis, and in this situation, that color is a nice, rich orange. It's a very classy choice, and I very much respect the decision.
Art in my Coffee
For a collection of foamy awesomeness, by the dynamic duo Jina Bolton and Meagan Fisher, the word that comes to mind is classy. All the type is very readable, and set in colors that nicely complement the delicious pictures the site features. As I look at this site, I am struck by the quality of the details in this design, from the nicely set type, to the coffee-inspired colors.
I'm quite certain that the logo and subtitles are in Archer, a simple, readable, slab-serif from Hoefler & Frere-Jones. Again, this, coupled with Georgia, makes for a classy, readable experience.
Another thing I absolutely love in this site is the colors. Since it's obviously a coffee-themed site, the colors are not only fitting, but also beautiful. Granted, the effect is probably enhanced given the number of coffee-colored pictures on the site.
Overall, a totally awesome website from totally awesome people.
Iron to Iron
Handsome design and development, reads Iron to Iron, and handsome it is. The whole design feels proud and somehow regal, as if it were finely crafted by the court's in-house designer.
Type-wise, this design is simple lovely. That condensed obscured text is genius. You can't actually read it, but it doesn't really put any pressure on you to try. It's those kinds of details and flourishes that make this site beautiful. Case in point, there's no practical purpose for the venn-diagram-like shape in the background of the header, but it looks great, and adds yet another dimension to this design.
The body paragraphs are set in no-nonsense Georgia, and I think it serves them well, especially when you consider that wide sans that they are underneath (for the headings).
Transparency in the colors is used to great effect, with most of the colors simply being varying levels of the same tan and blue-green.
What a truly wonderful way to end this little collection of beautiful websites.
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!