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


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


http://jaxvineyards.com/ - Jax Vineyards

Jax Vineyards

https://www.playtype.com/ - 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


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


freefaces.simonfosterdesign.com - 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


andypatrickdesign.com - Andy Patrick Design

Andy Patrick Design

danatanamachi.com - Dana Tanamachi

Dana Tanamachi

mikekus.com - mikekus


www.wearevapour.com - weare vapour

weare vapour

www.bindacademie.nl - Bind Academie

Bind Academie

telegramme.co.uk - Telegramme


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

master sante publique

pupunzi.com - Pupunzi


budi.co - Budi


designinfluence.org - Design Influence

Design Influence

goodfuckingdesignadvice.com - goodfuckingdesignadvice


soulwire.co.uk - Soulwire


kylesteed.com - Kyle Steed

Kyle Steed

jessicahische.is/awesome/ - Jessica Hische

Jessica Hische

www.busesatthebrewery.com - busesatthebrewery


steedicons.com - Steedicons


moresoda.co.uk - More Soda

More Soda

p.erkins.com - 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


roggeundpott.de - Rogge und Pott

Rogge und Pott

www.carterdigital.com.au - Carter Digital

Carter Digital

www.infinite-imaginations.com - infinite-imaginations


www.citrus7.com.br - citrus7.com


www.designone.co.uk - designone


www.cocollective.com - CocCollective


www.creative-jar.com - Creative Jar

Creative Jar

www.griplimited.com - Grip Limited

Grip Limited

www.indubitablee.com - 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


www.tdhadvertising.com - Tom, Dick & Harry

Tom, Dick & Harry

www.newmont.com/ - newmont mining

newmont mining



Add New Comment


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.