Five Simple Steps

to Better Typography
Mark Boulton

Introductions. But, I’m going to talk about another of my interests as well.

 WCAG Samurai
‘Mysteries of Javascript-Fu’

As we have a Samurai on after me, and Javascript Fu going on as well, I’d like to
indulge in another of my interests.
Cross-overs with Typography and Martial arts. Poll - how many martial artists in the
room?
Step 1. ‘Be like water...’
Jeet Kune Do. A martial art where being adaptable
Water - Infinitely flexible, it can be soft or crash, it can tell a story. Good typography
should follow these attributes.
 Typefaces tell stories

Typefaces tell stories as well as the words. Designers need to be adaptable.

Starters
Red onion & goat’s cheese tart
Crayfish and rocket salad
Butternut squash and red pepper soup
Mains
Spam, egg and chips
Bacon, egg, sausage on toast with a cup of tea
Sausage, egg and chips
Starters
Red onion & goat’s cheese tart
Crayfish and rocket salad
Butternut squash and red pepper soup
Mains
Spam, egg and chips
Bacon, egg, sausage on toast with a cup of tea
Sausage, egg and chips
 “There are about as many
different types of letters as
there are kinds of fools”
Eric Gill

What story is this typeface saying? Quintessentially British? Corporate?

Gill Sans is telling the right story for the BBC.
Is is telling the right story here? Save the Children didn’t think so and they hired
Johnson Banks to help them.
Save the children uses Gill Sans. It actually uses the bold weight, which is an overbearing,
corporate typeface. By using Gill in this way, Save the Children was aligning itself corporation
such as the BBC. It’s a typeface which is telling the wrong story.
Rather than change the typeface (and the subsequent cost for a organisation such as this to
do so), Johnson Banks asked children to colour in outlines of Gill Sans.

http://www.johnsonbanks.co.uk/thoughtfortheweek/index.php?thoughtid=199
The feel of Gill Sans is retained but the story is richer. There is more communicative value in
this typeface.
Don’t let the type (or the design)
get in the way of the words
When people arrive at an airport, they want to do three things. 1. Get their luggage. 2. Go to
the toilet and 3. Get out of the airport. This is not a time to be creative with typography.
 © Joe Clark (http://www.joeclark.org)

Toronto Street signage prototype.

 http://www.flickr.com/photos/mn_francis/31166986/

Signage at Yahoo!. Same typeface and colours, completely different meanings. Comic Sans
isn’t the best choice for signage. Typeface needs to be above all legible, which it is I suppose,
but it’s telling the wrong story.
 http://www.flickr.com/photos/paulannett/50912200/

Comic Sans is serious.

“If they really wanted a logo that
would be inviting and inclusive,
why did they design one that
actually physically hurts you
when you look at it?”
Ken, Barrow UK
Back to Bruce Lee again. To get the story right, be like water. Adaptable.
 Be adaptable to the requirements
and appropriate to the story

Typefaces tell stories as well as the words. Good typography matches the stories the
type tells and the story the words do. To get these two things to match, you have to
be free of ‘style’.
 Step 2. Feel the rhythm

Capoeira
Capoeira is a brazilian martial art. Roots in Africa. Slave Trade. Are there any Capoeirista in
the room? Name means ‘castrated rooster’ in Portugese.
It is performed to music. The rhythm of which sets the pace for the Game.
A great Capoeirista will use the rhythm of the music to balance his play. Movements in
harmony. Same with typography.
 Vertical Rhythm

Vertical Rhythm is the rhythm of reading down a page. Like in music. Composing to a Rhythm.
 24ways.org/2006
“Compose to a Vertical Rhythm”

For a detailed explanation of how to achieve this have a look at Rich Rutter’s great article.
(day 12).
Browser defaults. H1, h2, some text and a side-note.
Overlay 18px rhythm.
 body { font-size: 12px; }

p { font-size: 1em; /* 12px */

line-height: 1.5em; /* 18px */
margin: 0 0 1.5em 0; }

line height: 18px ÷ 12px = 1.5em

In brief, set the body base size to 12px (or 75%).The line-height in ems is calculated by
dividing the desired line-height by the base font size giving a value of 1.5em.
 .sidenote {
font-size: 10px ÷ 12px = 0.8333em
line-height: 18px ÷ 10px = 1.8em
}

For the sidenote, the font-size we want is 10px, so we divide that by our base font-size to get
the value in ems. To retain the vertical rhythm, we divide the vertical rhythm unit by the new
font size.
A Vertical Rhythm of 18px is applied.
A Vertical Rhythm of 18px is applied.
 Incremental Leading

Incremental leading
Note the sidenote. The typeface is smaller, the vertical rhythm is directly in sync with the
main content. However because of the smaller typeface, the leading is too much.
Note the sidenote. The typeface is smaller, the vertical rhythm is directly in sync with the
main content. However because of the smaller typeface, the leading is too much.
 Four lines of the main content
18px x 4 = 72px

So, for every four lines of the main copy, I wanted five lines for the sidenote. I’m estimating this
won’t be so tight. The vertical rhythm value multiplied by 4 is 72.
 Five lines of the sidenote
72px ÷ 5 = 14.4px

We take that value and divide it by 5.

 New line-height of sidenote
14.4px ÷ 10px = 1.44em

The new line-height of the sidenote is then that value divided by the font-size. This gives you
the value in ems.
 .sidenote {
text-indent:-0.7em;
width:12em;
margin-right:0;
margin-top: 0.28em;
font-size:0.8333em;
line-height:1.44em;
position:absolute;
top:0;
left:42.6em;
}

Following on from Richard’s example I changed the line-height and margin to the new values.
The top-margin is actually tweaked to get the first line to align to the baseline.
Now, every fifth line in the sidenote lines up with every fourth line on the main content.
I wanted to set this with lighter leading, yet I still wanted a relationship between it and the main
content.
 Remove browser defaults

Remove browser defaults.

 Set your type to a vertical rhythm
and use incremental leading
for your sidenotes

In conclusion. Typography which is in harmony will be more successful. Like ca

Step 3. Wax on, wax off
Yin Yang. Opposing but complementary principles.
Yin Yang. Opposing but complementary principles. In martial arts, we often see Hard
and Soft attributes. Hard styles - fighting, weaponry etc. and soft styles, meditation
and flowing forms. Kung Foo.
A lot of design is about balance and typography is no different. You should be aware of hard
and soft, and the balance between them.
 Optical Grey

When I was in art school I was taught how to see tone. It’s quite simple really, you squint. If
you’re wear glasses, take them off. The idea is to see blurred shapes. This gives an indication
of tone.
Add more leading? Yes, but also change the typeface
http://www.daidala.com/economist101ecotype.html
Old New

http://www.daidala.com/30nov2003.html
 Old

http://www.daidala.com/30nov2003.html
 New

http://www.daidala.com/30nov2003.html
“Karate is a form of martial arts in which people
who have had years and years of training can,
using only their hands and feet, make some of the
worst movies in the history of the world.”
“Karate is a form of martial arts in which
people who have had years and years of
training can, using only their hands and
feet, make some of the worst movies in the
history of the world.”
Picking on the daily mail. Tightly set type gives a darker optical grey. It doesn’t really make for
a pleasant read. Too much Yang
Dark optical grey
Here at A List Apart,
The type is given plenty of leading so the optical grey, the feeling of heaviness that was there
with the Daily Mail, is reduced.
Combine Serif and Sans-serif fonts
Control distance
My cousin, who runs a school in
California, says that the one who
controls the distance in an encounter is
the one who controls the situation.
Control distance
My cousin, who runs a school in California, says
that the one who controls the distance in an
encounter is the one who controls the situation.
Control distance
My cousin, who runs a school in California, says
that the one who controls the distance in an
encounter is the one who controls the situation.
Control distance
My cousin, who runs a school in California, says
that the one who controls the distance in an
encounter is the one who controls the situation.
Control distance
My cousin, who runs a school in California, says
that the one who controls the distance in an
encounter is the one who controls the situation.
Control distance
My cousin, who runs a school in California, says
that the one who controls the distance in an
encounter is the one who controls the situation.
Simplebits.com.
themorningnews.org
themorningnews.org detail
The news Times Online uses contrast to great effect. Mixing upper and lower case,
sans-serif and serif typefaces. Great use of colour too.
Minimise dark Optical Grey and
carefully look at the line-height.
Mix Serif and Sans-serif fonts
to give your designs balance.
Step 4. Use the right tool for the job
Ninjas. We all know about ninjas right?
They even have an official website.
Facts. 1. Ninjas are mammals. 2. Ninjas fight ALL the time and 3. The purpose of a
ninja is to flip out and kill people.
In fact, Ninjitsu was a traditional Japanese martial art. Trained in many disciplines and
used many types of weapons. Assassinations.
 -

The Hyphen: Often used, often misused.

 Hyphens are Not Dashes

Unless you’re using a typewriter or monospaced font where a hyphen is commonly

the same width as dashes.
Britain’s workers improve their
lives - by doing nothing.
 Britain’s workers improve their
lives -- by doing nothing.

Mention monospaced fonts and typewriters

 Britain’s workers improve their
lives—by doing nothing.

UK, em dash
 Britain’s workers improve their
lives — by doing nothing.

UK, em dash
 Britain’s workers improve their
lives – by doing nothing.

US, spaced en dash

 shit-faced

What they’re not is hyphens

 – en dash

• Monday–Sunday
• 8.00–9.00
• A phrase marker – thus – with spaces
 — em dash

• A phrase marker—thus—with no spaces

• A break in thought when — what time
is it?
Stylistic differences
 “Can’t we automate that?”

Newspaper environment. Same content, different delivery platform.

Tools. Smarty pants and Textile. Nurture an environment where people care about
these details.
Step 5. Use a System
Boxing. Possibly the best martial arts system. Provides Balance, but flexibility and
movement. Built on simple, basic foundations.
 What is a grid?

A grid is a tool for designers to organise information—typographic or pictorial.

There to answer compositional problems.
Every element has a relationship with every element.
Consistency across multiple pages or templates of a website.
Building a grid
 The unit

The unit is the smallest element of a grid. It’s the building block.
Units are combined to create columns and rows
Columns can be combined. They can be uneven. So, here, we have a 3 unit column, 2
unit column and a 4 unit column.
 How do you decide on a unit size?

The unit size is determined by constraints.

The overall width of your layout (eg 960px) or widths of things outside of your control
(eg. Image widths or ad sizes).

The unit size can also be determined by the font size, or the vertical rhythm size.
What is the relationship between type and layout? Let’s begin with the building block
of a grid; the unit. Units can be based upon ratios such as the Golden Section. This
unit is based upon the Rule of Thirds. A compositional tool close to the Golden
section, with a ratio of 2/3.

For this example, I’m going to go back to our vertical rhythm unit of 1.5em
 3

Broken down into six blocks.

 1.5em

Lets give it a relational measurement in terms of typography. So, one sixth of this
unit is 1em in dimensions.
 3 x 1.5 = 4.5

2 x 1.5 = 3

Ratio of 2:3
 4.5em

3em
 4.5em 4.5em 4.5em 4.5em 4.5em 4.5em

3em

3em

3em

3em

3em

3em

We extrapolate out the units and add 0.5em gutter on the right and a 0.33em gutter
at the bottom. The ratios are then retained through the grid.
When you combine units, you can retain the same 2:3 ratio.
When you combine units, you can retain the same 2:3 ratio.
Create some columns by combining units.
Overlay the vertical rhythm grid
 Indent or center verse quotations
When setting verse, whether
on the web or otherwise, the
primary concern is not to
deprive it of its “chosen
form”, including matters of
spacing and visual structure
Set your type.
When setting verse,
whether on the web or
otherwise, the primary
concern is not to
deprive it of its “chosen
form”, including
matters of spacing and
visual structure
 Indent or center verse quotations
When setting verse, whether
on the web or otherwise, the
primary concern is not to
deprive it of its “chosen
form”, including matters of
spacing and visual structure
Remove the lines
When setting verse,
whether on the web or
otherwise, the primary
concern is not to
deprive it of its “chosen
form”, including
matters of spacing and
visual structure
 Indent or center verse quotations
When setting verse, whether
on the web or otherwise, the
primary concern is not to
deprive it of its “chosen
form”, including matters of
spacing and visual structure
And the columns
When setting verse,
whether on the web or
otherwise, the primary
concern is not to
deprive it of its “chosen
form”, including
matters of spacing and
visual structure
 Indent or center verse quotations

When setting verse, whether When setting verse,

on the web or otherwise, the
primary concern is not to
deprive it of its “chosen
form”, including matters of
spacing and visual structure
whether on the web or
otherwise, the primary
concern is not to
deprive it of its “chosen
form”, including
matters of spacing and
visual structure

And finally the units. The whitespace left isn’t arbitrary. It’s related to the unit which
is in turn related to the typography. There is a relationship.
Tables
 AW AW AW

Barry Island 0533 0600 0608

Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Barry Island 0552 0620 0648
 AW AW AW

Barry Island 0533 0600 0608

Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Barry Island 0552 0620 0648
 AW AW AW

Barry Island 0533 0600 0608

Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Barry Island 0552 0620 0648
 AW AW AW

Barry Island 0533 0600 0608

Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Barry Island 0552 0620 0648
 AW AW AW

Barry Island 0533 0600 0608

Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Barry Island 0552 0620 0648
 AW AW AW

Barry Island 0533 0600 0608

Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Barry Island 0552 0620 0648
 AW AW AW

Barry Island 0533 0600 0608

Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Barry Island 0552 0620 0648
 AW AW AW

Barry Island 0533 0600 0608

Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Barry Island 0552 0620 0648
 AW AW AW

Barry Island 0533 0600 0608

Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Barry Island 0552 0620 0648
Set your type to a grid
Don’t over adorn tables
Align everything
 1. Be like water
2. Feel the rhythm
3. Wax on, wax off
4. Use the right tool for the job
5. Use a System

Be appropriate and adaptable

 1. Be like water
2. Feel the rhythm
3. Wax on, wax off
4. Use the right tool for the job
5. Use a System

Use vertical rhythm and incremental leading

 1. Be like water
2. Feel the rhythm
3. Wax on, wax off
4. Use the right tool for the job
5. Use a System

Balance your typography

 1. Be like water
2. Feel the rhythm
3. Wax on, wax off
4. Use the right tool for the job
5. Use a System

Make sure you use dashes when you mean to and not hyphens
 1. Be like water
2. Feel the rhythm
3. Wax on, wax off
4. Use the right tool for the job
5. Use a System

Use a grid system and align everything to it.

Bruce Lee developed and demonstrated a technique called the one-inch punch in 1964 at the
Long Beach Karate Championships. It’s a technique common to many Chinese martial arts
and it’s about detail.

For a one-inch punch to work, the martial artist has to be aware of so much - from the way
his muscles will react in his arms to the transfer of energy from his feet all the way into his
fist. Without the details, it simply would not work.

Like typography.

Without all these little details working in harmony, your typography might be ok, but it
certainly won’t knock anyone off their feet.
Mark Boulton markboultondesign.com
markboulton.co.uk/present/atmedia07

Thanks: Rich Rutter, Joe Clark & Norm