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!

What else should I consider?

While speed, reliability, scalability, and security should be your chief concerns, Webflow offers a host (pun sheepishly intended) of other features that have a significant impact on SEO and performance, and may not be offered by most hosting services.

HTTP/2

2015 saw the release of the first new Hypertext Transfer Protocol since 1999: HTTP/2.

This new standard promises faster websites across the web — but not all hosting platforms support it yet. Because Google has always cared about page speed, there’s a good chance that HTTP/2 will become a component of their ranking algorithm soon.

Here are some benefits of HTTP/2 support/compatibility:

  • Multiplexing: Your browser can receive requests over multiple connections, not just one. Think of it like switching from a one-lane road to an interstate.
  • Header compression: Your browser loads the top of your pages first, before the rest of the page, which means your site visitors see content faster. On mobile especially, this is a big improvement.

Webflow’s hosting has been HTTP/2 compliant for a couple years now, unlike services out there. (And even hosts who do offer it typically only do so on higher-tier packages.)

Today, all assets published to a Webflow site are served via HTTP/2 — increasing page load performance when a large number of assets need to be downloaded.

Other powerful features of Webflow hosting

Everything above is more or less essential, but there are many other features that can make managing your website a lot easier and more convenient. These include:

  • Automatic backups and version control (you can also save and name a site version whenever you’d like with the key combo Command + Shift + S on Mac or Control + Shift + S on Windows)
  • Site-wide and per-page password protection
  • Simple publishing workflows
  • Responsive images
  • Protection against distributed denial of service (DDoS) attacks

On top of these features, Webflow hosting includes:

  • Form submissions (manage lead gen and let us store your data for you). It’s like Wufoo, but built into Webflow!
  • SEO and social tools: manage OpenGraph and SEO meta tags in one convenient interface. Easily combine it with the CMS to automate your metadata optimization.
  • Dynamic embeds: integrate Webflow CMS with Shopify for ecommerce, SoundCloud for music, Eventbrite for events, and anything else that uses custom code embeds.

Webflow combines all these elements in a first-class global hosting infrastructure that’s available at the click of a button. This means that when you publish with Webflow, your site’s files and assets are published across the globe and immediately ready for any amount of traffic, from any location.

Want to know how much we believe in Webflow hosting?

We put a lot of thought and effort into making Webflow hosting one the the best hosting services out there. We’ve seen Webflow-using businesses like Kisi grow their organic traffic by over 300%, while also supporting thousands of requests per second for businesses like Eventbrite.

In fact, when Eventbrite launched their Amstel Live festival page with Webflow, they received over 10,000 requests a second — resulting in over 3,000,000 page views in just one hour. Webflow hosting was able to handle it without a hitch.

But above all, we believe in our hosting platform so much so that we use it for our own websites, which see hundreds of thousands of visitors from around the globe every day, and have seen nearly perfect performance over the last year.

Mat Vogels

I'm a web creator and Webflow evangelist. Follow me @matvogels.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.