Design and typography basics The talk
This is the talk I gave with the webinar I delivered on Tuesday 31 January 2012, Design and Typography for Technical Communication.
If you would like to have the accompanying slides, download them here.
A cacophony of choice
Unless we are making simulations or videos that depend on action and voiceover to get the point across, technical communicators communicate in text and in illustrations with text associated with them. These are words on a page or on a screen. It seems simple, yet we have so many choices to make. We are not limited to single-spaced or double-spaced text typed in rows. We are not limited to one wide column or two narrow columns. We are not limited to black and white. We are not limited to books. We are not limited to paper.
More than being an embarrassment of riches, figuring out how best to use text has become a perplexity of pickings, a cacophony of choice.
Text on a page
Good documents depend on readable text and clear layout. That simple investment can pay you back many times over.
Good documents are more likely to be used by your customers. If your customers use your documents, your company will most likely have far fewer support calls. Good documents can inspire trust in your products and help to keep your customers loyal.
Bad documents are more likely to be discarded or ignored by your customers. If this happens, your company will have to answer more support calls and manage more customer frustration. At worst, bad documents can make your customers not trust your professionalism and even take their business somewhere else. Bad documents can damage your product.
This webinar should help you towards a firm understanding of the basics of typography and document design. It should explain the basics of the ways to use text effectively in technical communication.
The added benefit is that, once you know about the elements of typography and design in the text you work with, and in the text that surrounds you, you will start to notice it and to see where it works and where it could be improved. You can begin to make informed choices.
Understanding the basics of typography
Typography begins with an understanding of the physical elements of text.
- The baseline is the bottom line along which all the characters align, excluding the descenders.
- A descender is the downward extension of a character; the part that descends below the baseline.
- The descender line is the lowest point of the longest descender in the character set; also called the beard line.
- The x-height is the height of all the lower case characters, excluding the ascenders, and typified by the lower case x of the character set.
- An ascender is the upward extension of a lower case character; the part that rises above the x-height.
- The ascender height is the highest point of the highest ascender in the character set.
Not all lower case characters with ascenders reach all the way to the ascender height. For example, lower case Ds are shorter than lower case Hs. Notice that upper case letters are slightly shorter than the ascender height, too. The height of the upper case letters is called the cap-height, for capital height.
The font in this slide, Times New Roman, is sometimes dismissed as out-of-date, but it is a lovely, elegant typeface. Whats more, it is tried and tested, compact, and highly readable.
Categories of type
There are five categories of type, each with recognizable characteristics.
- Slab serif is characterized by thick, slab-like serifs. The serif terminals can be either blunt and angular, or rounded. Slab serifs are often used in headlines and advertising, but not often used in body text. The example here is Dispatch.
- Script is characterized by the fluid strokes normally created by handwriting. Script typefaces come either in highly regular, formal types based on the writing of seventeenth and eighteenth century writing masters or in looser, more casual types. The example here is Memoir.
- Sans serif is characterized by not having serifs, which are the small projecting features at the end of strokes. In print, sans-serif fonts are often used for headings rather than for body text. It is largely accepted that serifs help the eye read body text more quickly. But sans-serif fonts have become standard for onscreen body text. This is partly because some low resolution screen displays do not render serifs correctly. The example here is Helvetica Roman.
- Old Style is characterized by subtle differences between thick and thin lines, excellent readability, and a diagonal stress. Diagonal stress means that the thinnest parts of letters are at an angle, normally a left-inclining curve axis with heavier stress at about 8 and 2 o’clock. Old style font serifs are almost always bracketed and the head serifs are often angled. The example here is Original Garamond.
- Modern is characterized by an extreme contrast between thick and thin lines. A modern typeface has a vertical stress, long and fine serifs, and minimal brackets. Modern font serifs tend to be very thin and vertical lines tend to be very heavy. The example here is Bodoni MT.
- Decorative fonts are characterized by unusual letterforms, spacing, and lines. Decorative fonts are used in titles and other short runs of text. They are more spectacular than non-decorative fonts, but this comes at the expense of readability. The example here is Freaky Frog BF.
There is ongoing discussion about serif versus sans serif fonts in headings, body text, and advertising. A general principle is that sans serif fonts are a better choice for headings and serif fonts are a better choice for body text.
Some studies have shown that there is no significant difference in comprehension between serif and sans serif typefaces in body text. But, equally, some studies have shown that serif fonts are more easily read in body text. My advice is for you to learn as much as you can, keep an open mind, and use what you think works best for your purpose.
Above all, look for a well-designed font. When you look at a block of body text, do you see letters that bunch up together or string apart when in certain combinations? That is a badly designed font. The awkward letterspacing is harder to read and, when you get more used to noticing what makes a good typeface, the font actually looks ugly.
Understanding font families
A font family is a set of purpose-built character sets for a font. A font family has a regular character set, an italic character set, a bold character set, and possibly more. Normally, we apply italic or bold to the regular character set. The font family character sets are more coherently designed and flow better. But they cost more and they might not display correctly on a machine not loaded with all of them. Many companies choose not to bother buying them.
Design basics for type
There are six basic principles of designing with type and all of them relate to contrast. Contrast adds visual value to your text, creates emphasis, and focuses your readers eye where you want it to go.
- Size creates tension and contrast.
- Weight is either lightness or heaviness, also called blackness, used to create contrast.
- Structure is the construction of letterforms. For example, an oversized dropped capital at the start of a chapter is structurally different from the rest of the body text. It creates contrast and it signals the start of the chapter.
- Form relates to the shapes of letters and words. The eye reads shapes more than individual letters. This is why writing everything in upper case is much harder to read. The words look like blocks.
- Direction can refer to a line of vertical text, such as a tab heading on the side of a page in a book, or a decorative curved heading that flows along a graphic element. Direction can also refer to tall, narrow columns of text or larger blocks of horizontal text.
- Colour is a large topic that I am saving for another presentation. I will say that the basic principle of colour contrast in text is that warm colours advance and cool colours recede. High contrast pairings can be beautiful and effective or they can be ugly, irritating, and distracting. Remember that blacks, whites, and greys are also colours. Some people like to read light text on a dark background, but it is difficult for many to read, including older people and dyslexics. Colour blindness has to be understood and taken into account, too. Of course, at work you may find that you do not have any choice of colour because of your companys corporate identity. In fact, your marketing department probably owns the company colours and will tell you very explicitly what you are allowed to use.
Understanding text layout
Layout is the way that everything relates to everything else on the page. It makes all the parts of your page into a, hopefully coherent, whole.
In terms of text,
- Kerning narrows the distance between letterforms.
- Tracking increases the distance between letterforms.
- Leading, also called line spacing, can make your text easier to read, or it can make your text seem dislocated.
- White space, sometimes called negative space, is calming and helps to define the active areas where you have to read so that you can more easily understand the text. White space is surprisingly important when you want to create an articulate whole, so dont underestimate it.
Understanding the four basic principles of design
There are four basic principles of document design. You can combine these basics to create great documents, so my advice is to learn them and begin to see them in all the text, including the technical communication, that surrounds you.
- ContrastWe have already had a whole slide devoted to the principles of designing with text, all of which relate to contrast. It is, in a single sentence, the placement of dissimilar elements. In its simplest form, you can see how contrast works when you notice that headings are different, usually larger and sometimes coloured differently, from body text.
- Repetition occurs in parallel constructions like paragraphs that are spaced the same distance apart, visual elements like logos and colours that are always placed in the same location, and perhaps at its most basic, using the same font for the same purpose such as headings in Arial and body text in Times New Roman
- Alignment is the invisible grid that text and images line up to. Alignment includes margins, hanging indents, bulleted lists, images, headings, and so on. In fact, alignment relates to anything that lines up to anything else.
- Proximity is the placement of related items near each other. Nearness creates a collection, like a collection of steps or ingredients. In essence, nearness creates significance.
Knowing your medium and knowing your audience
The most important first step in any design is to know your medium and know your audience. Are you creating a printed document or a PDF? Are you designing for a mainframe screen with its special limitations, for your corporate customers computer screen, for a tablet screen, or for the screen on a mobile device? Are you building technical communication for distribution on the Internet?
If you are designing for onscreen consumption, you should design so that any screen size can render your text. You should not design for a specific device because devices change. So, if you are designing for onscreen use, be sure that your material can render correctly on any screen size.
Now, lets take a look at some examples. (Several example slides follow, after which the question and answer session begins.)
Q: My company Brand uses grey instead of black for both print and online text. Is this bad?
A: I think that your question is to do with what the best level of contrast might be. Every black and every white is impure. So, basically, all blacks are some kind of grey. If the grey is dark enough to provide sufficient contrast with the background (if the background is light), this should not be a problem. If there is grey text, however, on a light or patterned background it can disappear.
I would say that, for the best result, any corporate Brand should use the darkest possible charcoal grey or rich grey that they like and find suitable for their purpose. A light grey or a faded grey can be very difficult for older people and dyslexics to read. If an insufficiently dark grey is presented on a patterned background, it is possible that a colour blind person simply won’t see it at all.
Q: Is the Questions? text on the presentation slide too light? It uses a grey.
A: Congratulations! You saw it! Yes, I tried to make the grey text in the slide correspond to the grey shading in the letter surrounds. But there is not enough contrast in my typed-over text, and it looks bad.
Q: What size font would you use for online help? My company uses Arial 10-point.
A: Unless people can zoom or re-size the screen to read it more clearly and you tell your readers that they can do that, I would say that Arial 10-point is a bit small.
Q: Does font size depend on screen display resolution?
A: You can set up your web page so that it sizes correctly no matter what screen display you use. I need to do more research to be able to give you a comprehensive, technical answer. I’d like to focus on that in another webinar or workshop.
Q: When is it a good idea to create contrast by alternating fonts? When is it better to keep the same font throughout?
A: That is a style decision, so it is subjective. When you show a block of code in your text, for example, it is a good time to use something like Courier New to illustrate the difference in the text.
Some people adhere to the principle that it is a good idea to use sans-serif fonts in headings and serif fonts in body text. But there are no rules.
I like to use fonts that are simple and that render correctly on most machines. That is one of my strongest guiding principles. If you want unity in your web page or document, consider sticking to the same font throughout.
Using fewer fonts in your document rather than more fonts is probably a good principle.
Q: Does the two-font rule still apply today?
A: I feel that it is a nice principle to be guided by. In this presentation, I used a different font on each slide so that I could show you many fonts. But normally, I would use the same font throughout for a unified look.
Q: What can you do when a technical document becomes a marketing document? Can you still influence the look and feel of it?
A: This is called technical marketing and I have done a lot of it in my career. You can offer your expertise in creating the text and layout, but you might not be able to change the font, colours, and images that are used due to restrictions from Brand.
Q: What is the difference between a typeface and a font?
A: A typeface has a consistent visual style and a typeface can have several fonts in it, which make a font family. A font is a specific member of a typeface font family such as roman, boldface, or italic type.
Arial is a typeface that includes roman, bold, and italic fonts in its font family. In the olden days when we used metal type, a font also meant a specific point size. But now a single font can be scaled to any size, so this distinction has lost its meaning.
In professional typography, a typeface contains many fonts, which are a given alphabet and its associated characters in a single size. An 8-point Caslon Italic is one font, a 10-point Caslon Italic is another font, and so on. Font used to mean a typeface in a specific size.
Q: What is a font family?
A: Font families are collections of closely related typeface designs that can include fonts of specific weight and fonts of a stylistic variant. For example, Times is a font family, and Times Roman, Times Italic, and Times Bold are individual fonts in the Times family. Some font families have just a few fonts in them. Other font families, such as Helvetica or Garamond, have dozens of fonts in them.
Q: How can you make a custom or specialized font display correctly on a machine that is not loaded with the right character set?
A: You can embed your font in a PDF but not, as far as I know, in MS Word. For the Internet, Google has collected Web fonts that you can use and that are supposed to render correctly on any browser.
Whatever else you do, it is probably a good idea not to use a custom-built font in a document that is going to be widely distributed. There is no guarantee that the font will render correctly. Your recipient may see an ugly replacement font, or even just a row of boxes.
As an example, I had to take a screen capture of each of the font types that I show on the font-types slide in this presentation. I wanted to provide good examples, and I tested the slide on the different machines that would be used in giving the presentation. After testing, I knew that I would have to take screen captures if I wanted you to see them correctly.
Q: What about custom colour themes? My company uses one for all our corporate communication and technical documentation. Do they display correctly on all machines?
A: If you create a PDF, the colours display correctly. But a Word document that uses a custom theme can look completely strange on a machine that does not have that theme installed. So be very wary of custom themes. Try to use a standard theme provided with MS Word.
Q: How can you gauge the amount of white space to use on a page?
A: This takes trial and error at first and, eventually, experience. White space is the space between graphics, margins, gutters, columns, lines of type, and blocks of type. It is the part of the page left blank. White space provides balance between positive (filled) and negative (empty) space. It is the key to aesthetic composition.
When page space is at a premium, you run the risk of your layout being too busy, cluttered, and difficult to read. If you cannot expand onto another page, you can try to solve the problem with leading and typeface, but use those tools carefully because they can make your page look tight and constrained.
In essence, good use of white space gives your page a classic, elegant look. Not enough white space makes your page look chaotic and dense. Too much white space makes your page look empty and incomplete.
Q: What are some good arguments to bring to Brand so that they support your interest in typefaces, use of colour, and layout?
A: Knowledge is power. Read as much as you can so that you can be prepared. Some good things to focus on are to understand and use the terminology around typography, design principles, and colour theory.
If you want to influence decisions about new or revised templates, learn as much as you can about your publishing tools. Be able to make an informed contribution to the discussion.
In addition, you should be prepared to try out your ideas. Only by making templates and playing around with them can you find mistakes or things that dont work. It is a time commitment, but it is such a great skill to have that it is worth it.
Q: What if Brand cant support you because of their commitment to another vision?
A: Get involved, even if it is just to listen in on meetings. Over time you should be able to deepen your understanding of Brands vision and either adapt your ideas or gain traction to help propel things more your way. Its almost never a rapid process.
Q: What if some colours and fonts and layouts do not translate well to other cultures?
A: That is a very good point. In some eastern cultures, text runs from right to left, so your alignment would have to accommodate that possibility if you are designing for them.
Be careful using decorative fonts in technical communication. They are too distracting for instructions. Whats worse, some cultures and target audiences see them as ridiculous, even in technical marketing.
Colours can mean specific things, too. In China, for example, red means happiness. For our culture, red is quite often used to mean danger.
Find out about the cultures you are writing for, or localising for, and do what you can to be understood correctly.
- Designing with Type, 5th edition. James Craig and Irene Korol Scala.
- Thinking in Type. Alex W. White.
- Google Web fonts: www.google.com/webfonts
- My Fonts: new.myfonts.com/
- The Non-Designers Design Book, 3rd edition. Robin Williams.
- Websites that suck: www.websitesthatsuck.com/