Inspiring web typography

Check out some truly inspiring examples of web type at work in Webflow websites built by the community.

John Moore Williams
May 27, 2016
Inspiration

We’ve said it before, and we’ll say it again (promise): web design is 99% typography. 

After all, if content is king, then the way you present that content becomes incredibly important. And when you do it right, you ensure that all that great content you publish isn’t just semantically powerful—it’s visually powerful too.

With that in mind, here’s a little showcase of websites #MadeInWebflow that set their type—and content—in just the right light.

Note: where possible, I’ve linked the typefaces used on these sites to their Google Fonts pages (which you can use on any Webflow plan). When that isn’t possible, I’ve linked to Typekit (available on Pro and higher). And when neither was possible, to MyFonts or the foundry site.  

Kele Dobrinski’s portfolio

Typefaces: Voga and Brandon Grotesque

Refined, classy, but ultra-modern, Kele’s portfolio website combines the high-contrast, Bodoni-esque Voga with the super-modern sans, Brandon Grotesque to great effect.

It all begins with the site’s hero section, where the elegant Voga appears set in friendly lowercase letters, with Brandon set in all-caps to play a sort of metadata role.

Hero section of Kele Dobrinski's portfolio website
Kele Drobinski's site offers a bold but friendly hello.

Further down the page, Voga goes all-caps in bold page titles, with Brandon still all-capped below, followed by a thick, stylish rule. The elegant typefaces and ample whitespace reinforce the high-fashion feel of the photos beautifully.

The typeface combo matches the fashion photography quite nicely.

Individual portfolio entries retain the big bold Voga and understanded Brandon, but here Brandon takes on another role to serve as large-set, pale grey body copy. The grey is a touch light, but that really makes the links pop, so may have been intentional.

Portfolio item page headlines and subheads
The stylish Voga and quirky Brandon Grotesque make for an unexpected but pleasant combo.

Kele rounds out the site with a touching photo that still makes beautiful use of type, with a humble “Hi.” practically popping with friendly energy.  

Love this combination of type and imagery!

Gaffa Creative Precinct

Typefaces used: Lato and Libre Baskerville

Gaffa Creative Precinct brings a unique Australian art space to the web in stunning form with ample whitespace, minimal body copy set in Libre Baskerville, and the popular Lato playing a variety of metadata and UI roles.

The combination of Lato and Libre Baskerville creates a modern yet classy feel.

Despite Lato’s familiarity to anyone who works in tech—it is, after all, Slack’s brand font—the font retains an impressive flexibility and feeling of newness, especially when used in all caps (as on Gaffa) or in its beautiful italics. Looking at exhibition pages like “Albesence,” it’s easy to feel like Lato must be used for museum signage worldwide.

Gaffa's exhbition intros
‍A block of large text set in Libre Baskerville introduces each exhibition.

The switch to Libre Baskerville (one of many revamps of a classic face) adds a touch of respectability and classicism to the site, reminding us of the intellectual work art does.

Look, ma! Justified text on the web!

Fully justified text rarely works on the web, but Jimmy Makes Things, the agency behind the Gaffa site, pulls it off with well-balanced columns and careful attention to font size.

I don’t envy anyone trying to build a website for an art gallery. The art world’s always balancing on the narrow line between avant-garde progressiveness and upper-class refinement, and it can’t be easy to express that on the web. Thankfully, Gaffa does it in spades.

Wider CMS template

Typefaces: Raleway, Abril Fatface, Merriweather

Pablo RamosWider ranks among the most popular of our premium CMS templates, and it’s not hard to see why. The starkly filtered photos, dramatic headlines, and splashes of bright color against an otherwise monochromatic background make for a nearly hypnotic website.

The hero section of Webflow's Wider CMS template
Big, fat Abril, slender Raleway, and a duotone background. Who could want more?

And much of the credit has to go to the typographic choices here. With large headlines set in the bold, high-contrast Abril Fatface; metadata/UI labels in the lithe Raleway; and body copy in the easy-to-read yet stylish Merriweather, the template just screams: this was made by and for creative types!

Indeed, Wider. You are a template for creative people.

The template also shakes things up a bit by occasionally switching to the sans-serif Raleway for body copy. It’s a nice way to add interest.

Raleway in body copy on Wider CMS website template
Raleway makes an occasional appearance in body copy, just to keep things fresh.

One thing to note: it can be tricky to pair two different faces of the same type (i.e., two sans or two serifs), and you could argue that Abril and Merriweather together is a bit risky. 

Architect template

Typefaces: Raleway, Open Sans

Nicolas Kayser’s stylish and flexible Architect pairs gorgeous photos of massive modern buildings with the quirky, thin-limbed Raleway, bringing in the similar but more neutral Open Sans for longer content.

The Architect Webflow template uses Raleway for headlines
That's one flexible FL ligature!

Because Raleway’s so slender, it’s perfect for headlines and other large-set typographic elements like teasers, as seen below in the Projects cards.

Project teasers also use Raleway

For body copy, the template switches to the incredibly popular Open Sans, whose professional-yet-friendly feel works perfectly for the site’s overall aesthetic. Though, were I to use this template, I'd definitely bump the text size up a notch or two.

For body copy, the template switches to the less fussy Open Sans

Google Webfont Combinations by Timothy Noah

Typefaces: various

If you ever find yourself stuck in your search for a fine font combination to drive your site’s content, you could do much worse than Timothy Noah’s Google Webfont Combinations website.

Inspired by several other popular sites, Noah’s work offers a fine showcase of what you can do with typography in Webflow using nothing but Google Fonts.

Timothy Noah's built a great resource for all of us in this site.

The site does a particularly brilliant job pairing modern serif and sans-serif faces, and adds a few ideas for typographic details like subheadings and rules. It’s a handy tool for any web designer, regardless of skill level, but will be particularly useful for those just starting out.

Open Sans and Merriweather combination
Open Sans and Merriweather make a classy combo.
Bitter and Source Sans Pro font combination
Print's not dead. It just sucks now.
‍I know it's been called a Frankenfont, but I just love Roboto's thinner weights.

Riaz Farooq’s portfolio

Typefaces: Montserrat, Maisonneue

Built by Webflow Community Expert Arthur JamesRiaz Farooq’s portfolio is extremely light on text, but still does some interesting work with type.

It all starts off with Farooq’s personal logo, consisting of a square of stylized letterforms set over various images of his work, and the man himself.

The hero section of Riaz Farooq's portfolio
Hey, there, Riaz.

Contact info appears in a nav bar that starts out at the bottom of your screen, but sticks to the top as you scroll down …

And encounter some massive, and often delicately set, letterforms that serve as teasers for Farooq’s portfolio items. Each large-set letter gives you a tiny window into what lies behind, which then reveals itself a little more on hover, then even more on click. It’s a delightfully creative interaction model.

Large letterforms serve as creative teasers for Riaz's portfolio pieces.

A history of Silicon Valley

Typefaces: RalewayOswald

When you’re knee-deep in the second wave of the tech revolution spearheaded by Silicon Valley (like I am), it can be easy to forget that this revolution is just the current expression of an unfolding history.

Raleway really gets friendly in heavier weights.

João Paulo Teixeira’s interactive timeline digs back into that history with a beautiful, editorial-inspired design that uses Raleway to great effect. Whereas Architect stresses the limber delicacy of Raleway’s lighter weights, this site uses the friendlier, more playful bold to add some real personality.

Massive numbers set in Oswald define the decade and specific year.

Texeira also puts the big, bold Oswald to great use in large-set and brightly colored numbers that contrast perfectly with the vivid backgrounds for each decade.

‍Oh, hey, Johnny Five. Nice to see you’re still alive!

Justin Schueler’s portfolio

Typefaces: Proxima Nova, Livory

In an age when everybody’s wondering if web design has died for want of creativity, it’s so refreshing to discover something a little different. Like Justin Schueler’s gorgeous, simple, type-driven portfolio.

Beautiful type atop a gorgeous photo. What else do you need in a website?

You’re probably used to seeing Proxima Nova’s friendly letters in Smashing Magazine’s body copy, but it gains a whole new feel when set all-caps, as in Justin’s various headings. Even the headings function a little differently here, not so much screaming out of the page as subtly structuring it.

So much info in so little space.

The site leans most heavily on the beautiful Livory, a serif font from HVD, makers of Brandon Grotesque. When we’re so used to seeing portfolios full of gigantic, gorgeous imagery, it’s really refreshing to see a serif used to straightforwardly capture a designer’s expertise and experience.

Composite Co. agency website

Typefaces: Akkurat Pro, Apercu Mono

Speaking of minimal portfolios—meet Composite Co. a web design agency that makes extensive use of Webflow in their client work.

This two-man team (Christian Dutilh and Jacob Weinzettel) clearly understands the power of simple, straightforward copy set with ample whitespace. Somehow, the combo makes phrases you’ve heard before, in one form or another—like “We design things that captivate and enagage real people”—suddenly feel meaningful again.

The right words with the right whitespace suddenly seem to mean so much more.

Like Jusin, Composite Co. also captures their skills and expertise in a simple text list, this time set in Apercu Mono. Very cool to see a font type usually relegated to coding and attempts to fake typewritten manuscripts playing such an important role on a site.

Yet another beautifully minimal skills list!

Speaking of refreshing: I love the outdented headlines on the individual project pages!

Outdented headlines save vertical space and depart from the familiar.

Jonathan Patterson’s portfolio

Typefaces: Quebec Serial, Source Sans Pro

There are all kinds of things to love about Jonathan Patterson’s standout portfolio, but today I’m going to fanboy a bit over the huge headlines you find on all the non-portfolio pages of his site.

Set in what looks like the Heavy or Black weight of Quebec Serial, underlined with a delicate rule, and full of Jonathan’s distinct voice, I can’t get enough of these headlines.

Tons of imagination, 0 make-believe. Sounds nutritious.

Especially when you add the various objects (toy soldiers, popcorn, Scrabble-style letter tiles) you can actually move around the page with your cursor. It’s a small, essentially meaningless interaction, but it adds a ton of delight.

Some solid pastimes.

I also love Jonathan’s use of Adobe’s first open-source typeface family, Source Sans Pro. It’s an elegant sans filled with character, and pairs very well with the not-often-seen Quebec. And when you see two sans serifs so effectively paired, you know you’re looking at the work of a talented designer.

Magic.

What inspiration do you want next?

We’re looking to make this kind of post a regular thing on the Webflow Blog, so if you’d like to be inspired by something in particular, let us know in the comments below!

John Moore Williams

Head of Content Strategy at Webflow. Nice to meet ya. Follow me @JohnAMWill.

You might also like...

More

Join the conversation

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.