Typographic Design: Font Styles and Resources for Designers
From the hardened typesets born of molten metal hundreds of years ago, to the phototype of the 1950s, to today, where computers offer unlimited creativity in designing typography, font design has evolved with technology. Let’s take a look at some current font design trends, discuss some fantastic fonts you can use, and check out tools and resources to help your own typographic pursuits. 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…
Like to keep reading?
This article first appeared on webflow.com. If you'd like to keep reading, follow the white rabbit.