Menu

20 Websites with Beautiful Typography

Advertisement

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

This was published on Jan 8, 2009

65 Comments

Chris W. Jan 08 2009

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

Nice list, I particularly enjoy FOWA.

Hector Jarquin Jan 08 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 Jan 08 2009

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

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

Jacob Gube Jan 08 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.

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

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

What Jon Tangerine site?

I mean “what about”

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 :)

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

Farid Hadi Jan 09 2009

Nice list Jacob. Thanks.

Richard Andersson Jan 09 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 Jan 09 2009

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

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

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

Angie Bowen Jan 09 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 Jan 09 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 Jan 09 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? :)

Underwhelming.

Siong Chin Jan 09 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 Jan 09 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.

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.

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

Chris Loft Jan 09 2009

Thankyou, that was beautiful, inspiring and sadly missed.

Iuri Lammel Jan 09 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 Jan 09 2009

I like the last one.
:D
cool

these are not good examples. are you for real?

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

Marie Poulin Jan 09 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 Jan 10 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

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.

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

James Wood Jan 10 2009

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

Oh and http://thebignoob.com

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

John Devon Jan 10 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 ;)

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

Chris W. Jan 10 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 Jan 10 2009

This is another great list.

All of these except 3 and 10 are hideous.

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 Jan 11 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 Jan 12 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 Jan 13 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!

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

chris bradshaw Jan 16 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 Jan 19 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

All of these except 3 and 10 are hideous..

bananama Jan 20 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)..

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

Sean Baker Mar 08 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 Mar 08 2009

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

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

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.

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).

Thanks for the pointers. I love typography.

Marcell Aug 14 2009

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

Ashely Adams Sep 17 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!

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 Jul 19 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 Jul 30 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

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

Joel Walters Dec 14 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. Jan 03 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?

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.

This comment section is closed. Please contact us if you have important new information about this post.

Advertisements
Partners