Typography designers have long worked to craft beautiful letterforms. Their creative spirit evokes much into a letter’s shape, including emotion, personality, flexibility, legibility, and much more. While there are many beautiful fonts to choose from, how does a web designer choose the right typeface for a design or project?
Why Does Typography Matter?
Typography is what makes your webpage readable or not. The goal is to use typography that appeals to site visitors and offers them a clear message. The typography must work together with the message to increase engagement with the site. Site engagement means visitors remember the site, feel comfortable there, and will return in the future. In addition, a pleasant experience works to build credibility for the business, leading to additional revenue. And it starts with web design and typography.
Many businesses mistakenly use a decorative typeface that increases loading time, which can lead to higher bounce rates. Decorative typefaces may be beautiful, but they may not resonate with site users or create a better website experience.
Digital Typography Challenges
Print design has developed over centuries and is focused on making the print legible for readers. And once the type has been set, the printed page doesn’t morph or change. The printed word doesn’t care who is reading the material. No matter what, it stays in the same form for each and every reader. The format and the typeface are static because they appear in print, rather than in a digital format.
On the other hand, digital typography has to be more fluid. The challenge with digital typography is that it must change to meet the settings and screens of a wide range of devices. It’s impossible for digital fonts to remain static. Instead, digital text must meet these challenges:
Screen size: it’s almost impossible to design for all the many screens available today. However, responsive design tries to accommodate as many as possible by responding to the screen and device settings on each device.
Screen resolution: more screens today are high resolution; however, designers must also design for those using older tech.
Screen calibration: a screen’s brightness level determines how the colours of a design appear on the screen. Here, too, designers must also accommodate all types of screen settings (or as many as possible) when designing websites and content.
Choosing the Best Font for Reading on a Screen
Gone are the days when we only had a few fonts to choose from. Today, we have a broad range of typeface choices that have been specifically designed for our modern device screens.
You can find beautiful fonts that are designed for the web in places like Google Fonts, Adobe Typekit, and more. Each one offers many fonts to choose from, but which are the best for reading on the screen?
Typography Guidelines
Here are a few guidelines for choosing the right font for the typography on your website:
- Don’t use more than one or two typefaces on a webpage. Too much variation can cause discomfort, eye strain, and distraction for site readers. The same applies to too many fonts, colours, or font sizes.
- Specialised fonts may have a negative impact on a site’s load time and make it load too slowly. The result is frustrated site visitors who leave when a page takes too long to load.
- Never use all caps; it’s too distracting and comes across as aggressive and loud to site users.
- Not every browser or OS is able to render specialised fonts correctly or consistently for site visitors.
Once you have a deeper understanding of individual typography components, it’s easier to use this knowledge to design a flexible layout that works across many devices, even old tech.
Formatting for the Best Reading Experience
Along with choosing the right typeface, it’s also essential to make the right decisions about line length and height. These can have a major impact on digital design.
The best text size depends on the typeface used, along with factors such as x-height and counter openness that impact how legible the site is. Next, the text size determines the line height and length. There’s a great tool that can help test the ratios between these design elements; it’s called Grid Lover. Grid Lover is a tool that includes a slider that allows you to change the look of each measurement.
Next, choosing the background colour behind the text is also important when it comes to readability. The contrast between the colour of the text and the background can make the page easy or challenging to read. If you’re struggling to find the right colours, there’s Contrast Checker, which helps determine the best contrast ratio between colour combinations. With this tool, you’ll meet important accessibility standards.
Additional Guidelines to Design for Readability
Here are some rules to follow when designing for readability:
Choose clear, recognisable letterforms: choose fonts that the eye can easily distinguish between letters.
Letters need to be distinctive: avoid fonts with repetitive letter forms, such as “i” and “l” looking too much alike. Each letter must have a distinctive shape.
Open forms: letters should be more open such as “C” and “S” to make it easier to read.
Clear terminals: letters also need distinctive beginnings and endings to help the eye recognise each letter easily.
Format text for highest legibility: use of colour and size also contribute to making the reading experience better or worse for the reader.
Body text size: type size depends on the distance from the reader’s eyes to the screen. It’s imperative to test a design on all screen types to make sure the reading experience is comfortable and legible. (For instance, use a font size 12-16pt on mobile phone screens, 15-19pt on tablets, and 16-20pt on laptop and computer screens).
Line length: the number of letters on a line can also make the page cause eye strain and fatigue. So, it’s essential to keep line length to between 45-75 characters per line.
Always Test
Guides are helpful when designing a web page or site; however, with so many variations to consider, it can be difficult to successfully create a design that automatically looks great. For this reason, it’s imperative to always test typography screens and display settings across a wide range of devices. Remember to include those for older tech, too.
If your design passes the extreme settings needed for older tech, it will be successful for more modern devices, too.
Summing It Up
Following the tips in this article can help you choose the right typeface style that’s best for your digital designs. The goal is to ensure the typeface and other aspects of the design create a legible, comfortable reading experience for site visitors.
The result of choosing the right typeface is users who have a wonderful experience and come back again!
