Excellent website graphic design is made up of more than just creative imagery and thoughtful color selection; it also consists of the right typography choices. In fact, typography selections and treatments for text, headers and more will most determine how your website is perceived. The wrong selections or combinations will make your business website seem amateurish, when you are hoping to come across as a trustworthy company.
Just choosing a great font won’t help you. There are more considerations, such as size, weight, leading and tracking. So how do you steer clear of common amateur designer typography mistakes on your business website? You can begin by following these tips to use type to transform your web design from clumsy to sleekly professional:
1. Give Type Breathing Room
The main goal of typography is to improve readability. In order to make your website copy more readable and easier on the eyes, learn to use whitespace, padding and leading to your advantage.
While whitespace is often considered to be ‘nothing’ — insofar as it refers to the unmarked portions of your page — it is what actually allows your design elements to exist harmoniously. Leave enough space to allow each part of your design and copy enough breathing room and to rest the eye. Just be careful not to leave too much space, as it can result in your website looking incomplete and abandoned.
Padding is a part of whitespace, referring specifically to the empty space around the edges of a block of text or copy. Crowding your text makes it difficult to read and amateurish.
The amount of space between lines of text in a paragraph is called leading. A good amount of leading makes it easier for the reader to move from line to line. The more your design facilitates them doing so, the more they will read. A good rule of thumb for leading is to multiply your font size by 1.5. So, if we are using 11 pt font, the leading would be 16.5. (11 x 1.5 = 16.5)
2. Watch Your Tracking
Keep an eye on how the default tracking (space between letters) affects your fonts readability. Professional graphic designers know that some letters just run amok when place too close next to each other and that can throw off your design. Like in the word ‘kerning’. If the ‘r’ and the ‘n’ are too close together, they will look like an ‘m’. If you have any instances like this on your web page, you know that the tracking needs to be adjusted.
Speaking of kerning: It’s easy to confuse kerning with tracking. The deference is that kerning is applied to two specific letters, while tracking refers to the space between all letters.
3. Be Selective with Font Choices
Were you wondering when we were going to get to actual fonts? There are a lot of truly gorgeous fonts out there that look wonderful together. BUT unless you are an experienced designer who knows how to mix and match these perfectly, stick to only two or three choices. Otherwise you’ll end up with a hot mess that looks like a grade schooler designed your website. A good rule of thumb for beginners is to pick on serif font and one sans serif font.
4. Hierarchy Should Flow Sensibly
The easiest way to denote hierarchy, or importance, of text is to make it bigger or smaller. Obviously the larger the text, the more important it is. However, the size differences still need to be appealing to the eye and look well done. As a guideline, try to keep headings only 2 to 3 times as big as your text body. For example, for an 11 pt text paragraph, a 22 to 33 pt heading would look best.
Do you need help with the typography or design of your website? Contact Elaton to see how we can help!
Photo credit: adictio/Flickr