Your Guide to Website Typography Featured.jpg

Your Guide to Website Typography

Believe it or not, website typography is an important part of a great design.

Don’t get me wrong, there are a lot of aspects of web design that play a huge role in how your DIY website will look and function, from the images you choose to the number of elements you use and how they’re laid out on each page. But, typography — which includes font size, font style, line spacing, etc. — is one of the most overlooked aspects of web design.

The truth is that the typography of your website makes a huge difference in how it looks and how it connects with your visitors. Typography is about legibility and emotion; it’s about personality, professionalism and practicality. There are lots of things to consider when it comes to typography.

The more you know about web typography, the more effectively you’ll be able to implement it on your own website. I hope that this quick guide will help!

Common typography challenges

As I said, there are many things you’ll want to consider when making decisions about the typography of your website. There’s also a lot on the line with typography, and there are many challenges to overcome. Here are a few of them:

  • Screen size - The optimal typeface will depend on the size of the screen it’s being viewed on, and since your visitors will be viewing your website on a variety of screen sizes, it’s essential that you utilize a responsive design. You should also ensure that you’re formatting text appropriately and keeping paragraphs short — a few sentences at the most.
  • Screen brightness - The brightness of the screen will affect how the colors look, which is why it’s important to choose colors that will work with all brightness settings.
  • Screen resolution - The denser the pixels, the more legible your text will appear on the screen, and while most people have access to high-resolution screens right in their pocket, designers should keep the older tech that’s still being used by some in mind when considering typography.

5 tips to help you get web typography right

#1. Choose a font style that’s legible in any size

It would be great if everyone viewing your website could always be on a desktop computer, but that’s not the reality of the situation. In fact, most people will probably be viewing it on a smartphone. That means that you need to choose a font style that will be legible and easy to read regardless of the size of the screen it’s being viewed on.

Cursive font styles are a great example of styles that may look great and are readable in a bigger size, but can be difficult to make out in a smaller size.

#2. Be mindful of line length

The length of your lines, which is the number of characters on each line, can make or break the readability of your text. Line length is important, and it shouldn’t be dictated by the design of your website alone, as its role in legibility can’t be overstated.

In order to provide your visitors with the best experience from a readability standpoint on a desktop computer, you want to limit your line length to approximately 50 to 75 characters. On a mobile device, you want to aim for approximately 30 to 40 characters per line.

An easy way to maintain the optimal line length when designing your website is to use pixels to restrict the width of your text blocks.

#3. Limit the font styles you choose

Different font styles can be used to express different things, and they can be used effectively in different parts of your website. For instance, you may choose one font style for your banners that communicates the personality of your brand, but you may want to choose a more professional font style for your blog and the main content of each page.

Although you can use different font styles to great effect on your website, you shouldn’t go overboard with the number of font styles you choose. The general rule of thumb is that you should use no more than three font styles on your website

If you use more than three font styles, it can make your site feel less cohesive. Remember that typography is not only an important part of the design of your site, but it’s also an important part of your branding. That means that you need some consistency in font style.

#4. Make sure letters are distinguishable in the font style you choose

Depending on the font style you choose, some letters appear similar — even identical — to one another. “I”s and” L”s are one example of a letter that can look the same depending on the font style you use. And, when combined, “r” and “n” can look exactly like an “m,” especially if there’s also poor line spacing.

When considering font styles, think about how easy it is to distinguish between different letters by typing out many different words and letter combinations in the font. This will help to ensure that your visitors have no readability issues.

#5. Get the line spacing right

The amount of space between each line of text is referred to as line height or leading. Increasing the line height can drastically impact the readability of your text. The general rule when it comes to line-height is that it should be about 30% more than the height of the characters.

With the proper use of line-height, you can improve the comprehension of your content by up to 20%. It ensures that you’re providing your visitors with an amount of content that’s digestible and readable.

There’s a lot to consider when it comes to website typography, and I hope that this guide will be a resource to you when designing your DIY website with the Websites 360® website builder. If you’d like professional guidance or support on any aspect of designing your site, our design experts are standing by and ready to help.

Originally published on 2/25/20