Keep an eye on your inbox!
Hmm, that didn't work. Try again?

7 websites with inspiring typography

These 7 sites reveal the beauty and power of the written word.

Mat Vogels
November 2, 2015
Inspiration

Even with all the multimedia interactivity the web offers us, typography remains one of the most powerful tools in any web designer’s toolkit. 

Why? Because typography conveys the message you’re trying to get across—both literally, in that it acts as the medium of content, and metaphorically, in the ways it reflects your brand.

“Everything about it is calculated to reveal rather than to hide the beautiful thing which it was meant to contain”

–Beatrice Ward, "The Crystal Goblet, or, Printing Should be Invisible"

A picture may be worth a thousand words, but sometimes you want your visitor to remember just a single phrase—and a powerful message beautifully typeset is the best way to do this.

Done right, typography can be more effective than any image or graphic. These seven websites use type in creative ways that offer people a unique and easy to understand experience.

1. Huge

The Huge website's big, bold typography perfectly matches their brand.

This cutting-edge design and experience agency has built one hell of a bold brand: Bold typography. Bold colors. Bold images. Just a quick scroll through their homepage showcases the use of large, bold lettering to call out client names and important topics.

2. Paul Jarvis

Paul Jarvis' website uses type to focus people on his message—and on signing up.

Freelancing advocate Paul Jarvis boasts a stellar portfolio, several products and courses, and a podcast. If you’re thinking of entering the world of freelance, Paul will teach you what you need to know.

Where most designers’ portfolio sites are packed with graphics and photos of their work, Paul relies heavily on content throughout his site. Why? Perhaps he understands that text is the best method of delivering your message—so why clutter things up with images?

3. Ogilvy & Mather

Once you've picked a post to read from Ogilvy & Mather's homepage, you focus on a summary of the story.

The folks at legendary design agency Ogilvy & Mather understand that typography is key to sending a message—and it’s obvious within just a few seconds of visiting their site. On load, you’re greeted with Ogilvy’s signature (a strong design asset), followed by a wall of text showcasing their appearances in some of the planet’s most prestigious publications, as well as some of their own content.

Not something you see every day. Which lets you know right off the bat that Ogilvy will approach your creative challenge differently.

Note: Most of this text is delivered through images instead of HTML, which is poor for SEO and accessibility, and hence, not a best practice.

4. Thinking with Type

You'll want to tour every page of Thinking with Type. Just trust us.

Thinking with Type doubles as a typographically beautiful site and a rich resource for learning about typography. As a companion to Lupton’s wonderful textbook, the site serves to beautifully illustrate key points of the text, and offers the core of the book’s content absolutely free. (Though, if you love type, you’ll want the book too.) Plus, the site features a couple fun projects to help you exercise your typographic brain.

5. The Web Ahead

The Web Ahead: bold, beautiful type—and what could be your new favorite podcast.

This podcast website from web design advocate Jen Simmons focuses on new techniques and technologies for web creatives.

The site (created by Jen herself) features bold, yet elegant typography that grabs your attention, clearly sets your expectations for the site, and guides you through its rich content.

6. Butterick’s Practical Typography

Butterick's Practical Typography presents a free, web-based primer on typography.

Butterick’s Practical Typography offers up another exceptional typography resource for designers and web creators alike. Not only is the website design almost 100% text, but it’s also filled with content on importance of typography, different types of typography, and how to best use typography on the web.

7. More of the Same

Shane Hurt's portfolio employs a thoughtful and flexible typographic system that ranges from big, bold statements to quiet asides.

Designer Shane Hurt’s made-in-Webflow portfolio showcases his design projects with full-screen and thumbnail imagery coupled with brief descriptive passages. It’s a highly engaging way of presenting both the output and the design thinking behind that output. The concise text modules also help you do a lot of reading … without feeling like you waded through an essay.

What typographic websites inspire you?

Obviously, the web holds thousands more sites filled with beautiful type. So let us know what your favorites are on Twitter!

5. Zestful

Zestful helps companies book fun, unique, and local group activities available through their platform. You might expect a site like theirs to scream FUN! Well they don’t disappoint. Their upbeat vibe supports their mission to help teams socialize outside the office without the usual headache that comes with event planning.

6. Petal

Petal is a younger company, but they stand out because design pervades the focus and direction of their marketing. Even their product (a new, no-fees credit card) features a stunning and unique design. Their website follows suit — it’s a breath of fresh air — with beautiful colors, generous whitespace, and clear, concise copy.

‍Petal’s website supports their mission of providing easy credit access by making credit feel simple, approachable, and maybe a bit fun too.

7. BankMobile

BankMobile’s website makes banking look hip and modern, as hard as that might sound. With bold colors, clearly presented information and a consistent feel throughout the site, we especially appreciate the unique horizontal scrolling section they use to walk through the UI on their mobile app.

8. Bonsai

Freelancers are constantly on the lookout for new tools and products to make managing their business easier — Bonsai focuses on checking as many of those boxes as possible with tools that range from invoicing and payments to proposals and contracts. With so many features in their platform, their marketing site needs to effectively explain and differentiate how their products can help freelancers. A dedicated page for each one does just that.

‍Bonsai provides detailed product overviews with dedicated landing pages for all of their major features.

Bonsai gets bonus points for creating an impressive resource hub for freelancers. They share survey data about rates, best tools for freelancers, and the top places to find new work.

‍Bonus points for great, useful content for their freelance audience.

9. AltSchool

As an education partner, AltSchool has an important story and mission that underpins their work. Their website does a great job sharing their story with photography, copy, and a consistently communicated mission: to enable all children to reach their potential.

AltSchool uses photography and to bring their mission as educators to the fore.‍copy

Ready to build a business site of your own but not sure where to start? We’ve got you covered. Check out our full business site rebuild course on Webflow University.

Did we miss any standouts? Let us know in the comments!

Mat Vogels

Mat is a web creator and evangelist at Webflow. Follow me at @matvogels.

You might also like...

More

Join the conversation

Get free web design insights...

In your inbox, every other week. And unsubscribe in a click, if you want.

Keep an eye on your inbox!
Hmm, something went wrong. Try again?

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.