
Examples of Great Typography
Date: 04-18-2012
Typography separates the professional designers from the newbies
Typography can make or break your design. It's really one of the things that separates a seasoned designer from a newbie who still has a lot to learn about design. It can take years to learn to see how the type choices you make end up affecting the rest of your design, or to see how large face type can be used to dramatic effectiveness as a design element. Check out these fantastic examples of great typography that we've culled from our inspiration gallery.
What exactly is typography?
Typography is defined as:
1. the design, theory, and art of creating characters for printing.
2. the design and selection of printed matter.
3. the craft or business of composing type.
2. the design and selection of printed matter.
3. the craft or business of composing type.
In web design, you can use type in a lot of different ways. You use the type for body text, headlines, subheads, callouts, bylines, tool tips and much more. You can also use type as a very effective design element. Ultra large type can be beautiful, striking, exciting and it can be one of the most wonderful design tricks in your bag. A lot of the designs below show this.
Small type matters because there's a lot of it - big type matters as a visual design element
Your choice of font for your body text is as important as your larger design elements. There is a LOT of body text in a page and a well chosen elegant or appropriate font will support the rest of your design in a very important way. Don't overlook the importance of choosing a the right font for your body copy.
That's not to say that you need to choose a lesser known font all the time, a widely used font like Arial is definitely the right choice sometimes - it's a great clean and versatile font. But take the time to try your design with a wide selection of body text fonts.
You will need to import the font into your page if it's not one of the standard system fonts
Keep in mind that there are only about 13 font faces that are common to both Windows and Mac. There's a good listing of these common system typefaces here. If the font you want to use is not in that list, you'll need to use the @font-face CSS trick or Google Web Fonts, or a font rendering solution like cufon.
There is a good discussion of these things here: How to add non-standard fonts to your webpage
All that said, here are the typography examples:

Carsonified

Helveticons

Jax Vineyards

Playtype

Canvas: A New York City digital agency

Knock Knock Factory

Beautiful typography pictures - Jimi Hendrix

NEOTOKIO! / italian interactive design studio

Wanda Productions

swissted

Zaum & Brown CD Design

Rich Brown logo for Michael Steinberg

Cast Iron Design Company

Ampersand 2012 · The Web Typography Conference

Mavic

freefaces.simonfosterdesign

Ryan Keiser

Blake Allen Design | Elements & Principles.™

Made By Water - Portfolio Jordan Vitanov

Hovercraft : Full-Service and Brand Focused – Illustration

Masterson rye whisky

Free Range Designs

Austin East Ciders

Infographic Of The Day: Why Should You Care About Typography?

typetoken

Andy Patrick Design

Dana Tanamachi

mikekus

weare vapour

Bind Academie

Telegramme

master sante publique

Pupunzi

Budi

Design Influence

goodfuckingdesignadvice

Soulwire

Kyle Steed

Jessica Hische

busesatthebrewery

Steedicons

More Soda

p.erkins

Joel Glovier

This Is Tommy

Daniel Martin

Elan Snowboards

Routalempi

Rogge und Pott

Carter Digital

infinite-imaginations

citrus7.com

designone

CocCollective

Creative Jar

Grip Limited

indubitablee

Kelli Anderson

Stockholm Hair

Denise Chandler

DBar Inc.

Jones

Tom, Dick & Harry

newmont mining

Comments