Typography is often referred to as the backbone of design. And, as we continue to evolve into a mobile-first world, typography is becoming increasingly important to our communication efforts.
Ten years ago, designers were focused solely on choosing typography for websites and digital marketing that looked good and functioned well on desktop technology. Today, they also need the fonts they select to be compatible with an increasing variety of screen sizes — including desktop computers, tablets, and mobile phones.
For the most part, typography is used to convey a message, so first and foremost, it needs to be readable — but it should also leave the appropriate visual impression. A number of variables are considered when choosing typefaces for websites.
Personality
Different fonts appeal to different personalities, so knowing your audience is important. For example: A major university has a completely different audience than, say, a local coffee shop, and their typography should reflect that.
Today, there appears to be an increasingly larger variety of fonts available for use in web design. But beware: not all fonts are resident on all devices. There is a group of fonts that is available (resident) on all devices and, although this selection is not huge, designers who choose from these for the majority of the copy on a website can feel confident that the fonts on the site will viewed in the way it was intended — and will display quickly.
Some businesses choose to develop their own typefaces. But proceed with caution here. Custom fonts were all the rage in 2016 and that trend doesn’t seem to be going away, but you can’t assume that every font will download and display the way you want it to across all devices. Custom fonts are often better suited for print and other material where you won’t have to worry about compatibility issues — or run the risk of your unique typeface becoming accessible for use by others. And, although its not best practice to use typographic elements as graphics on a website, doing so in small but important areas of the site could help provide that truly unique look you’re going for.
Additional special fonts can be used for main headlines and featured type and these can be included to download with a website, though it may slow down the initial loading speed of your site. A good web designer will also specify alternate fonts to substitute just in case the selected font is not available.
Contrast
Type that stands out will give your site design a big boost. Typography that is too thin in weight may be difficult to read, especially for those with visual disabilities. Consider increasing the size or weight of a typeface to counter this. There should also be a high level of contrast between your background color and text. It’s especially crucial that your typeface be easy on the eyes when viewing it on a smart device. (Because, well, nobody wants to read red text on a pink background.)
Serif vs. Sans Serif
If serif typefaces are considered classic and traditional, then sans serif typefaces are today’s work horses. Where serif typefaces are distinctly styled and often formal, sans serif typefaces are modern, sometimes unconventional, and can vary in shape.
Although there is no direct evidence that proves sans serif fonts are easier to read on mobile devices, they have traditionally been the preferred typeface for web and mobile. In the “old days,” the majority of computer monitors had lower resolution screens where serif fonts did not display as well. And viewing a website on a phone or other mobile device? That option didn’t even exist yet!
But, with today’s high resolution screens, serif typefaces can be as successful as sans serif fonts — on both desktop and mobile devices. Whichever typeface you choose to use, make sure it represents your brand — and gives a good impression across all platforms.
Responsiveness
The typefaces you choose need to be readable in a variety of sizes and on a variety of platforms. For best outcomes, today’s designers need to consider not just the type of devices that their audience may be using — but how they are interacting with those devices.
When people are operating handheld devices, they are holding them closer to their face, so readability is key here. If your typography isn’t visually appealing on a mobile device, your design isn’t working and you risk losing visitors.
Does your main typography have the same visual appeal across all platforms?
With many older websites, smartphones and tablets can only display a partial version of the full desktop experience; but the majority of new websites are designed to be mobile responsive — making the site and the typography adjust to fit the display size and resolution of a wide variety of devices.
If you’re finding this a bit overwhelming, our creative team is an award-winning bunch with years of experience making typography work in just about all media. And, if you’re wondering if your website design is doing everything it can to help your business, consider meeting with our creative director to review your materials and messaging.
Topics: creative