Effective communication is a fundamental aspect of design, establishing a crucial connection between your website and users, facilitating goal achievement. In the realm of web design, communication primarily involves text, where typography becomes a pivotal element. The choice of fonts, their sizes, and spacing significantly impact user experience. 

Optimal typography ensures clear and engaging communication, ultimately enhancing the effectiveness of your website in delivering information and facilitating user interaction. Prioritizing thoughtful typography is essential for creating a seamless and user-friendly web design that resonates effectively with your audience.

More than 95% percent of information on the web is in the form of written language.‍

Good typography makes the act of reading effortless, while poor typography turns users off. As Oliver Reichenstein states in his article “Web Design is 95% Typography”:

Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance.

In other words: optimizing your typography also optimizes your user interface. In this article, I will provide a set of rules that help you improve readability and legibility of your text content.

10 Tips for Web Typography and Best Web Typefaces for Website Design

1. Keep The Number of Fonts Used At a Minimum

Using more than 3 different fonts makes a website look unstructured and unprofessional. Keep in mind that too many type sizes and styles at once can also wreck any layout.

In order to prevent situation like this one try to limit the number of font families to a minimum

To enhance your website's design and improve user experience, it's advisable to minimize the variety of font families, ideally sticking to two (one can often suffice). Consistency is key, so maintain the same fonts throughout the entire website. If multiple fonts are necessary, ensure they complement each other based on their character width. For instance, the combination of Georgia and Verdana demonstrates a harmonious pairing on the left, sharing similar values. Conversely, the pairing of Baskerville and Impact on the right showcases a less balanced combination, as the heavy weight of Impact overshadows Baskerville. Striking the right balance in font choices contributes to a visually appealing and cohesive design.

Ensure the font families complement each other based on their character width

2. Try To Use Standard Fonts

Utilizing font embedding services, such as Google Web Fonts or Typekit, offers a plethora of unique and captivating font options to breathe new life into your designs. However, there's a potential drawback to this approach. While interesting fonts can add freshness, they may also pose a significant challenge – distracting users from the actual content. Users might find themselves engrossed in contemplating the choice of fonts rather than focusing on reading the text. 

Unless a custom font is imperative for your website, perhaps for branding or to create a truly immersive experience, it's generally advisable to adhere to system fonts. Remember, effective typography should seamlessly guide the reader to the content, rather than drawing undue attention to the type itself.

3. Limit Line Length

Having the right amount of characters on each line is key to the readability of your text. It shouldn’t be your design that dictates the width of your text, it should also be a matter of legibility. Consider this advice on readability and line length from the Baymard Institute:

“You should have around 60 characters per line if you want a good reading experience. Having the right amount of characters on each line is key to the readability of your text.”

If a line is too short, the eye will have to travel back too often, breaking the reader’s rhythm. If a line of text is too long, the user’s eye will have a hard time focusing on the text. Image credit: Material Design

For mobile devices, you should go for 30–40 characters per line . Below is an example of two sites viewed on a mobile device. The first one uses 50–75 characters per line (optimum number of characters per line for print and desktop), while the second one uses the optimal 30–40 characters.

In web design you can achieve an optimal number of characters per line by restricting the width of your text blocks using em or pixels.

4. Choose a Typeface That Works Well In Various Sizes

Visitors will access your website from a variety of devices, each with different screen sizes and resolutions. Given the diverse text elements in most user interfaces, such as button copy, field labels, and section headers, it's crucial to select a typeface that performs effectively across various sizes and weights. This ensures consistent readability and usability across the spectrum of sizes, accommodating the needs of users on different devices and enhancing their overall experience.

Make sure that the typeface you choose is legible on smaller screens! Try to avoid fonts that use cursive script, such as Vivaldi (in the example below): although they are beautiful, they are difficult to read.

Vivaldi typeface will be difficult to read on the small screen

5. Use Fonts With Distinguishable Letters

Many typefaces make it too easy to confuse similar letterforms, specifically with “i”s and “L”s (as seen in the image below). So when choosing your type, be sure to check your type out in different contexts to make sure it won’t cause an issue for your users.

6. Avoid All Caps

All caps text — meaning text with all the letters cap­i­tal­ized — is fine in contexts that don’t involve reading (such as acronyms or logos), but when your message involves reading, don’t force your users to read all caps text. As mentioned by Miles Tinker, in his work, Legibility of Print, all-capital print greatly retards the speed of scanning and reading in comparison with lower-case type.

7. Don’t Minimize Spacing Between Lines

In typography, the space between two lines of text is called leading or line height. When you increase leading, you add more vertical space between lines, making the text easier to read, but it takes up more space on the screen. A good rule is to keep the leading about 30% more than the height of the characters for better readability.

Properly using white space between paragraphs has been proven to increase comprehension up to 20%, as pointed out by Dmitry Fadeyev. The skill of using white space lies in providing your users with a digestible amount of content, then stripping away extraneous details.

8. Make Sure You Have Sufficient Color Contrast

Don’t use the same or similar colors for text and background. The more visible the text, the faster users are able to scan and read it. The W3C recommends the following contrast ratios for body text and image text:

• Small text should have a contrast ratio of at least 4.5:1 against its background.
• Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

These lines of text do not meet the color contrast ratio recommendations and are difficult to read against their background colors.

These lines of text meet the color contrast ratio recommendations and are easy to read against their background colors.

Once you’ve made your color choice, it’s absolutely necessary to test it out with real users on most devices. If any of the tests show a problem with reading your copy, then you can be sure that your users will have exactly the same problem.

9. Avoid Coloring Text In Red or Green

Color blindness is a common condition, especially amongst men (8% of men are colour blind), it’s recommended to use other cues in addition to color to distinguish important information. Also avoid using red and green colors alone to convey information because red and green color blindness is the most common form of color blindness.

10. Avoid Using Blinking Text

Content that flashes or flickers can trigger seizures in susceptible individuals. Not only can it cause seizures, but it’s likely to be annoying or distracting for users in general.

Avoid blinking text!

Looking to enhance your website's design? Check out our UI/UX & Graphics Design Services to create stunning and user-friendly interfaces.

Take away from Zignuts‍

Good typography in website design offers numerous benefits. It improves readability, ensuring easy comprehension and reducing user fatigue. Establishing a visual hierarchy enhances content organization and emphasizes key messages, contributing to a positive user experience. Thoughtful typography also strengthens brand identity, creating a consistent visual language. Additionally, it aids accessibility, making the content more inclusive. In summary, prioritizing good typography is crucial for effective web design, impacting user engagement, brand perception, and overall success.