Web designer Jeffrey Zeldman once said, "90 percent of design is typography. And the other 90 percent is whitespace." In any design project, digital or traditional, every design element chosen reflects the brand. Like color and images have meaning for your brand, typography is equally as powerful. In web design, good typography can significantly affect how visitors experience the site and feel about your brand.
Need convincing? Consider your initial reaction to a webpage featuring large paragraphs of small, tight Comic Sans font with no bullets or subheaders. Now contrast that with your response to a website using large, correctly spaced Verdana font separated by bullets and subheaders. Big difference, right?
This post discusses why typography is critical to website design and offers some best practices your web designers should use. But first, let's begin with an overview of the basics.
What is Typography?
In general, typography is the art of arranging and styling copy or text in any design project, traditional or digital. Web typography is specifically about how text looks on a webpage, including the font, color, spacing, size, and style. The results will determine how the text looks to the viewer and how easy it is to read. Let’s define a few relevant typography terms next.
Relevant Terms to Know
Typeface: Also known as a font family, a typeface is a design of letters, numbers, and other symbols intended for printing or electronic display. It includes variations in size, weight, slope, width, and other features. There are thousands of typefaces. Times New Roman, Arial, Helvetica, Garamond, Georgia, and Futura are all typefaces.
Font: A font is a singular version of a typeface. Every font has a specific weight, size, and other styles like italicized or light. Some examples of fonts include Arial Black and Calibri Light.
Serif: Fonts with a small ornamental line off the main lines of a letter are serif fonts. These fonts have a more classic, elegant, or formal look. Times New Roman, Georgia, and Garamond are serif fonts.
Sans Serif: Fonts without ornamental lines coming off the letters are sans serif fonts. Examples include Arial, Verdana, and Calibri. These fonts are considered more modern and offer a casual, friendly, and approachable look.
Script: These are fonts designed to look like handwriting. The infamous Comic Sans is a script font as is Brush Script. Script fonts are more challenging to read than other fonts, especially on a screen.
Kerning: This is the process of adjusting the spacing between individual letters or characters to make copy readable and visually pleasing.
Tracking: Tracking refers to the overall spacing between characters in a line or block of text, as opposed to kerning, which adjusts the spacing between individual characters.
Leading: Also known as line spacing, this term refers to the space between each line of text. Increasing the amount of leading can improve the legibility of text and make it easier to read, particularly for longer blocks of text. In contrast, decreasing the leading can fit more text onto a page or create a more compact, dense layout.
Now that we've outlined some of the basics of typography, let's discuss why typography is so critical to good web design.
Typography is Important to Web Design Because:
Typography provides hierarchy. The order of text from most prominent to least prominent makes up a page's visual hierarchy. Different font sizes, weights, or styles like headers, break a web page into sections and help visitors find important content.
Typography improves navigation. One of the most common reasons visitors leave a site is the frustration of not finding what they need. Good typography helps users find what they are looking for more quickly by creating a sense of rhythm and flow. This creates a better user experience for the visitor.
Typography provides branding consistency. Like your logo, the typography on your website reflects your brand. So, using brand fonts on your website is necessary for a consistent brand image. It should give viewers the same experience they would have if they walked into your store or received your catalog in the mail.
Typography captures attention. An attractive and exciting typeface will draw visitors to your website and encourage them to keep reading. Interesting fonts, spacing, and great content can entice users into spending more time on your website and consuming more information about your brand.
Typography creates visual appeal. Using fonts that complement each other and are brand-right, typography can make your website attractive and exciting.
Typography enhances readability: The right typography can make the content on a website easy to read and understand, especially on a mobile screen.
Typography provides accessibility: Having a website everyone can read is critical. Good typography helps to improve the accessibility of your website for users with visual impairments by providing legible text and sufficient contrast between text and background.
Now that you understand how important typography is to web design let's review some best practices every designer should use. Please note that when building a brand or revamping an existing brand, these best practices should also drive your decisions on brand fonts and colors so that every brand touchpoint (logo, printed materials, bricks and mortar locations, and your website) is consistent.
Some best practices for typography in web design are:
Use legible fonts: Fonts that are easy to read on different sized screens is essential. Using sans-serif fonts like Arial or Helvetica for online body text is best. Also, use at least 12-16 point font size for mobile screens and 16-20 point for desktop screens.
Limit the number of fonts: Using too many fonts on a web page can make it look messy and unorganized, not to mention unprofessional. Stick to no more than three fonts on a page.
Create a visual hierarchy: Use font size, weight, and style to create a visual hierarchy. For example, headlines should be more prominent and bolder than body text. Use subheaders and bullets to break up text even more.
Keep line length short: Long lines of text are difficult to read. Keep text blocks to about 45-75 characters per line.
Increase line spacing: Line spacing or leading should be set to at least 120% of the font size to enhance readability.
Avoid all caps: Using all capital letters in a block of content is difficult to read and should be avoided.
Use color strategically: Use color to highlight important information and create contrast. Keep your colors within your brand template. Choose color combinations that are readable for readers with limited vision.
Be consistent: Using consistent typography throughout the website helps users understand the navigation better and consume the content easier.
We hope you can see how essential typography is to impactful web design. Good typography enhances user experience, reinforces brand messaging, and contributes to the success of a website. In addition, typography enhances your brand by creating a consistent and professional image that improves brand recognition and nurtures a sense of trust and credibility with the audience. Choosing the right fonts, colors, sizes, and other typographic elements creates a distinct visual identity that differentiates your company from competitors. The typography used on your website can significantly impact the visitor's perception of your brand. It's essential to use typography strategically to create a lasting impression.
Phase 3 creates digital solutions that can connect your brand with the right consumers and drive real engagement. A best practice-based web design company, Phase 3 believes in a strategic approach to website design, ensuring that the assets we create are closely aligned with your organization’s business goals and your brand. If you’d like to hear more about Phase 3’s process in building a brand identity and integrating it into touchpoints like your website, contact us today.