10 The
Commandments Of Good Typography Kimberley Sharp
1
“The definition of an expert is someone who knows what not to do.� - Charles Wilson
Contents Thou shalt not use too many typefaces
2
Thou shalt pay attention to hierarchy
4
Thou shalt remember leading
6
Thou shalt remember kerning
8
Thou shalt remember to use flush left ragged right alignment
10
Thou shalt always place text on a baseline
12
Thou shalt not make lines too short or long
14
Thou shalt not create orphans or widows
16
Thou shalt not over emphasise
18
Thou shalt not use Comic Sans
20
Glossary
22
1
1
Thou shalt not use too many typefaces When creating a document, simplicity is the key. You want to use as few typefaces as possible, never more than one or two. If possible, you want to restrict yourself to only using one. By using more than one or two typefaces, you are giving the document too many styles and weights. This will inevitably confuse people, lose their train of thought, and subsequently their interest as well. When you design something, you want the reader to look at it and know exactly what they are going to be reading about, even at first glance. You do not want them to search the page tirelessly for the information they require. If you want to add emphasis to particular type elements within your document, there are ways of doing this. Instead of using another typeface, you could increase the point size where suitable or make the element bold or italic, or add colour.
2
“I do not think of type as something that should be readable. It should be beautiful.� - Ed Benguiat
Refrain From Using
Too Many Typefaces. Restrict yourself to using one typeface. This allows you to use specific type emphasis where it is required.
3
2
Thou shalt pay attention to hierarchy In typography, it is always important to pay close attention to the hierarchy of the page. You want to ensure that you use no more than three or four sizes in any document. Using too many sizes can make the document look disjointed and confusing. This means you lose the hierarchy of elements. By restricting your type sizes to only three or four, you are allowing enough variation to emphasise certain text elements and allow the reader’s eye to categorise text areas together accordingly. The most basic thing to remember is that a headline should be positioned at the very top of the page, and if not, it should be the largest type element so that it is read first. The body copy of a document should fall between 7pt and 10pt text. Never higher and never lower. More importantly, you need to lead the reader through your document. This means looking at the page and asking yourself, and others, how it reads and guides the eye. This is your primary focus.
4
“It is almost impossible to look and read at the same time: they are different actions.� - Gerard Unger
I am a Heading I am a sub-heading And I am the body copy
I Am A Heading I am a sub-heading And I am the body copy
5
3
Thou shalt remember leading Leading is the amount of space between lines of text, and can easily make or break a document. This is one of the elements of type that you need to pay close attention to, but many designers forget about and often stick with the automatic settings. The amount of space between the lines of text will make the document more legible or illegible. Using tight leading means more text will fit on the page, but with decreased legibility. Looser leading spreads text out to cover the page, making the document easier to read. A general rule of thumb for working out the leading of a typeface is to take the point size, divide by 3, and then multiply by 4. For example: 9pt รท 3 x 4 = 12pt Using this rule means that a typeface at 9pt should be set to 12pt leading. This ensures the document text is spaced enough for legibility.
6
“Negative space is magical - create it, don’t just fill it up! “ - Timothy Samara
Too Loose
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Normal
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Too Tight
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
7
4
Thou shalt remember kerning Kerning is the horizontal spacing between characters, and can seem as obvious as leading, but it still needs to have careful attention. Kerning is used to create visually equal spaces between letters so that the eye can read the text smoothly. Although automatic kerning is applied to every typeface, there are programs that allow for manual kerning to make fine adjustments. Helvetica and Palatino are a couple of typefaces that often look better with the kerning tightened manually. With automatic kerning, both typefaces have quite a bit of space between the characters. Without any kerning adjustments, there are many letter combinations which can look awkward and there are some specific characters and glyphs that you need to take care with. You do not want characters close enough to overlap, but you also do not want to have any characters that appear to be separated from the remainder of the word.
8
“Each letter should have a flirtation with the one next to it.” - Mac Baumwell
Before:
fi
AV
V,
After: Too Tight
Too Loose
Too Loose
fi
Loosened
AV
Tightened
V,
Tightened
9
5
Thou shalt use Flush Left Ragged Right alignment Alignment refers to how multiple lines of text are arranged on a page. By keeping your documents to a flush left ragged right alignment, you will always guarantee that the viewer will be able to read and understand it clearly and easily. We are accustomed to reading this way. When aligning text flush right ragged left, the appearance becomes messy and makes it much harder to follow and read due to the starting edge being uneven. People will have difficulty reading text aligned this way. Justified text is common alignment in print media. This creates gaps or ‘rivers’ in the type where it is stretched or compressed to align against both the left and right column edges. This distracts the eye. Do not do it. Centred text writes symmetrically, making uneven margins on both sides of the column. For this reason alone it is not used in large amounts of body copy, but can sometimes be seen as document titles, headers or footers.
10
“Typography has one pain duty before it and that is to convey information in writing.� - Emil Ruder
Flush Left Ragged Right Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Flush Right Ragged Left Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
J u s t i f i e d Centred Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetuer amet, consectetuer adipiscing elit, sed adipiscing elit, sed diam diam nonummy nibh nonummy nibh euismod euismod tincidunt ut tincidunt ut laoreet laoreet dolore magna dolore magna aliquam aliquam erat volutpat. erat volutpat.
11
6
Thou shalt always place text on a baseline
A baseline grid is a series of horizontal guides that are evenly spaced. This will improve the vertical rhythm of your document and make the type subtly easier to read. In typefaces, characters with a descender, such as ‘g’ or ‘p’, will extend down below the baseline. Similarly, curved letters such as ‘c’ or ‘o’ extend ever-so-slightly below the baseline. This creates the illusion that these letters are actually sat on the baseline. The baseline is the point from which other type elements are measured, including x-height and the leading. The baseline is also significant in the alignment of drop caps and other page elements. The majority of your text, at any point size, should sit on the baseline grid. This includes headings, sub-headings, body copy.
12
“Sometimes there is simply no need to be either clever or original.� - Ivan Chermayeff
I Am A Headline I am a sub-heading
I am the body copy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
13
7
Thou shalt not make lines too short or long
The length of a line in a large body of text helps with the legibility of the document and prevents the eye from slipping up or down a line when reading. It also helps to keep the reader focused on what they are reading. You can work out a good line length in two ways. By counting the number of characters per line of text, or by counting the number of words per line. Both ways work just as well as each other. For a single column of text, you would aim to have between 45 and 75 characters per line. For multiple columns you try to aim for between 40 and 50 characters. The character count includes the letters, glyphs and spaces. When working with the word count, you want to aim to keep your copy around and between 8 and 10 words per line. Studies have shown that this is the most legible amount to read.
15
“Design is not just what it looks like and feels like. Design is how it works.� - Steve Jobs
When creating a document with narrow columns, you are putting very few words per line. Here we have between 3 and 5 words. This means the eyes are constantly jumping back to the start of the text box. In having
narrower columns, there is a chance that the reader could loose which line they are reading and may slip up or down. The reader may also get distracted and not give their full attention to what they are reading.
15
8
Thou shalt not create orphans and widows Widows and orphans are typographic errors that are very easily created but just as easily confused. An orphan is the opening line of a paragraph appearing by itself at the bottom of a page or column. This results in too much white space between paragraphs or at the bottom of a page. A widow is a paragraph ending line that falls at the beginning of the following page or column, therefore it is separated from the rest of the text. A somewhat simpler way to remember the difference between these typographic errors is that an orphaned lines appears at the birth (start) of paragraphs, and widowed lines appear at the death (end) of paragraphs. Therefore, “an orphan is left behind, whereas a widow must go on alone.�
16
“To design is to communicate clearly by whatever means you can control or master.� - Milton Glaser
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam. An orphan is left beind
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor and a
ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate.
widow must go alone. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
17
9
Thou shalt not over emphasise When creating a document you want to use one or two typefaces. Preferably one. People’s interest can be easily lost when the document design too many style and weight options. Large blocks of body copy tend to appear quite scary on a page, and ideally people like to skim through. You want people to look at your document and know what the article is about at first glance, and not have to stare at it forever to figure it out. The easiest techniques to use for emphasis are a slightly bigger point size, making use of a typefaces weights and using bold or italic. Even using a different colour works. Perhaps a lighter tint of what you are already using. Using subtle emphasis throughout your document can bring out a key word or title, therefore helping to break it up, guide the reader through and keep them focused and interested in the content. Make sure you avoid the all-caps impulse.
18
“Typography at its best is a visual form of language linking timelessness and time.� - Robert Bringhurst
Try using italics. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Try using bold. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Try using colour or tint. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Try using a bigger point size. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
19
10
Thou shalt not use Comic Sans Every typeface has a personality and portrays a feeling and a tone. The biggest complaint against Comic Sans is that it portrays a very immature, informal and childish tone. When it was included in the Microsoft fonts back in 1995, it became one of the most popular choices for those with a PC. However, it has since become overused and can be found in situations where it’s childish appearance is not appropriate. For example; at churches, restaurants, buses, police stations, doctors surgeries and more. Comic Sans does not flow very easily, so when a large amount of body text is written using it, you create a document that is uncomfortable to read. There is an appropriate place for every typeface, and Comic Sans should not be used for design. It does not fit to any project. It will end up making your work look cheap and unprofessional.
20
“A typeface is an alphabet in a straightjacket.� - Alan Fletcher
Thou shalt never, ever use the Comic Sans font unless thou would like to be labeled an idiot. Immature
Thou shalt never, ever use the Comic Sans font unless thou would like to be labeled an idiot. Serious
21
Glossary A
Alignment The positioning of text within the margins of a page or column. Alignment can be either flush left ragged right, flush right ragged left, justified, or centred. Ascender The part of a lowercase letter (such as k, b, and d) that ascends above the x-height of the other lowercase letters.
B
Baseline The imaginary line on which the majority of the characters in a typeface rest. Body Copy The paragraphs in a document that makes up the main bulk of its content. The body copy should be set in an easy-to-read and appropriate typeface, at a point size between 7 and 10. Boldface (or Bold) A typeface that has been enhanced by rendering it in darker and thicker strokes so that it stands out. Bold should be used for headline emphasis.
C 22
Centred Text placed centrally at an equal distance from
the left and right margin. It is generally not good to mix centred text with flush text. D
Descender The part of a lowercase letters (such as y, p, and q) that descends below the baseline of the other lowercase letters. In some typefaces, the uppercase J and Q also descend below the baseline.
F
Face One of the styles of a family of typefaces. For example, the italic style of the Garamond family is a face. Family (or Font Family) A collection of faces that were designed and intended to be used together. For example, the Garamond family consists of roman and italic styles, as well as regular, semi-bold, and bold weights. Each style and weight combination is called a face. Flush Left Ragged Right Text that is aligned on the left margin, but not to the right margin. Flush Right Ragged Left Text which is aligned on the right margin but not to the left margin. 23
Font A complete set of characters for one typeface, at one particular type size. Often used more loosely as a synonym for ‘typeface’. Before scalable type, there was little distinction between font, face, and family.
24
G
Glyph In the context of modern computer operating systems, a glyph is often defined as a shape in a font that is used to represent a character code on screen or paper. The most common example of a glyph is a letter, but the symbols and shapes in a font like ITC Zapf Dingbats are also glyphs.
H
Headline The short lines of emphasised text that introduce detail information in the body text that follows. Also the category of faces that are designed to work best in headline text.
I
Italic A slanting or script-like version of a face, as compared to the roman version.
J
Justified A block of text that has been spaced so that the text aligns to both the left and right margins. Justified text has a more formal appearance, but is harder to read.
K
Kerning The adjustment of horizontal space between individual characters. Kerning adjustments are especially important in large display and headline text lines.
L
Leading (pronounced: ledding) The amount of space added between lines of text to make the document legible. The term originally referred to the thin lead spacers that printers used to physically increase space between lines of metal type. Legibility The ease with which text can be read in ordinary, continuous reading, usually gauged by reading speed and error rate.
O
Orphan The first line of a paragraph that appears as the last line on a column or page.
P
Point Size The common method of measuring type. The distance from the top of the highest ascender to the bottom of the lowest descender in points.
R
Roman Commonly refers to the upright version of a face within a font family, as compared to the italic version. 25
S
Sans Serif A type face that does not have serifs. Serif A small cross stroke accentuating the end of the main stroke of a letter. Style One of the variations in appearance, such as italic and bold, that make up the faces in a type family.
T
Typeface The letters, numbers, and symbols that make up a design of type. A typeface is often part of a type family of coordinated designs. The individual typefaces are named after the family and are specified with a designation, such as italic, bold or condensed. Type Size The size of type, measured in points, between the bottom of the descender and top of the ascender.
W
26
Weight The relative darkness of the characters in the various typefaces within a type family. Weight is indicated by relative terms such as thin, light, bold, extra-bold, and black.
White Space The blank areas on a page where text and images are not printed. Widow The last line of a paragraph occurring at the top of a page. X
X-Height Traditionally, the x-height is the height of the lowercase letter ‘x’. It is also the height of the body of lowercase letters, excluding ascenders and descenders. Some lower-case letters, that do not have ascenders or descenders, still extend above or below the x-height as part of their design. The x-height can vary greatly from typeface to typeface, even at the same point size.
27
“The first thing one learns about typography is that these rule are made to be broken.� - Charles Willson
32