Choosing the right typeface is an integral part of the web design process and good choices can be powerful tools that help a website fulfill its purpose. Typefaces influence the legibility of a message, clarify the hierarchy of information and aid in the establishment of brand identity. They can also make your web design look better to improve users’ experiences on your site.
It can be difficult, however, to navigate the endless possibilities. Should you choose a funky, standout typeface like Bodoni or a stylish, more professional and modern choice like Futura? There are no specific rules that will lead you to the correct typeface, but there are considerations that can be applied to ensure you select one that fits well with your design and supports your goals for the page in question.
(Bodoni Poster Italic)
(Futura Medium and Futura Bold)
Typefaces represent the voice of an atmosphere.
Typefaces are what make the first impression. That’s why type is one of the first things Compulse designers plot out when creating a new site. When a user interacts with your design or page, typefaces set the mood and help determine how your work is interpreted. They also create a connection between what you do, who you are and how others respond to you. Remember, there is no one rule for matching typefaces to mood; a lot of it is intuitive so use your best judgment and keep in mind the characteristics you want to covey through your choice. One of Compulse’s web designers, Cory Anotado, weighs in on the importance of typefaces stating that, “the message your website conveys should be interpreted as clearly as possible. A thoughtful, well-chosen typeface is critical for your website.”
Is your brand fun and quirky? Uncomplicated and straightforward? The look of your typeface should match that mood.
Readability is one of the more important aspects of website usability.
It is important for the typefaces that you choose to attract viewers and retain their attention, and a reader won’t pay attention long if they can’t actually read the words on your website. The design and the typefaces you select should be readable, clear and appealing. There are many factors that play into the readability of typefaces, including:
- Hierarchy: This helps the user determine where to start reading the content and differentiates headers from body text. It also helps make the page or design easier to scan.
- Number of typefaces used: Keep the number of typefaces to a minimum. A good rule of thumb is to not use more than three typefaces across the entire website. Beyond the fact that users can get overwhelmed if presented with too many typefaces, loading too many typefaces on a website can be problematic on slower connections, negatively impacting user experience.
- Size: In terms of letter size, websites have a different sensibility than print. Slightly larger text than default sizes improve readability on a variety of user devices, like tablets and mobile devices. Our designers tend to set the body text at 16px, but it mainly depends on the design. On web, if the text is rendered at a size 10px or smaller, it’s considered unreadable, even on high-DPI displays.
- Pairings: It is rare for a single typeface to be used in isolation. Consider how different typefaces work together, how they’re similar or different, and find a smooth combination to establish contrast while creating visual cohesion.
- Line height: Sufficient line height makes the text in a web design easier to read. It’s generally a good rule of thumb to use a line height that is roughly 25% bigger than the text.
- Letter spacing: Like line height, sufficient space between letters affects whether the text is readable.
- Line length: In web typography, line length should be a proper distance across the page, allowing the reader to read easily and naturally. Lines that are extremely short across or go all the way to the very edge of the page are more taxing on the reader.
Choosing unique typefaces that fit your brand.
Choosing a unique typeface is really about discovering who you are and what differentiates you from the competition, then trying to capture it visually. Are you a news company? Do you cater to younger children? The typefaces used for these businesses should be vastly different from each other. Cory Anotado goes on to example that “typefaces are the uniforms that your message is dressed in. If your business is more formal than casual, using a more casual-feeling font like House Industries’ Sign Painter or—and never use this ever ever—Comic Sans can come off as amateurish and unprofessional.” When users see your brand and logo, they should immediately understand who you serve and the personality with which you approach that audience. With so many options to choose from, you need to make sure that what your typeface says about you is the message you want to convey.
(Sign Painter House Script and Sign Painter Slant)
While any amateur can take a stab at selecting a typeface, professional designers have the expertise needed to fully represent the voice of an atmosphere, optimize for readability and find a unique style that differentiates a brand from its competition. Ready to learn more? Get details about Compulse’s web services here or contact the specialists here: https://compulse.com/contact/
A few of Cory’s favorite fonts can be found below: