Typographic design: font styles and resources for designers | Webflow Blog (2024)

Choosing a font design when you need to say it BIG

Whether it's a hero title taking up an entire screen or a call to action of gigantic proportions, it’s important to use typography that looks good at larger sizes.

This design for okalpha uses Neue Haas Grotesk on their landing page — a strong font with just enough stylization to keep it interesting. If you want your design to pack the punch of large type, use something straightforward like sans serif fonts free from too much ornamentation. You can get fancy on your title page, but oversized, busy fonts can be fatiguing to read.

Okalpha used a smaller size and lighter weight of Neue Haas Grotesk for their body copy, giving the design some contrast. This is a great lesson in restraint. You don’t have to jam your designs with a mishmash of fonts — a few style changes make it possible to use the same font throughout. And of course there’s nothing wrong with using multiple fonts, but sometimes simplicity is the perfect choice.

Don’t forget: Webflow makes it easy to add Google Fonts, Adobe Fonts, and even fonts you’ve designed to our library. Check this video tutorial to see how easy it is.

Combining images into font design

Huge typography makes a big statement, but it can also fill the screen with too much of a single color. Filling gigantic letters with an image breaks up the monotony and ties lettering to other design visuals.

Arte fills oversized letters with flowers from their background image, sharpening their soft focus. It's a simple trick that makes the hero title stand out even more. Arte combines simple typography with cursive typefaces (which we’ll be talking about next).

Adding a flourish of handwriting

Cowlick Appeal, an San Diego-based design agency, uses this cursive font design only once for their hero title, making it really ... ahem ... stand out. (I’ll see myself out.)

Thanks to sappy greeting cards, wedding invitations, and cursive typefaces included with 1990s word processors, handwritten fonts can conjure an eye roll. But they don’t have to be cheesy. Many cursive fonts are tastefully rendered, with whorls and swirls that add a bit of style and a dash of personalization. Again, use them sparingly, as they can be taxing to read when overdone.

For a nice selection of script fonts and other useful typefaces — all free — check out Font Squirrel.

Using futuristic font faces

Why is it that fonts going for a high-tech feel can appear very dated, very quickly? Oh the irony. Computer/tech typefaces don’t all look like they’re from an 80’s video game.

Holonautic uses the typeface Hyperion for their hero and headline text. This sci-fi inspired font conveys a futuristic feel that fits well with the design’s other visual elements. This typeface provides a nice contrast to the body copy in Exo (a font that comes with the Webflow font library.) You can see how these different fonts are used together throughout the site's design in Webflow.

Some designers are using more extreme techy fonts. Artist and designer Joshua Ashford uses the typeface Moderan in his portfolio (pictured below). This choice pairs well with his website’s electronic-inspired graphics. It’s also interesting to note how both Holonautic and Ashford’s site use a luminescent blue and black palette to create the feeling of being inside a computer.

The League of Moveable Type is an open-source directory of free fonts. Orbitron is just one of the high-quality fonts if you’re after something with a retro-futuristic feel.

Using functional fonts that never go out of style

Betty Crocker is a long-standing American institution. The site uses Museo Slab, particularly in their headers, giving their design a timeless quality that’s perfect for their branding.

Futura is another classic font used by many web designers. First introduced in 1925, it’s simple, stylized, and highly readable.

Futura is one of a few fonts Neiman Marcus uses for their site. In the image below, we see Futura used for the title, button, and body copy on their Johnny Was collection.

Using font designs inspired by the past

Classic fonts have endured through both print and digital, but modern fonts also give a nod to typography of the past. Used on over 37,000 websites, Space Mono is heavily influenced by 1960’s typography.

Chiu Pak Ki’s online portfolio, Candychiu, uses a classic color combination and an animated ring of text made of the Space Mono font for a captivating design.

Work Sans is another font design rooted in grotesque-styled fonts, with a legibility that makes it a sensible choice. Verily (formerly Google Life Sciences) uses Work Sans throughout their website.

While some may argue that it’s not directly informed by any of the traditional fonts, Alegreya (originally intended for literature) brings to mind the familiarity of printed copy. It’s also a super family, meaning it has multiple formats, including sans-serif fonts. You can find Alegreya on both Google Fonts and Adobe Fonts.

Alegreya feels both familiar and new at the same time.

Saying it plain and simple

IMDb uses Verdana extensively throughout their movie database. Here we see it in the headers for each block of content, in the descriptions, as well as for the text of movie titles in the navigation.

For big blocks of content and sections where all you need is a straightforward font, there are many practical fonts to choose from. Arial, Verdana, and Georgia are plain typefaces can be used almost anywhere — all included in the Webflow font library.

What could be more utilitarian than a font designed with government applications in mind? Public Sans is the typographic equivalent of saying, “Just the facts, ma’am.”

Another great option for a no-nonsense font is Roboto, found on Google fonts or Adobe fonts. Roboto is another flexible font design. Roboto could be the clean typeface your next project needs:

Pairing fonts

We’ve looked at a few different typography trends popping up more and more. But with so many cool fonts to choose from, it would be great to be able to see different combinations in the wild. Ta-da! Here are a few resources to do just that:

Fonts in use

Fonts in use is an excellent user-submitted resource of fonts found on a variety of media. You can search by a specific font — below are the results for Clarendon. Each project lists the fonts used so you can see actual examples for different combinations.

Font combinations for web designers

Font combinations for web designers is handy and easy to use. Just choose a font from the list and voilà — an auto-generated mockup of font pairings you maybe hadn’t heard of or considered. This site is a super helpful tool to get out of your go-to-fonts rut.

FontReach

It’s not a bad idea to keep tabs on the most widely used fonts — you can either embrace their mass acceptance or steer clear for more unique designs. FontReach lists the most popular fonts and the websites that use them. It’s also another tool to get ideas for different font combinations.

Designing your own font

Why use someone else’s typography when you can create your own? Maybe you have a new take on a classic font. Or an idea for an entirely new font family. Or, maybe you want every letter in your design to have your creative touch. Whatever your reason, designing a font can be a fun, creative challenge. Here are a few tools to build your own:

Fontself Maker

Fontself Maker is a handy extension you can use in Illustrator and Photoshop CC. And best of all, you end up with OpenType fonts that you can use in Webflow — regardless of your skill level. Fontself Maker allows you to create typography you can use in a variety of applications to do things like send texts in a font you created.

Glyphs

Glyphs is a font-design app for Mac. It has some nice features, like the ability to digitize pen or pencil sketches, a sophisticated yet easy-to-use vector system, layering, and OpenType functionality. They also include plenty of tutorials to help you create your own typesets.

FontLab 6

FontLab 6 has the flexibility to create the most simple or sophisticated fonts. It gives designers control of so many variables and generates OpenType that can be used for a variety of different languages. FontLab 6 was “crafted for type designers and font geeks.” And if you’re not a typography nerd before using their app — you’ll certainly become one.

Smart font choices + great content = excellent web design

The fonts you apply to your own work are as important as the layout and usability. As deep as it’s possible to go with the minutiae of font designs, it’s important to never lose sight of the ultimate goal — finding a typeface that makes your content readable and complements the rest of the design’s visual elements.

Do you have any fantastic fonts or other apps we missed? Tell us about your favorites in the comments below.