Typography is an essential tool for any web designer. For many sites, it’s the stimulus that takes the design from serviceable but bland to dynamic and intriguing. Just try imagining any of the examples that follow with a plain, one-size typeface, and you’ll see just how much the designs rely on having interesting type choices, layouts, and effects.
Now that web designers are finally able to use specialized typefaces and complex effects in their designs, it’s a good time to really take a look at how typography really works to elevate web designs.
Typography in web design can run the gamut from ultra-minimalist and barely styled to painstakingly hand lettered and rollover-laden. They can all be completely effective, as long as they fit the context and the goals of the site.
Web typography usually suffers in comparison to print; you can only use pale imitations of printing techniques like letterpress, embossing, and foils, and reading on screens is more difficult that reading on paper. But one of the few advantages of the web is the ability to add animation into the mix, and web designers have been maximizing their advantage with sophisticated uses such as this one. The images flickering behind the title type are what make this simple homepage work.
A similar concept that allows for more expansive imagery can be found in this beautiful site; the background slideshow is displayed in full color only through the type, but it can also be seen through a green filter on the rest of the page. Just this captivating interaction, combined with the graceful handlettered type, is all that’s needed for the site’s homepage.
Although type animations are on the frontline of web design trends, they’re certainly not always needed to liven up a page. Without animations, websites can support a much busier design without looking confusing or overwhelming. This site incorporates lots of different typefaces and layouts, along with some interesting rollover effects to keep things interesting.
Choosing the right combinations of typefaces is key with this style, so it’s often very helpful to look over websites that convey a tone similar to the one that you’re going for. (For example, this site is a great one if you’re attempting a Victorian broadside-inspired design.) Other great sources discuss type combinations in general.
Remember that typography is just as much about the arrangement of words and letterforms as it is about the combination of typefaces. This website is a great example of how an expressive arrangement makes another great substitution for illustrations and animations.
Hand-drawn type is a wonderful way to add some texture and dimensionality to the flatness of the screen. It combines the visual expressiveness of an illustration with the communicability of text, and for these reasons it’s seen quite a rise in popularity over the past few years. Customized letterforms like the ones used here also serve as a means of guiding the eye from one phrase to the next.
Hand lettering is of course an art form that takes some time to master. For tips and tricks on how to begin on the topic, check out this tutorial full of useful beginner information.
It’s tempting to fixate on the flashier effects that can be attained with web typography, but clean and discreet minimalism also has a special effect. This site’s typography is monochromatic and uses just a few fonts, but that consistency is what makes it so beguiling and harmonious; subtle variations in the layout of each post are all the site needs to keep things interesting.
This site uses even more white space and less color than the previous one, but it compensates for these points of interest by incorporating intriguingly off-kilter elements, like the hyphenated title type and the crisscrossing lines behind the body copy. They’re just unusual enough to catch attention, but not strange enough to lose their appeal on further inspection.
An important side note is that minimalist type calls for just as much (if not more) expertise as a more complicated design. A sophisticated use of finicky but important tools such as leading, kerning and tracking are what make this site look polished and sophisticated.
If your design goals call for a site design that with interesting, but not busy type, make sure that you incorporate a lot of contrast. This website is a study in the concept: ultra-modern and traditional, oversized and small, chunky serifs and delicate sans serifs, are all juxtaposed to make the most out of their differences.
All the previous examples have used at least a couple of font combinations to make their designs stand out. But for certain specialized applications, a repetitive use of the same typeface can also make a powerful statement. This site makes it work by virtue of a really interesting layout and rollover system; as it’s obviously meant to project an atmosphere of serenity, using a variety of typefaces would be too chaotic for this application.
Inspiration to Implementation
Each of these sites uses typography in a way that furthers their general design goals. For example, Black in History uses a powerful font style to evoke the momentousness of its topic, while the Inspire Conference uses flowing hand lettering as visual cue to the conference’s focus on creativity and originality. Make sure that your typographic decisions are informed by goals such as these, and you’ll be on the right path to using typography in just as inspirational a way as all of these examples have done.
About the author
Rob Toledo is working alongside Shutterstock and Bigstock stock creating guides to using stock footage and stock photography to increase user engagement and lower bounce rates. He can be reached on Twitter @stentontoledo.