Doing Typography the Wrong Way: Common Mistakes To Avoid

Typography MistakeTypography may not seem the stuff of rocket science, but don’t be fooled by its seeming simplicity. Essentially, typography is the style, arrangement and appearance of text, and can hold 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 - it can be a very interesting communicative tool! You can follow typography trends, collect typography design boards, and typography can even be the cause of very strong opinion; the ‘comic sans’ typeface is often subject to endless criticism and ongoing debate.

Surely your website should be about the content not how it looks? But if you consider how typography can drastically affect how content is communicated it becomes just as important. You can think of typography as including the nuances of speech; to soothe someone you could speak to them in a quieter tone, and the same effect is created in copy by using a lightweight font or smaller typeface.

Proof of the power of typography can be seen in the John Maeda 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 WEBSITE FORMATING MISTAKES

Typography is not only how the text looks but also how it is positioned within a website. Some of the most common typography mistakes occur during website 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.

  1. Tracking and Kerning

Tracking is the space between each letter within a word. The higher the tracking value, the larger the space between letters. Kerning, though similar, is the space between two specific letters in particular.

If the tracking is too large or small, words can become illegible. Your best bet is to use the pre-set value as they have been specifically calculated for readability. However, 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. To make sure you have the tracking set correctly, you can type VV or AV together, and if you can discern them from a W then tracking is fine.

In some cases you can use smaller tracking to your advantage; when used in headings it can help the text seem heavier and more dominant.

  1. Line lengths

It is possible to set character limits per line, and this is something that every designer should take advantage of.

A long-line length can make it difficult for a reader to maintain concentration. Like small leading it can cause users to have to re-read the previous line in order to gain understanding of the content. In saying this, short lines can be uncomfortable to read as it forces the eye down the page at pace.

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.

  1. 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.

  1. 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 can help you ensure that the text stands out from the background.

  1. 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. You wouldn’t do the dishes after the dishwasher has already done them would you?

Here are some websites that have been commended on their use of typography; http://www.awwwards.com/websites/typography/

TYPOGRAPHY FONT MISTAKES

Typography font mistakes are easy to rectify using these simple rules.

  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.

It is best to have no more than three typefaces in one piece of work.

  1. Complimentary fonts

The next step once you have chosen your typeface is to ensure your fonts are complimentary 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

Related Reads:

Posted in Common Mistakes of Typography