7 Tips for High Quality Typography

When I first began my journey as a web designer I didn’t put much thought into the text I was putting into my designs, I was far more concerned about colors and images. As time went on I started to become more and more aware of how the use of quality typography can influence a design. Websites exist primarily to provide users with information and a good portion of that information is in the form of text, so why not give it a little bit of design love? Sure, most site users aren’t going to think about how much effort you’ve put into the typography, but they WILL notice if it’s easy to read.

Typography can be hard to grasp however; with the knowledge of a few key terms you can create designs that look great and are easy to read! Here are 7 tips for high quality typography that I’ve used to take my designs to the next level.

#1 – Know Your Measure:

In typography, the measure is the length of your line of text on the page you’re entering it on, similar to margins. A good measure for a single column of text is between 40 and 50 characters long, including spaces. A measure of 45-75 characters works well if there are multiple columns of text, with 66 characters being the ideal length. For this exact reason newspapers and magazines often use multiple columns of text instead of one large block.

The benefits of understanding your measure are twofold, firstly your page layout becomes much more appealing to the eye. When you look at a page that’s too narrow or too wide your first instinct is to almost always leave and find something that just looks better. The second benefit is readability, having correct measure simply makes it easier for other people to read your content without losing their place.

#2 – Understand Baseline and Leading:

Knowing how to correctly compose your text on your page is one of the biggest pieces of having content that’s beautiful and easy to read. Two of the most important terms to understand are baseline and leading. Your baseline is the bottom that all your text sits on, for example; when you underline text you’re just making the baseline visible. The leading (or line-height) is the space between two baselines. Understanding how these two components work together compose your page is crucial to beautiful design.

The standard leading for a font is usually sufficient, however there are some cases where you may want to adjust the spacing between baselines. For columns of text that are wider, you will want to increase the leading. If the leading is too small for a column of text, users will have a hard time transitioning from one line to the next while reading. A good rule for body copy is to make sure that the leading is at least 1.5 times the size of the font.

Look at the image below, which paragraph is more comfortable for you to read?

The paragraph to the right uses a leading that is 1.5 times the font size. The letters don’t feel as crammed together and you can easily transition to the next line making it much easier to read than the paragraph on the left.

#3 – Tracking and Kerning:

Tracking and kerning are quite similar. Tracking is defined as the distance between characters in a whole block of text. Kerning, on the other hand, is the distance between two specific characters. They’re both simply different ways to look at the space between each letter in your text and changing them can have a big effect! If the tracking is set for a paragraph, you may still need to adjust the kerning for a few letters to compose them properly.

Looser tracking will look best for a wider column of text, increasing the tracking can also add visual emphasis on words in a design. The kerning may also need to be adjusted for certain groups of letters in order to give them the appearance of equal spacing between all characters. II, AV, and YA are a few examples of these groups of letters.

#4 – Avoid Orphans and Widows when Possible:

Orphans are the one or two words that are at the end of a paragraph that create the appearance of excessive amounts of white space between paragraphs. A widow is a line of text from one paragraph that is hanging out in another column of text. Each of these common mistakes can make your text look disjoined and disrupt the reader’s eyes as they move through a paragraph.

#5 – Understand Your Colors:

The color of your text is probably one of the most impactful pieces of your composition. Using black text on a white background and vice versa, despite their common usage, can be too hard on the reader’s eyes. Try instead using a dark grey text instead of black on a white background, or very light gray text on a black background. Also, try making your text thinner for a darker background, you’ll be pleasantly surprised to find it slightly easier to read!

#6 – Choose the Correct Font:

One question that comes up frequently is what type of font, serif or sans serif, should you use for your body of text. For print it is thought that serif fonts like “Times New Roman” are easier to read because the letters are more distinctive and recognizable. For web, it turns out that sans serif fonts like “Arial” are actually better to use, this is because some serif fonts do not render well on certain browsers and causes the text to look distorted.

At Keystone Click, we prefer to use one of the core web fonts for body copy (Arial, Helvetica, Times, Trebuchet and Tahoma to name a few…) since most users will already have these fonts installed on their devices. This not only helps to decrease the load time of your website, but it also prevents the design from appearing distorted if the user doesn’t have the ability to view that specific font.

#7 – Break it up!

One of the most common mistakes in writing is creating big paragraphs that are difficult to consume. Try to break it up by putting emphasis on certain terms by making them bold or italic or cutting them down into smaller paragraphs. Use a block quote to highlight a certain phrase and break up that block of text. Another great method is to show hierarchy by varying the font, weight, or color for titles and headings will also add that visual interest you need.

Next time you are working on a design try and follow these 7 tips for high-quality typography and I guarantee you will notice your designs begin to look much cleaner and more professional. If you need any more tips we’re always happy to help you out, be sure to contact us!