20 Websites with Beautiful Typography

Jan 8 2009 by Jacob Gube | 65 Comments

Typography in web design plays an integral part in setting the tone, theme, and message of a website.

For example, you can convey a site’s focus on modernity or traditionalism simply by choosing to use sans serif or serif fonts, respectively. You can call attention to particular parts of the content, and deemphasize others, by changing the font’s color, line-height, style, and size. An effective palette of fonts not only makes a design attractive, but also contributes to the readability and usability of the content.

In this collection, you’ll find a variety of sites that showcase creative and functional uses of typography.

1. Jason Santa Maria

Jason Santa Maria - screen shot.

Jason Santa Maria - screen shot.

In Jason Santa Maria‘s personal site, the typography selection and styling plays a large part in the minimalist design. Article titles are large, drawing your attention to them right away. sIFR is used in several places (such as the footer headings) to allow the use of non web-safe fonts without using images for text.

2. Elysium Burns

Elysium Burns - screen shot.

Elysium Burns - screen shot.

Elysium Burns infuses large, bold, sans serif fonts with traditional serif fonts to create a stunning design. CSS image backgrounds are used for the articles’ titles and site headings.

3. GOOD

GOOD - screen shot.

GOOD - screen shot.

GOOD uses clean and excellently-spaced fonts to form a beautiful and readable design.

4. Web Design Ledger

Web Design Ledger - screen shot.

Web Design Ledger - screen shot.

Web designer and developer Henry Jones combines the use of serif and sans serif fonts to create a unique web design. The design of Web Design Ledger showcases the readers’ recent comments with large, emphasized type not only as a functional element in the design, but also for creative purposes.

5. Future Of Web Apps

Future Of Web Apps - screen shot.

Future Of Web Apps - screen shot.

The Future Of Web Apps website uses a variety of large and bold text with bright colors. The main navigation’s font is bold with negative letter-spacing and a short line-height, creating a compact and unique text-based navigation menu.

6. VigetInspire

VigetInspire - screen shot.

VigetInspire - screen shot.

VigetInspire - screen shot.

The VigetInspire blog has an array of gorgeous font usages. A large line-height value for the content’s text allows them to use smaller fonts without sacrificing readability.

7. Diaroogle.com

Diaroogle.com - screen shot.

Diaroogle.com - screen shot.

Diaroogle.com is an excellent example of using both serif and sans serif fonts in a web design while still keeping a tight and complementary composition. The search input box uses a calligraphic font making it stand out while still being unobtrusive.

8. The Morning News

The Morning News - screen shot.

The Morning News - screen shot.

In minimalist designs, typography plays a large part in the layout and theme of the design. The Morning News uses clean and appropriately-spaced fonts with subtle colors to create a clean and crisp atmosphere.

9. Ordered List

Ordered List - screen shot.

Ordered List - screen shot.

Ordered List utilizes a variety of big, bold sizes and colors to compliment the rather dark background.  By using CSS background images for headings, the font used can be a non web-safe font face while still retaining the site’s accessibility and indexibility.

10. Words Are Pictures

Words Are Pictures - screen shot.

Words Are Pictures stays true to the name of the site by using its typography as the main design element. Simple styling of serif fonts sets a classical look-and-feel.

11. Meagan Fisher

Meagan Fisher - screen shot.

Words Are Pictures - screen shot.

Meagan Fisher employs a variety of serif font faces and styles in her personal site. The hang tag image on the top left corner of the web design quickly tells the visitors where they are; using a unique font in this case can call the user’s attention to the tiny blurb.

12. The New Yorker

The New Yorker - screen shot.

The New Yorker - screen shot.

The New Yorker brings their magazine’s trademark font on the web, maintaining their brand in both print and web mediums. The use of serif font gives the reader a sense that The New Yorker is a traditional and long-established magazine.

13. Black Estate Vineyard

Black Estate Vineyard - screen shot.

Black Estate Vineyard - screen shot.

It’s a difficult feat to use a dark background without being associated with the non-mainstream and underground class of websites. Black Estate Vineyard is able to use a black background (their brand color) – while still maintaining a sense of sophistication – by using big, bolded serif fonts. Using a high-contrast color (white) as the foreground color allows for better readability.

14. Ad Fed MN

Ad Fed MN - screen shot.

Ad Fed MN - screen shot.

Ad Fed MN - screen shot.

AD Fed MN successfully mixes sans serif and serif fonts in the design. A simple and bright navigation menu on the top right of the design allows for an attractive and compact primary navigation scheme. The sidebar features image replacement headings so that they can utilize non web-safe fonts while still retaining accessibility and indexibility.

15. What a Lovely Name

What a Lovely Name - screen shot.

What a Lovely Name - screen shot.

What a Lovely Name - screen shot.

What a Lovely Name is a simple web application that helps users choose a name for their baby based on key words ("tags"). The key words are arranged in a tag cloud with more popular tags being larger and bolder than less popular tags.

16. Rustin Jessen

Rustin Jessen - screen shot.

Rustin Jessen - screen shot.

Rustin Jessen‘s site is minimalist for a reason: to direct the reader’s attention towards his wonderful works of art.

17. The Darling Tree

The Darling Tree - screen shot.

The Darling Tree - screen shot.

The Darling Tree‘s use of various font styles and sizes contributes greatly to the design theme.

18. I Love Typography

I Love Typography - screen shot.

I Love Typography - screen shot.

With a site named "I Love Typography", it’s no wonder that the web design is highly-conscientious about its font selection and usage.

19. A List Apart

A List Apart - screen shot.

A List Apart - screen shot.

A List Apart‘s minimalist design is centered on the attractive and functional application of typography. Adequate line-spacing in the content’s text makes their articles more readable and different colors of the titles and headings create a visual relationship between articles in the same topic.

20. Training by Collective Idea

Training by Collective Idea - screen shot.

Training by Collective Idea - screen shot.

A beautiful upcoming events section on the top right of the design showcases their meticulous attention to typography.

Let’s talk type

Have anything interesting to share with regards to typography in web design? What are your favorite fonts? Do you know of a site with great typography that’s not featured here? Please share it with all of us in the comments section.

Related content

65 Comments

Chris W.

January 8th, 2009

Where’s chris-wallace.com… only the best frickin’ website in the WORLD.

Nice list, I particularly enjoy FOWA.

Hector Jarquin

January 8th, 2009

Really great examples, its really impressive how the designers create a rich typographical experience, without compromising creativity. Great source of inspiration, Thank you Jacob.

Raymond Selda

January 8th, 2009

Great list! Typography combined with the right usage of graphics can really make a website work. Thank you for this.

johno

January 8th, 2009

Pleased to see Jason Santa Maria at the top. But why screen shots with ‘anti-aliasing’ turned off?

Jacob Gube

January 8th, 2009

@Chris W.: Thanks for the not-so-subtle promotion of your website! :)

@Hector Jarquin :I agree with you, I think that designing with typography makes it hard to stand out because you can only really do so much with typography compared to graphical elements (which is limited only by your imagination).

@johno: Anti-aliasing isn’t off,I had to resize the shots to fit the width of the page, so maybe that’s causing some of the pixelation. If you’ve got tips on how to improve screen shots, fire away kind sir.

insic

January 9th, 2009

as expected alistapart website always comes in the list in this type of article. good job as always

Henry

January 9th, 2009

Great examples here Jacob. This is my first time seeing Elysium Burns. It is quite nice.

Daus

January 9th, 2009

What Jon Tangerine site?

Daus

January 9th, 2009

I mean “what about”

Jordan

January 9th, 2009

I’m with Daus; this list needs an addendum to recognize Jon Tan: jontangerine.com

It’s got nice use of serif type without bashing you over the head with the “old-time fancy” feeling that some serif-heavy designs leave me with. Plus, he’s almost always got something interesting to say about web typography.

Another one I’m surprised didn’t make it on the list is Cameron Moll’s Authentic Boredom.

But overall, it’s a nice list. A lot of people I’ve never heard of, but I’m glad I have now :)

Matt

January 9th, 2009

There is something about the line spacing that really improves readability at A List Apart.

Farid Hadi

January 9th, 2009

Nice list Jacob. Thanks.

Richard Andersson

January 9th, 2009

Great list! Lots of those I already new but there was a few in there that I didn’t know yet. Thanx! Keep it up!

Mediumjones

January 9th, 2009

@Jacob Gube Bull honkey! Typography is limited to nothing!

Soh

January 9th, 2009

Awesome list, I have to study up on typography and pay attention to it more… great reminder!

max

January 9th, 2009

Just realized how important line spacing was for small fonts on the web ! thanks for that.

Angie Bowen

January 9th, 2009

I love sites designed around typography and there are some beautiful ones listed here. It’s not an easy thing to accomplish well.

Bob Galmarini

January 9th, 2009

Lots of goodies here. Many classics like ALA and I Love Typography, but it is good to see some new work on the list like Elysium Burns and Words are Pictures.

Patrick Algrim

January 9th, 2009

Don’t know if I agree with order of the list, but I definitely agree that all of these Web sites are great. Some of them are too decorated for me to say that they have good typography. To me, good typography Web sites are ones that focus on the type.

Good job of the list. Agree with Johno. Did you take these screen shots on a Windows machine maybe? :)

Evan

January 9th, 2009

Underwhelming.

Siong Chin

January 9th, 2009

I think too many designers tend to go too far adding textural and decorative elements into a composition, as seen in some of the sites in this list. Such designs, while striking, simply end up with the “look at me – I can do this and this and this” end result.

I like the understated look of McSweeney’s. The simplicity and elegance of the layout and typography makes it very striking yet very functional and usable.

Bill Hartzer

January 9th, 2009

Very cool stuff, I thought typography was just really for images and graphics. Did realize that you could do a lot with typography on websites as well.

Sander

January 9th, 2009

Great list, I haven’t seen some of them, like Elysium Burns in particular for its good old fashioned helvetica look. What is not on the list but I really enjoyed is the new webdesignerdepot website. Maby something for another round up of typographical websites. good luck.

johno

January 9th, 2009

@Jacob
Yes, before resizing, first convert to RGB (image adjustment in PS).
Anyway, thanks for the mention.

Chris Loft

January 9th, 2009

Thankyou, that was beautiful, inspiring and sadly missed.

Iuri Lammel

January 9th, 2009

“…you can convey a site’s focus on modernity or traditionalism simply by choosing to use serif or sans serif fonts, respectively”

I think it is exactly the opposite.

patembe

January 9th, 2009

I like the last one.
:D
cool

Mark

January 9th, 2009

these are not good examples. are you for real?

Tim

January 9th, 2009

Hey chris,
Your navigation’s not looking too good in FF3.1
http://vanishdesign.com/img/etc/cwallace.png

Marie Poulin

January 9th, 2009

Wicked list,
as for the “anti-aliasing”… well, thats just the result of taking screen caps from websites on a PC. (regardless of browser)
It’s very unfortunate what PC’s do to type on the web… even with “clear type” turned on. For that alone, I cringe when I have to view sites on PC’s, but alas, for web development reasons, I must. sigh.
Try taking these screen captures on a Mac and I think you’ll see what some of the others are noticing. I only mention it since this is a post about beautiful type…

Basheer

January 10th, 2009

One of my favorites that uses typography well without having a “unique” font so to speak and actually uses functional text is http://www.seedconference.com/seed.php

K-SU

January 10th, 2009

some of the featured sites arent that impressive at all,
lots of things wrong with the type, e.g. leading, attention to weights, unnecessary condensed faces.

louis

January 10th, 2009

Excellent collection and rating mate.i wonder how long does it takes?

James Wood

January 10th, 2009

http://darkmotion.com has been one of my favs for a while.

Oh and http://thebignoob.com

korona

January 10th, 2009

Please. cynosura is better than half the sites listed here (sans actual content, which seems to be semi-absent at the moment).

John Devon

January 10th, 2009

These sites are different point of view for design. The Internet sites become more connected with real life. Websites with character ;) so we will see what is next ;)

JT

January 10th, 2009

Tim,
I have FF3.1B2 on a Mac. All looks good here.

Chris W.

January 10th, 2009

@Tim, I think you caught me while I was trying to get my navigation to look ‘perfect’ in Safari 3 :) I removed the negative margin for a few minutes and you CAUGHT ME, lol. Thanks for letting me know though.

Steven Finch

January 10th, 2009

This is another great list.

k

January 10th, 2009

All of these except 3 and 10 are hideous.

madme

January 11th, 2009

Really great examples, its really impressive how the designers create a rich typographical experience, without compromising creativity. Great source of inspiration, Thank you Jacob…

Jacob Gube

January 11th, 2009

@Iuri Lammel: Nice catch, fixed. Not enough coffee in my system when I wrote this. :)

@Daus and @Jordan: Great suggestion with Jon Tan’s site jontangerine.com. An excellent example of minimalism.

@Patrick Algrim and @Marie Poulin:Guilty as charged: these screen shots were taken on a Windows PC + Firefox 3. IE7′s ClearType is actually better at smoothing fonts but I promised myself to use IE7 (and IE6) strictly for browser compatibility testing and debugging. :)

But on the other hand, it’s good to show how the designs would look like through a common browser/OS set-up, to showcase what many people will see when they visit a site.

@Siong Chin: Textures can be overdone sometimes. It also does depend on the context: who you’re targeting and what message you’re trying to convey.

@madme: And on top of that, to actually bolster the design’s creativity.

Ian D. Miller

January 12th, 2009

Am I the only one that gets chaffed when a website uses a combination of serif and sans serif typefaces? It bugs me to no end…some of the serif fonts here are mild/subtle but a couple just feel like they really clash with the primary typeface of the site (the sans serif typefaces).

Marie Poulin

January 13th, 2009

@Ian Miller I have to disagree with you here, I think most websites benefit (if used well of course) from a combination of both serif and sans serif, but of course, that’s personal preference!

Amanda

January 13th, 2009

great, thanks. line spacing really makes a difference in readability and aethetics.

chris bradshaw

January 16th, 2009

nice collection. I was getting worried that I wasn’t going to see “I Love Typography” on there. had to scroll a while. thanks.

Dave Nalle

January 19th, 2009

These are examples of attractive design, but in almost all of them the font choices are incredibly pedestrian. You’ve mistitled your article.

There are better, more creative fonts out there.

Dave
http://www.fontcraft.com

Erik

January 19th, 2009

All of these except 3 and 10 are hideous..

bananama

January 20th, 2009

Am I the only one that gets chaffed when a website uses a combination of serif and sans serif typefaces? It bugs me to no end…some of the serif fonts here are mild/subtle but a couple just feel like they really clash with the primary typeface of the site (the sans serif typefaces)..

CSD

February 2nd, 2009

A List Apart I think is the best example of perfect balance with type, spacing and images.

Sean Baker

March 8th, 2009

Thanks for including me on your list here, Jacob. I appreciate the honor of being mentioned with such an esteemed group of websites. Keep up the great work here on Six Revisions, my friend.

Jacob Gube

March 8th, 2009

@Sean Baker: Hey Sean, it was my pleasure – you’ve got a truly beautiful and unique site!

Emlyn

April 4th, 2009

Yes, some of these choices are gorgeous; others are puzzling.

vb

April 13th, 2009

Formulaic, the lot! Haven’t any of you budding designers learned a thing about restraint? How about less is more?

All of these pages focus on the “coolness” factor of typography, but don’t really address type as an element of design. Good design and typography have guidelines, including grid usage, balance and symmetry to name a few.

Type is a tool, a means to an end or uh, a beginning!

David Carson knew these rules, he destroyed them, but he understood and used them.

Crazy large fonts and ripped paper do not a good site design make.

Amanda

June 28th, 2009

Am I the only one that gets chaffed when a website uses a combination of serif and sans serif typefaces? It bugs me to no end…some of the serif fonts here are mild/subtle but a couple just feel like they really clash with the primary typeface of the site (the sans serif typefaces).

Adam

July 17th, 2009

Thanks for the pointers. I love typography.

Marcell

August 14th, 2009

Very inspirational! Typography may seem like an easy thing to cover but it can take a while to master

Ashely Adams

September 17th, 2009

‘What a Lovely Name’ was an awesome experience. i loved the simple pastel colors used to make such vibrant effect and also the entire website designing was impressive. thanks for this exhaustive list to explore!

neel

July 4th, 2010

Very inspirational! In my view typography is most important part. And if you have blog then it is more important as it will increase your visitors if you have great typography.

Smooth Booth

July 19th, 2010

Great examples of websites where the font compliments the design, I’ve just checked out your ‘Photoshop font techniques’ page too to get some tips to help me with my own site. Keep them coming :-)

Ram Djalli

July 30th, 2010

Nice list. Some beautiful sites there.

We were looking for a copywriter recently, and came across this guy – lovely simple site.

http://www.theworddepartment.co.uk

Craig

September 18th, 2010

Great collection of sites with well designed typography, typography is sometimes overlooked and not an easy thing to accomplish well. Great list!

Joel Walters

December 14th, 2010

Yeah, that is cool! My favourite website here is the vidget inspire design. I think the typography is used really well and creates a really nice look.

David H.

January 3rd, 2011

Is creativity variable depending on the platform you’re using? I have an eCommerce site and I need to choose between OScommerce and Magento… Is one better than the other when it comes to Typography?

Mike

July 29th, 2011

Marie Poulin
I don’t think it’s a PC thing with regard to anti-aliasing.

Jacob
You could try looking under your settings if you’re resizing your screenshots within photoshop. There’s options at the bottom of the Image Size dialogue box. By default it’s set to Bicubic (best for smooth gradients) – try changing those settings and see what results you get.

I know this is an old post, but I thought you might find it handy if you’re doing screenshots in the future.

Leave a Comment

Subscribe to the comments on this article.