Wednesday, 3 October 2018

Typography Basics Part Two: Format and structure



Typography can make or break a piece of copy.

As a copywriter who has been fortunate to work with a number of talented designers over the years, I've picked up some useful typography tips.

In this second part of this two-part guide I'll show you how to lay your copy out in the best way for easy reading. If you missed Part One, you can read it here.

Creating the format and structure.

Once you have decided on your fonts, you need to know how to format your copy. 

Good formatting creates content that reads easily and helps the reader to navigate the piece.


1. Create a visual hierarchy.

Your visual hierarchy will be instrumental in guiding the reader through your page.

The hierarchy might go something like this:

  1. Main heading
  2. Article author/date
  3. Introduction
  4. Subheadings
  5. Minor headings
  6. Body copy

Your copy might not have all these components, but for each component it does have, you need to decide the:
  • Font
  • Font point size
  • Font colour 
  • Font characteristics (regular/bold/italic/bold italic)

Here is an example using two font families — one serif and one sans-serif:

Main heading: Arial Black, caps
Author/Date: Arial Narrow, bold
Introduction: Book Antiqua, bold italic
Subheadings: Arial Black
Minor headings: Arial, bold
Body copy: Book Antiqua


When you have made these decisions, stick to them and be consistent. The only thing you  might need to change is your font colour, if your background colour changes.

If your project is a web page, you may be able to set all these styles in advance, using a Cascading Style Sheet (CSS).


2. Use space effectively.

There are several spacers you need to think about:

Margins — setting margins stops your copy getting too close to the edges of your medium. Here a margin would have constrained the FISH & CHIPS copy inside the blue box.
 



Line spacing — there should be enough space between each line so that your uppers (b, d, f, h, k, l) and downers (g, j, p, q, y) are not touching. This font has extended uppers and downers, so needs a greater line space.





Word spacing — refers to the space between each word and may be an issue if you're using justified alignment 
  • If you have too much space, turn on word wrap 
  • If you have too little space, look at your settings
  • If neither of these suggestions work, consider switching to left alignment 
In this example the word spacing in third line from the bottom is wide compared to the rest.





Character spacing — also known as kerning — means that characters are properly spaced 
    • Too much space and it will look like a word space
    • Too little space and your characters will crash into each other
In this much-shared example, the extra space between the E and R creates a word space where there shouldn't be one.






Paragraph spacing — split your copy into manageable paragraphs and use a space to show the start of each new paragraph
    • If your project is a web page, keep your paragraphs short and leave a line space between each paragraph 
    • If your project is in print, start each new paragraph with a slight indent — I suggest 5mm




3. Pay attention to your line breaks.

Good line breaks help people to read and understand your copy.

This example perfectly illustrates why they are so important.



The correct line breaks should be:


DEAR CUSTOMER
TOILET OUT OF SERVICE

SORRY FOR THE
INCONVENIENCE

THANK YOU

Ideally, you should break your line:
  • At the end of a statement
  • At a natural pause point


4. Use a natural layout.

We naturally read down the page and from left to right, so keep this in mind when you're designing your layout.

The headline shows where they eye should go first, then subheadings and minor headings guide the reader down the page.

Note how the use of colours and positioning of the text in this example cause us to read it in the wrong order.






About the author.

Jenny Lucas is a freelance copywriter, content writer and copy editor based in Leicestershire, UK.

To find out more about Jenny, her work and the services she offers, visit her website

No comments:

Post a Comment