A Guide to Practical Typography


Introduction

Typography is:
"the art and technique of setting written subject matter in type using a combination of typeface styles, point sizes, line lengths, line leading, character spacing, and word spacing to produce typeset artwork in physical or digital form." Its from the Greek words typos = form and graphein = to write. (http://en.wikipedia.org/wiki/Typography)

As designers we all like to think that we know every thing there is to know about typography - but do we? Because of the popularity with Microsoft Word most people are familiar with word processing but many do not learn the art of typography. Typography is a skill when executed well can brings great rewards. The reason for writing this article is because I have not heard of this subject being taught PRACTICALY in higher education (In the UK anyway). I often find graduates are extremely confident playing with Type creatively but not in regards to readability. Things like kerning, leading, paragraph spacing, tab setting etc (things that we wish to look at in a basic form in a few moments) is not discussed and even amongst professional designers is not always utilized. The aim of this article is to give a comprehensive guide on the subject. I would also like to say at the outset that these are things that I have learnt in the professional environment and are simply guidelines, which I view as best practice. Others may do things differently and I would love to hear from them. Please do not go away thinking that this is how you should deal with all type, as I love braking all the rules and getting creative sometimes and in terms of creative typography, yes it does have a place, but I personally think its only wise to brake the rules after you have learnt them first!

The Basics

Ok so we are going to start by looking at a basic typographic layout. The below image shows how a basic page of text would come in straight to your average desktop publishing package (Don't worry this is an example of poor typography but will serve as our starting point):

All I have done is made the subheaders bold and the main page header slightly larger. As you can see, labeled are the general text areas, which we wish to focus on in this article. I have split these areas into 4; main header, introduction text, sub headers, body text and bullets. This approach may seem a little patronizing to a designer but I feel that stripping things back to the basics will be beneficial. Although to produce a design like this is no realistic, as most designs require images, colour, logos, shapes etc, the principles carry through in all places where legible practical typography is displayed. In the next few sections of this article I hope to go into these sections and show the way I feel that typography can be best used to increase readability and pleasure to the eye.

Main Header & Introduction Text

The main header or "headline" is essential to be bold and leap out as the main title of the page or chapter start. If it does not the reader may be confused as to where the document actually starts. So I always think its a good rule to ensure the reader knows where a section starts and make it quite plain. The main header should also look like it belongs to the first sentence. This can be achieved by ensuring that its paragraph spacing (the space after a hard return) is smaller than the paragraph spacing of the first sentence. Paragraph spacing is not commonly used - even amongst designers, but it is an extremely useful tool. Many people add spacing by hitting return but this does not give much control and cannot be styled from style sheets. (Note: I'm not a web expert but I know that if you add padding to your paragraph tag this same effect is achieved).

As we've mentioned it here, I think its worth giving a few comments on what are termed "hard" returns in comparison with "soft" returns. A hard return is the what happens when you hit your enter key on your key board. This type of return will start a new paragraph and use the paragraph settings (e.g. space after = 3mm). A "soft" return is when you press shift key and enter key together. This type of return will start a new line but will keep the text within the same paragraph. So what you get is the ability to break up text lines within paragraphs, which is useful when dealing with single words at the end of paragraphs (we'll deal with this later).

Introduction paragraphs are a useful way to entice the reader to continue on reading. They also help not to waste a readers time if they are not interested in reading further. Typographically speaking these into paragraphs need to be easy to read but more distant than the body text below. They are not the main article and need to be distinguished from it. See example below as to how I would achieve these things:

Sub Headers & Body Text

This is the area in which I find the majority of designers most lacking. The purpose of a subheader is to split up body text so that a reader can find their way around the document with ease. it also makes the document more readable because the viewer is not faced with a page of block text. Each subheader needs to be linked with the corresponding body text underneath it. This should be achieved by using correct spacing after and before the subheader (You find these settings in most "Paragraph" tool pallets and the example below demonstrates how it looks when executed)

The Body text is the area, which is normally forgotten. I think as designers we often focus on the design and the surrounding graphic elements, however good typography makes a good design. As you can see form the above the text has been placed into columns. The reason for this is that text is much easier to read in short lines. You may recall, when reading large amounts of text that you sometimes skip a line or even start to reread the same line that you have just read. This complication can be cu out by making the length of the line of text smaller and the best way to do that is by using columns.

Also another thing, which can minimise this, is by using left aligned text instead of justified. This is my personal view as I do know that their are arguments for using justified text however I feel that left aligned ragged text helps the readers eyes to subconsciously help them define which line they have just read. I think when designing very formal and text driven pages (such as magazines and newspapers) that justified text is "justified" (excuse the pun) but not in corporate or marketing literature in which the readers attention must be maintained.

In the above example paragraph spacing after the bopdy text has been added. This helps to differentiate between paragraphs and again is easier on the eye.

Leading has also been increased (the space between the lines) to increase eligibility. At this point I also wish to disperse the common and false theory that by increasing text size the text is easier to read. What makes text easy to read is the amount of leading used (I usually like to make it about a third of the height of the letters). A document with large text and small leading size will not be easier to read than a document with sensible leading and small text. By small text I mean about 8pt. By going under 8pt then yes I do accept that readability can be difficult for short sighted people.

We have already mentioned single words which appear on single lines (otherwise termed widows or orphans)and how that this can be over come by using soft returns. The reason why having these is a bad idea is that these words are in danger of not being read as the eye continues down to the next paragraph. Also they look untidy. When designing for web this sometimes cannot be helped but it is best practice to ensure that a single word does not appear on a line of its own, having such mistakes looks very unprofessional.

Bullets

Bullets are important lists which need to be easily and simply defined for the reader. They are not body text and therefore I adopt a different style for them. I normally tab them into the column and ensure that the gap before and after them is larger than the gap between them. Use the tab settings to control your tab. I normally find the default tab settings way to wide and needs to be decreased - see example below:

This way of displaying bullets does create a large white space on the left but if the bullet text is longer this does not appear. If the bullet text goes down to 2 or more lines then make sure that these lines start after the bullet (or number mark in this instance) and under the first line. This ensures that the bullets are distinguishable from one another and the eye knows when a new bullet is starting.

Conclusion

Ok so we have made these brief adjustments to the document we started with and when we add them together the outcome is clearly more readable and cleaner. Please see below:

If we compare the two together, the before and after we see the difference is plain:

Although I have produced this example using Lorum Ipsum text the principles are the same in regard to any text. Sometimes you may not have a first sentence to play with, sometimes you may not have subheaders but where possible I always try to use my typographic knowledge to its full potential. We read quite a bit about designers making the web more "accessible" but these typographic principles are not always considered (Jakob Nielsen's site for example, is a great piece of interface and usability design but it is not, in my opinion, very easy to read in the typographic sense).

So, do not be scared to utilize white space, do not be scared to spend time looking at the typography, make sure you ask yourself "does this look pleasing to my eye?" but most of ensure that you have done the best you can to ensure your typography and text is readable.

Comments

Hey Mattitude,
loved the article mate! A very simple, yet logical guide to type which, i think your right, most designers tend to ignore. Also stressing the need for readability!!!
keep the good work up sport!
Roger

Looking for information and found it at this great blog!
Thanks!

Thank you for your site. I have found here much useful information!Very cool design!Added to favorites!! My site: http://titan-tankless-waterheater.blogspot.com

I think I'm shooting for the record for posts by a single person on your blog for one day. I could spend hours gleaning tips from your wisdom on these subjects. This article is espescially helpful as it deals with type in ways that my instructors simply aren't even touching in my classes (I'm a design student in California).

Thank you again for this entire blog. I can already see I will be spending a lot of time here.

Thanks for your article blog here. I am just starting a blog and have been less than impressed with css templates use of typography for blogs (readability and spacing). This information will help me re-style well as I fool with my template. Blessings!

Matt - thanks for the good article. By the way, a small point, but your article is actually quite hard to read because of the long line length and paragraphs (which is a little ironic considering your topic). Just thought you might want to know.

Don't know if you intended for it to be that way but I usually write "to break" with "e". Great article!

Just to add to Christians comment - Please make your text size a little larger, I always seem to increase the size of the text when I visit your site. Good article!