9 Essential Typography Rules For Great Web Design

 In Blog, Design

Today the internet is jam packed full of websites that use crazy graphics, 4K video, and a whole manner of other features to stand out, and yet the number one most important part about a website is still the text, and typography is what determines if that text is easy to comprehend or not.

Everything on the internet is about the transfer of information. It’s where we go when we want to learn what the tallest animal on Earth is, or how one of those desk drinking bird things work, and a majority of those answers are found in text form. Below you will find 9 key rules you need to remember when creating text content online to make sure that the information you want to present is easy to read and interpret.

Start with the body font

apsos-media-typography-web-design

The body of the text may not have the biggest or boldest font but it is what contains a majority of the information, which is why it’s the most important part of any piece of text. As such, it’s where we want to start when creating a typography plan. Once you have selected the best font for the body text pick the sub headers, and then the headers while making sure that they compliment the font of the body text.

Serif vs San Serif

apsos-media-typography-rules-web-design-serif-sans-serif

credit: http://portfolios.trincoll.edu/

A serif is the little line on top of, or on the bottom of a letter. Many times it can be referred to as the foot, or hat, of a letter. A “serif” font is a font that features these lines in the letters, a “sans serif” font is one that does not have these lines. When considering readability, especially with large amounts of text like in a body paragraph, it is best to use a sans serif font. This makes scanning the text much easier on the eyes.

A serif font however is great for adding more emphasis, which makes these great fonts for things like headers, titles, or quotes.

Establish A Clear Typographic Hierarchy

apsos-media-typography-hierarchy

Credit: YerdHerd.com

When putting together the content of your text it’s important to establish a clear hierarchy between the text body, sub headers, and headers. These should all have their own typography and it should remain the same throughout the text. It’s even better if that hierarchy is carried not only in that particular text, but through all the text on your website.

By creating a proper hierarchy through the use of size and weight of the text you can tell people where to start when first encountering your text. Using headers and sub headers throughout your text that follow the same hierarchy can also help break up your text and make it seem far less intimidating.

Don’t Use Too Many Different Fonts

apsos-media-typography-fonts

This is a very important one. Many people get a little crazy and use multiple fonts without ever considering what it does to the readability of your content. A general rule of thumb is to use no more than two different fonts. Even when using two different fonts it’s still very important to make sure that those fonts pair well together. Take care to look at the width of the letters and if they complement each other or not. While people study typography specifically to learn how to pair fonts together, for the rest of it’s best to go with your gut. If you think two fonts don’t go well together, then they probably don’t.

Use Fonts With Easily Distinguished Letters

apsos-media-typography-easily-distinguished-letters

Have you ever looked at a word and wondered “Is that an “i” or an “l”?” Well if you have then you know just how annoying this can be and how easily it can stop you in your tracks while reading. That’s why it’s very important to make sure that before you pick a font you test it out to see if this will be a problem. Try writing out a word like “illusion” or “darn” to see how the “i”s and “l”s, and the “r”s and “n”s will interact next to each other. Then, repeat the exercise with capital letters to make sure none of the lowercase letters look like the capital letters.

Stick With Left Aligned Text

apsos-media-typography-left-aligned-centered

In the pursuit of a clean and symmetric look some people will choose to center align text. While this is technically ok for headers, you should not be doing so for body text. Center aligning text makes the reader have to search for the beginning of the line which will quickly tire out and distract readers of your content.

Another popular option is to justify the text. That creates a clean beginning line and a clean ending line, but sacrifices normal spacing within the text. This option makes the text look very clean but can also make it difficult for the reader. As a general rule of thumb just stick with using a left aligned text and you will do great!

Mind Your Leading

typography-leading-apsos-media

In typography the white space between two lines of text is called leading or the line height. In simple terms if you increase the leading you create more white space between lines of text. Having text with the right amount of leading will make your text easy to read, too little or too much leading can make it more difficult for a person to follow your writing from line to line. Generally speaking you want your leading to be about 30% more than than the character height.

Use The Right Colors

typography-font-color-web-design

Have you ever landed on a website where the background was white and the text was a light gray? Did you have an easy time reading that text? I am going to guess not.

That is why when choosing the color of your text make sure to take the background in mind. Choose a color that will stand out against the background and make it easy for anyone to read.

Don’t Use All Caps

typography-all-caps-apsos-media

You may be able to get away with using all capital letters in the title of a post, or maybe even the header, but leave it at that. When you use all capital letters you interfere in the eye’s natural ability to take in a word as a whole, not as singular letters. Think of it this way, when text is written using lower case letters your eye and brain take in the the whole word at once. When you use all capital letters you force your brain to take in each letter individually and then put together the word that those letters are spelling out. That’s why road sign are always written with lowercase font, because you are more easily able to take in the information when passing with speed.

So take a lesson from road signs. Do not use all caps in the body of your text and your reader will thank you for it.

Hopefully this post has helped you see that typography is not just something that designers nerd over, but an important part of being able to clearly communicate through text. Keep these typography rules in mind when putting together your website’s design and you will be on your way to making a great site.

Recommended Posts
Contact Us

Curious about Apsos Services? Reach out below and tell us what you need.

Start typing and press Enter to search

apsos-media-failed-startup-lessons