The Ultimate Guide to Website Typography
Perhaps the most underrated aspect of web design is typography.
Typography plays a critical role in your website because it ensures we are able to read and process all text-based content on the page.
This in turn will keep us interested for longer periods of time if it’s well designed with an appealing aesthetic value that draws attention from afar without being too distracting when reading up close.
This article will tell you everything you need to know about best practices for website typography.
Why Typography is Important
One of the main ways to engage your visitors is through written text.
In fact, more than 95% of information on the web is in the form of written language- therefore it’s important to get it right!
Good typography makes it easy for your audience to read and follow along.
However, poor typography can lead users to immediately bounce off your website.
Quality typography is therefore critical to your website and can help with your Google ranking as good typography helps with readability, accessibility, usability, and overall graphic balance while optimizing SEO.
Some of the other perks of typography include…
- Helps your company build connections and improves brand reputation
- Helps hold user's attention to your website
- Can help influence the decision-making of users
- Is a key component of the user interface
- Establishes a visual hierarchy and harmony for your website
Typeface and Fonts
A typeface is a specific look and feel applied to a set of alphabetic and numeric characters.
Common typefaces include Times New Roman, Arial, Helvetica, Courier, and Calibri.
But aren’t those fonts? Not exactly.
A font is a particular instance of a typeface. Every font within a typeface has a specific weight (i.e., bolder or lighter), size (e.g., 16 px vs. 24 px), and may have other special stylizations applied (e.g., italicized or non-italicized, rounded or unrounded).
For example, the fonts “Calibri Light (12pt),” “Calibri Regular (16pt),” and “Calibri Bold (20pt)” are three fonts in the “Calibri” typeface:
Serif and Sans-Serif Fonts
Many fonts conform to two font styles: serif and sans-serif.
A serif is a small ornamental projection off the main stroke of a letter. Fonts with this styling are called serif fonts. “Sans” is French for “without,” and fonts without these ornaments are labeled as sans serif fonts:
Best Practices for Website Typography
Focus on Readability
One of the most important things about your text on your website is that it needs to be easy to read.
The Triadic relationship is one of the best things to look at when thinking about your website’s text.
This relationship refers to the harmony between your website’s font sizes, line length, and interline spacing.
When you adjust any of these three key factors it will either help or hinder your website ranking due to readability.
Here is a deeper dive into these three factors…
Spacing
If your spacing is too close some text may appear to merge or the eye will keep trying to read the same line over again.
However, if your website’s text spacing is too far apart then the ideas may seem disjointed and could lead to your readers missing key points.
Therefore, balance is important when thinking about text spacing, as a guide, 1.5 text spacing is a good suggestion for body text, while between paragraphs and headings 2.5 or more is a good recommendation.
Line Length
One of the most important aspects of typography is line length.
Lines that are too long can be difficult to read, while lines that are too short can leave the reader feeling disconnected from the text.
The ideal line length for body text is between 40 and 60 characters.
By paying attention to line length, you can ensure your site’s text is easy to read, helping visitors to stay engaged with the content.
Size
Another important aspect of typography is character size.
After all, if your readers can’t easily read the text on your site, they’re likely to click away in frustration.
But how do you know what character size is best for your website?
There are a few factors to consider, such as the age of your target audience and the average screen size for your visitors.
In general, though, a character size of 16px-20px is a good starting point.
From there, you can experiment with different sizes to see what works best for your particular site.
Additional items to consider
Text Color
Similar to the color scheme of your house, some colors work and others just don’t.
Make sure the color scheme of the text on your website works.
Keep in mind that some people who visit your site might be color blind.
Avoid red and green text as this is the most common type of color blindness.
Color Contrast
Avoid using similar colors or shades for text color and background as otherwise, it will be difficult to read.
This is important because the more visible your text is the faster users will be able to scan and read it.
Avoid All Caps
A common misconception is that you need to use ALL CAPS to emphasize a point.
However, this is not a good practice.
All caps text is difficult to read and our minds take longer to absorb it.
This is because all caps text slows the speed of scanning and reading in comparison with lower case text.
Typography is a simple yet important part of your website.
If done well, typography can really make your website stand out from the crowd, however, if your typography is difficult to read or follow this will seriously harm the user experience.
For more design tips and best practices for your website, reach out to SALVé today.
