Doing Typography the Wrong Way: Common Mistakes To Avoid

Typography Mistake

Typography may not seem the stuff of rocket science, but don’t be fooled by its seeming simplicity. Typography is as much of a science as it is an art.

What is Typography?

Typography is the style, arrangement and appearance of text on print or digital goods. And it holds a whole lot of power over the aesthetics and communication prowess of your website.

 

For those of you that think typography is boring and inconsequential, let me tell you - there's more than meets the eye! You can follow typography trends, collect typography design boards, and influence others with a simple change of font. 

Surely your website should be about the content. not how it looks right?

But if you consider how typography can drastically affect the messaging, you realize how important appearance can be.

Think of typography as different nuances of speech; to soothe someone you speak to them in a quieter tone. In typography, the equivalent to this quieter tone is a lightweight font or smaller typeface.

The power of typography is best explained in John Maeda's TED Talk, where he shows a number of ways in which alternate typography for the same content can send different messages to the reader.

Typography contributes to your websites first impression, so here are some things to avoid to ensure you make a great first impression with users:

Typography Mistakes to Avoid: Formatting

1. Leading

Leading is the space between two lines of text. The name originates from the strips of lead that secured each row of lettering on typewriters, but nowadays it is more commonly known as line-spacing.

The mistakes with leading occur when there is not enough space between two lines of text, or too much. Not enough space makes the copy seem clumped together and causes the reader to lose their place while reading it. Too much space forces the readers eye to jump down the page at a pace that is uncomfortable.

A nice amount of leading has been calculated to be 140% of the font size. For example for a 20pt font size should have 26-28pt spacing.

2. Tracking and Kerning

Tracking is the space between each letter within a word. The higher the tracking value, the larger the space between letters.

Similarly, kerning is the space between two specific letters in particular.

If the tracking is too large or small, the copy become illegible. Your best bet is to use the pre-set value as they have been specifically calculated for readability/

This is where kerning comes into play. Some letters naturally have too much space around them and others not enough, so you can use kerning to ensure even spacing throughout your text.

An example of these letters is the W which often encroaches on the letter A’s space due to their complimentary angles. 

In some cases, smaller tracking is advantageous. When used in headings, it makes the text seem heavier and more dominant.

3. Line Lengths

It's possible to set character limits per line, and this is something that every designer should be doing.

A long-line length can make it difficult for a reader to maintain concentration, forcing them to re-read the previous line or skip over it entirely. 

Luckily, the optimal line length has already been calculated. Between 50-75 characters long is deemed comfortable to read. Both newspapers and magazines abide by this rule and they have the experience to know what works and what doesn’t.

4. Centering Text

The centered formatting option is the Raggedy Ann of formats. As a rule, never center text unless there is an obvious reason to. The symmetry on either side of the text can be distracting and the uneven edge messy. Avoid it if you can.

5. Contrast

Contrast is simply the difference in the colour or the tone of the text and the background that it’s set on.

It may be tempting to create the text in a lighter or darker version of the background colour and this can look extremely slick, however, it is also possible to get this wrong. Too much contrast is jarring, and too little is hard to see.

An easy way to see if your contrast is legible is to look at your work with squinted eyes. This reduces your colour perception and ensures that the text stands out from the background.

6. Full Stop Conventions

In the times of typewriters, the convention was to double space after a full stop. This was to ensure there was enough space between the start of a sentence and the end of the last.

With the word processing systems of today, this is an outdated convention as the technology has already taken this into account.

Double spacing makes the passage of text look disjointed and you will essentially be doing something that has already been done for you. 

For examples of websites that are using typography to their advantage, check out http://www.awwwards.com/websites/typography/

 

Typography Mistakes to Avoid: Font

1. Don’t use too many typefaces

The typeface is the style of text, for example ‘Cambria’ or ‘Arial,’ and sets the tone for the entire website.

The problem occurs when too many typefaces are used in one site. The brand becomes confusing and there is a lack in cohesion throughout.

Limit your work to less than three typefaces.

2. Complementary Fonts

The next step once you have chosen your typeface is to ensure your fonts are complementary to differentiate points of reference within text. You may be thinking; “What’s the difference between font and typeface?” Font is simply how the typeface appears on the page, whether it is bold, italic, or underlined and what size the characters are.

Choosing complimentary fonts throughout the website creates a seamless navigation from point to point.

Here are the 100 best free fonts: http://www.creativebloq.com/graphic-design-tips/best-free-fonts-for-designers-1233380

 

You might also like:

Posted in Typography