Examples of Great Typography

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.

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.com/ - Carsonified

Carsonified


http://www.helveticons.ch/ - Helveticons

Helveticons


http://jaxvineyards.com/ - Jax Vineyards

Jax Vineyards


https://www.playtype.com/ - Playtype

Playtype


canvas.is/#/intro - Canvas: A New York City digital agency

Canvas: A New York City digital agency


http://knockknockfactory.com/ - Knock Knock Factory

Knock Knock Factory


http://dpxmag.com/30-beautiful-typography-pictures.html - Beautiful typography pictures  - Jimi Hendrix

Beautiful typography pictures - Jimi Hendrix


www.neotokio.it/ - NEOTOKIO! / italian interactive design studio

NEOTOKIO! / italian interactive design studio


http://www.wanda.net/ - Wanda Productions

Wanda Productions


http://www.swissted.com/ - swissted

swissted


http://www.richbrown.info/ - Zaum & Brown CD Design

Zaum & Brown CD Design


http://www.richbrown.info/ - Rich Brown logo for Michael Steinberg

Rich Brown logo for Michael Steinberg


http://www.castirondesign.com/ - Cast Iron Design Company

Cast Iron Design Company


http://2012.ampersandconf.com/ - Ampersand 2012 · The Web Typography Conference

Ampersand 2012 · The Web Typography Conference


mavic.com - Mavic

Mavic


freefaces.simonfosterdesign.com - freefaces.simonfosterdesign

freefaces.simonfosterdesign


ryankeiser.net - Ryan Keiser

Ryan Keiser


blakeallendesign.com/ - Blake Allen Design | Elements & Principles.™

Blake Allen Design | Elements & Principles.™


madebywater.com/ - Made By Water - Portfolio Jordan Vitanov

Made By Water - Portfolio Jordan Vitanov


http://hovercraftstudio.com/service/illustration/ - Hovercraft : Full-Service and Brand Focused – Illustration

Hovercraft : Full-Service and Brand Focused – Illustration


studio32north.com/ - Masterson rye whisky

Masterson rye whisky


freerangedesigns.ca - Free Range Designs

Free Range Designs


austineastciders.com - Austin East Ciders

Austin East Ciders


http://www.fastcodesign.com/1664719/infographic-of-the-day-why-should-you-care-about-typography?partner=homepage_newsletter - Infographic Of The Day: Why Should You Care About Typography? | Co.Design: business + innovation + d

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


typetoken.net - typetoken

typetoken


andypatrickdesign.com - Andy Patrick Design

Andy Patrick Design


danatanamachi.com - Dana Tanamachi

Dana Tanamachi


mikekus.com - mikekus

mikekus


www.wearevapour.com - weare vapour

weare vapour


www.bindacademie.nl - Bind Academie

Bind Academie


telegramme.co.uk - Telegramme

Telegramme


www.master-sante-publique.u-psud.fr - master sante publique

master sante publique


pupunzi.com - Pupunzi

Pupunzi


budi.co - Budi

Budi


designinfluence.org - Design Influence

Design Influence


goodfuckingdesignadvice.com - goodfuckingdesignadvice

goodfuckingdesignadvice


soulwire.co.uk - Soulwire

Soulwire


kylesteed.com - Kyle Steed

Kyle Steed


jessicahische.is/awesome/ - Jessica Hische

Jessica Hische


www.busesatthebrewery.com - busesatthebrewery

busesatthebrewery


steedicons.com - Steedicons

Steedicons


moresoda.co.uk - More Soda

More Soda


p.erkins.com - p.erkins

p.erkins


joelglovier.com - Joel Glovier

Joel Glovier


www.thisistommy.com - This Is Tommy

This Is Tommy


danielmart.in - Daniel Martin

Daniel Martin


www.elansnowboards.com/en/ - Elan Snowboards

Elan Snowboards


www.routalempi.fi - Routalempi

Routalempi


roggeundpott.de - Rogge und Pott

Rogge und Pott


www.carterdigital.com.au - Carter Digital

Carter Digital


www.infinite-imaginations.com - infinite-imaginations

infinite-imaginations


www.citrus7.com.br - citrus7.com

citrus7.com


www.designone.co.uk - designone

designone


www.cocollective.com - CocCollective

CocCollective


www.creative-jar.com - Creative Jar

Creative Jar


www.griplimited.com - Grip Limited

Grip Limited


www.indubitablee.com - indubitablee

indubitablee


kellianderson.com - Kelli Anderson

Kelli Anderson


www.stockholmhairdresser.se/ - Stockholm Hair

Stockholm Hair


www.denisechandler.com - Denise Chandler

Denise Chandler


designbarinc.com/ - DBar Inc.

DBar Inc.


jonesingfor.com - Jones

Jones


www.tdhadvertising.com - Tom, Dick & Harry

Tom, Dick & Harry


www.newmont.com/ - newmont mining

newmont mining

loading..

Comments

Add New Comment

userpic

Featured Web Templates For Sale

Design Blog Categories


Recent Blog Posts

Locate the designer of your dreams in our Designer Portfolio area.
Submit your website designs to our moderated Design Gallery.

Over 25,000 incredible designs to choose from, instant download.

Tons of downloadable templates, logos, and design components - free and paid.