To someone who isn't deeply involved in visual web design, typography is one of those things you rarely notice, if ever. Like the Academy Award for “Sound Design,” good web typography examples blend into and enhance their environment. You aren't supposed to notice typography, unless you happen to have an eye for design.
It's subtle, but the difference between a website using stock designs and fonts, and one using custom fonts can be quite significant. Web surfers have jaded eyes, and recognize common fonts even if they might not know their names.
Having a unique font they haven't seen before is a little touch, like an especially inviting entryway to a foyer, that tells visitors your website is special.
So, in no particular order, I've picked out a few websites I've come across with good web typography examples, as they relate to the overall theme. I also threw in a couple that fell short. Most of them come from VeryNiceSites which is, in fact, a very nice little site for designers to browse through looking for ideas.
Five Great Web Typography Examples
Flat is coming back and quickly, if you haven't heard. If lots of sliding boxes are in your design future, remember that each element must always exist as its own item. That's how this site gets away with mixing so many typography styles – each one is true to the form it's emulating.
Sketchin
Large picture backgrounds seem to be coming into vogue, giving websites a very magazine-spread feel. The white sans serif font conveys straightforwardness, juxtaposed against the lounging figure – perhaps hoping to catch a few tablet-users viewing in similar poses. I also love the seamless sidebar, with the large asterisk drawing attention to a detail that might be overlooked – symbols still work as eyeball catchers.
Speaking of form following function – notice how small the copy is. “Holler” - or at least its phonetic equivalent – is the brand, the focus, and the desired outcome all in one. So it dominates the page, with a comparably tiny bit of rollover text providing the CTA.
Type/Code
If you're going to draw attention to the font itself, do something nifty to justify it. If you click through to the site, the logo is rendered in 3D cubes and blasts apart in different ways as you mouseover it, before returning to form. This is great design synergy, given his claim to make things come to life.
L+R
I give them credit for playing around with the stark black & white design like they did without it ever seeming too creepy or unnerving, yet there's all something very pointy about it, even down to the italicized “strategy” and “aesthetics.” More standard fonts on the expository copy make it feel more grounded and believable.
And a Couple Honorable Misses
Form Follows Function
The name is a bit ironic because the wheel in the center is a gimmick. Yes, he has a lot of portfolios to show off... but that's it. The wheel doesn't convey much else besides his minimalism. And the minimal design works against him here. With dozens of flat-shaded colors, overlain with nondescript font, for users to choose from, nothing says “Click me! Click me!” There's no starting point. Some iconography would help.
It's typography gone wild! Yes, you can use reactive web design techniques to make fonts fill the screen. But even with a nifty deco layout, that doesn't mean it's a good idea. I feel like I'm looking at a GEEKY BILLY MAYS HERE.
Take the advice above - form should always follow function. That's the key takeaway from these web typography examples. Don't let your design urges overwhelm the message. Make everything organic and cohesive, and you'll have a brilliant webpage.