sign in sign up
<<
Home , Letter case

Clear Communication by Design

Presented by Michelle Boulton Michelle Communications [email protected] don’t exist in isolation. They are part of or a screen. How those words are arranged on the page or screen affects how they are perceived.

The best designs are clean, clear, and concise. They help the reader navigate through the docu- ment to find the information they need and want.

Legibility describes how easy it is to distinguish one from another. Readability describes the ease with which a text can be read and understood. vs These are different things but they are both based on the anatomy of type. Readability

Clear Communication by Design by Michelle Boulton 2 What is ? It has a few different definitions: • The art or process of setting and arranging The purpose of type. • The style and appearance of text in print or Typography on screen. • Designing with type in order to communicate a message. Typography should not call attention to itself — its purpose is to make the text easier for the reader to navigate and understand. Many factors influence the effectiveness of typography: • Choice of • Letter spacing • Type size • Letter case • • Type style • Line spacing • Contrast • Alignment

Typeface can be roughly divided into two main groups / classifications: Serifs • typefaces have been around since 1470. • Serifs are believed to be more readable than sans serifs because the serifs help to guide the eyes along. • Serifs are more commonly used than sans serifs, and they are the usual choice for long texts such as newspapers and books Sans serifs • Sans serifs did not appear until in the mid- 19th century, and they were not in common use until the 20th century. • Sans serifs are often used for headings rather than for body type.

Clear Communication by Design by Michelle Boulton 3 or Typeface? This might be a good to talk briefly about the Font or difference between ‘Font’ and ‘Typeface’ The font is the physical collection of letters, num- typeface bers, symbols, etc. (whether it’ a case of metal pieces or a computer file). The typeface is the design of the letters (the way it looks). The way I relate the difference is by comparing them to songs and MP3s (or CDs, if you prefer a physical metaphor). The MP3 is the delivery mechanism, not the creative work. In the same way, the font is the delivery mechanism and the typeface is the creative work.

Type size Top of Caps New size is generally measured in points. Typography The distance from the baseline (where all of the

Type letters sit) to the top of the capital letters deter- size Typography Adobe Garamond mines the letter’s size. Different typefaces in the same point size can appear to be different sizes. Typography Bookman Old Style Things that affect the “apparent size” of type: • How thick the letters are • The height of the ascenders and How big should my text be ? There is no universally applicable guideline for font size, but the general range for body type is 9 to 12 points. Optimal size will depend on many things, includ- ing (or width), clarity and proportions of the chosen typeface (see previous slide), and the age of the intended readers.

Clear Communication by Design by Michelle Boulton 4 Line length Magnim verrum nos quid mo berum quo ommost, si bearchi liquis dolo verehendis dentist. Nem dem abo. Ehenda voluptat repero beruptae consequi occae con eatur, omnisciatet et ratiis molorem esciis re core peritat ipsam quassincto velitae et venditas dit alit odit, volupienit aut occusdaes si as resti dolorenimus amus estiorae nonseque corpore, optatur? Line length is also commonly referred to as “col- umn width.” It determines how well your eyes can Magnim verrum nos quid mo berum quo ommost, si bearchi liquis dolo verehendis dentist. Nem dem abo. Ehenda voluptat repero beruptae consequi occae con eatur, follow the text and it is crucial to readability. omnisciatet et ratiis molorem esciis re core peritat ipsam quassincto velitae et venditas dit alit odit, volupienit aut occusdaes si as resti dolorenimus amus estiorae nonseque corpore, optatur? A common question is, what is the optimal line length? Magnim verrum nos quid mo berum quo ommost, si bearchi liquis dolo verehendis dentist. Nem dem abo. Ehenda voluptat repero beruptae consequi occae con eatur, omnisciatet et Before I can answer that, we should talk a bit ratiis molorem esciis re core peritat ipsam quassincto velitae et venditas dit alit odit, volupienit aut occusdaes si as resti dolorenimus amus estiorae nonseque corpore, optatur? about how we read. Reading takes place in small leaps — fast eye movements — from one or phrase to the next. This happens because a sharp and detailed visual perception can only happen in the central part of our retina. When we read, our eyes don’t move smoothly across the page. What our eye can see is something like the bot- tom image in the left-hand column. The eye clearly picks up 5–10 characters at a time. So, the question was, what is the optimal line length? The optimal line length for body type is about 55–60 characters (including spaces) per line. If a line of text is too long, it can be difficult to continue from the end of a line to the beginning of the correct next line in large blocks of text. If a line is too short the eye will have to travel back too often, encouraging readers to skim rather than read the text. Rule of thumb: You should be able to read from the beginning of a line to the end without turning your head.

Clear Communication by Design by Michelle Boulton 5 Line spacing (or ) Line spacing, or leading, refers to the space x height x leading between lines of type in a body of text. Top of caps The word ‘leading’ come from the early days of printing, when strips of lead were inserted Baseline type between the lines of type. Correctly spaced lines improve the overall appear- ance of the text and make it easier for the reader to follow. Line length and line spacing are inseparable. Typically, long lines (wide columns) require more line spacing than short ones. A wide column with narrow line spacing looks very dense and heavy. Additional line spacing helps readers move more easily from one long line to the next one. Rule of thumb: make line spacing that 2–3 points larger than the font size. For example, 10-point text would have 12–13 point line spacing.

Kerning Let’s go back to that earlier slide to talk briefly about kerning. Kerning refers to the space between individual characters within a word. Most modern typefaces don’t require additional kerning, especially at body text sizes.

Letter spacing, or tracking Tracking is the spacing between the words. By increasing the tracking, you can create a more Letter spacing open, airy feel. Decreasing the tracking is rarely desirable, but can be used on occasion to bring up or tracking a short line of text. tracking

Clear Communication by Design by Michelle Boulton 6 Type size, line length, and leading are inter- related. If you increase the type size, for example, you will also want to increase the space between lines to maintain legibility. Rule of thumb: space between letters should be less than space between the words, and space between the words should be less than the space between lines.

Type style Use as few type styles as possible. Use as few type styles as possible and always be consistent, sticking to the same style for head- Avoid extra heavy or condensed styles. ings, subheadings, and body type throughout a document. Use bold and italics sparingly. • Avoid extra heavy or condensed styles. • Use variations such as bold and italics spar- Almost always avoid reverse type . ingly. • Almost always avoid reverse type.

Here is an example: The on the left, set in Minion Pro Reg- ular, is easy to read. The paragraph on the right is also Minion Pro, but the style is Condensed Bold, which makes it much harder to get through.

Contrast Contrast describes the relationship between the colours chosen for text and the background on text which the text sits. The greater the contrast between text and back- ground the more readable the text will be. So, text black text on a white background is the easiest to read. From there every combination makes text less readable.

Clear Communication by Design by Michelle Boulton 7 Letter case When we read, we recognize words as much by their shape as by the letters they include. Text that SHAPE is set mainly in lowercase letters have ascend- ers and descenders (such as the h and p in this example). This gives words in lowercase letters a more distinctive shape than those in all capitals. Lowercase text is the most legible. Text set in all Shape caps is the least legible because each word is the same shape. When you use case in sentences, the mixture of upper and lower case is also hard to read and Letter case should be reserved for headings. OUR EYES RECOGNIZE WORDS BY THEIR SHAPE AS WELL AS BY THE LETTERS THEY INCLUDE. TEXT SET IN IS THE LEAST LEGIBLE To illustrate this, let’s look at some blurry text set BECAUSE EACH WORD IS THE SAME SHAPE. in case and then text set in all caps (third Another Problem Occurs When You Use Title Case In slide down). As blurry as this is, I’m sure most of Sentences. Title Case Is A Mixture Of Upper And Lower you can make out the top text. Now try the bot- Case And Is Suitable For Only Because It Is Too tom text. It’s the same text, but the bottom text is Hard To Read. in all caps and much harder to make out.

Alignment Justified columns (with straight left-hand and right-hand edges) are common, but they produce word spacing problems. In justified text, each of the lines are forced to be the same length, result- ing in irregular spacing between words. This decreases readability because it causes the eye to stop at unexpected spaces. Left-aligned text is flush along the left side, but has a ragged right-hand edge. Left-aligned text is the easiest to read. Right-aligned text is flush along the right side, Alignment but has a ragged left-hand edge. Right-aligned Four types: text is much more difficult to read because the reader has to seek out the beginning of each line • Justified from a different place. • Left-aligned (ragged right) • Right-aligned (ragged left) Each line of centred text is centred along the • Centred middle. It is difficult to read and is not meant for long body texts. Centred text is best saved for and special circumstances (such as invitations) consisting of only a few lines.

Clear Communication by Design by Michelle Boulton 8 Paragraphs do not occur in nature. Whereas sentences are grammatical units intrinsic to the spoken , paragraphs are literary conven- Content & tions designed to divide of content into appetizing portions. Structure There are two common ways of indicating the start of a new paragraph: • Indenting the first line • Inserting extra space above the first line If you insert extra space, be aware that the end of a paragraph may not be clear if it comes at the bottom of a page. Indenting first lines is the better option if you want to save space. (I know you all know this.) A ‘widow’ is a very small line or single word left alone at the end of a paragraph. An ‘orphan’ is a word or short line that appears at the beginning or end of a column. Why do we hate widows and orphans? Because these dangling bits of text can make the story harder to read, destroy continuity for the reader, and make layouts look unbalanced. Both should be avoided. Good Organization Present the big picture before the details — this is one of the most basic principles of good organization. It’s hard to absorb the details if you don’t know why they are being given to you. Imagine try- ing to put together a complicated jigsaw puzzle without first seeing the picture of the completed puzzle. An individual piece of information means more to your readers if they know how it fits into the big picture.

Clear Communication by Design by Michelle Boulton 9 Clear Communication by Design (Outline) Use an Outline

1. How does good design improve communication? Take a good look at your document and the flow of information from beginning to end. 2. Legibility vs Readability It’s often easier to start with an outline to guide 3. Typography you as you physically reorganize the document. • choice of typeface • type size Your outline can later become your table of • line length • line spacing contents. • alignment • letter spacing • letter case • typestyle • contrast

4. Content and Structure Provide bite-sized pieces Break your document up into manageable sec- tions and use descriptive headings and subheads. Headings like “Introduction” or “Background” aren’t especially helpful.

Bulleted lists Bulleted and numbered lists greatly enhance read- ability due to their conciseness and the additional white space that results from their use.

Clear Communication by Design by Michelle Boulton 10 Tables Six Rules of Plain Figures Tables often convey information more quickly and 1. Present figures in some logical order. clearly than text in narrative form. . . 2. Provide focus. 3. Keep figures to be compared close together. 1. List numbers in a logical order; often that will be smallest to largest, or vice versa. This helps 4. Round off figures for clarity. the reader make comparisons and identify pat- 5. Provide a summary. terns, thus giving more meaning to the num- 6. Use Layout to guide the eye. bers you are presenting. From “ Problem of Numeracy” by A.S..Ehrenberg 2. You can help readers better understand what your numbers mean by providing averages, totals, and percentages, which help focus atten- tion on the message behind the numbers you are presenting.

- Averages provide a point of comparison. - Totals provide the big picture. - Percentages (perhaps the least important of the three) provide a sense of proportion.

3. When you want readers to compare numbers, keep them close together on the page. Keep in mind that it is easier to compare numbers in columns than in rows. Numbers in columns are also easier to add and subtract in your head.

4. Rounding is a simple technique that makes numbers a lot easier to understand, compare, and remember.

5. Providing a written summary in the text gives you an opportunity to direct the reader’s atten- tion to patterns or exceptions. They help you explain why you think the numbers you are presenting are worth paying attention to.

Clear Communication by Design by Michelle Boulton 11 Successful Table Design Successful Table Design Poor layout accounts for confusion with tables e ‘KISS’ rule applies here— keep tables simple and uncluttered. more often than difficult material. • Don’t use gridlines. Gridlines add clutter without adding informa- • Right-align numbers in columns. tion, and vertical lines stop the eye from scanning • Single-space rows. easily across rows. If you are using the ‘dreaded grid,’ your table will already be busy before you • Place tables close to explanatory text. even add the numbers or text. • Only make tables as wide as they need to be. Right-align columns of numbers. When you have numbers of varying , right aligning them makes it easier to compare them. It is also helpful to order them from largest to smallest, or vice versa.

Single-space rows to make comparisons easier. For long tables, because we are not using grid- lines, adding a blank line every 4 or 5 lines helps readers keep their place. Alternatively, using light row shading (about 10%) for every alternate row can do the same thing and is not as disruptive as gridlines.

Place tables close to explanatory text. Turning pages back and forth makes it more difficult for the reader to refer to one while reading the other.

Only make tables as wide as they need to be. Instead of stretching tables across a page, consider wrapping the surrounding text around the table. But, make sure to leave lots of white space around the table.

Clear Communication by Design by Michelle Boulton 12 Illustration & Graphics

Edward Tufte is very well known for his Graphics on information design and as a pioneer in the

At their best, graphics are instruments for reasoning field of displaying data. about quantitative information. O the most effective way to describe, explore, and summarize a set of numbers—even a very large set—is to look at pictures Often, visuals are the elements that will draw of those numbers. Furthermore, of all methods for a reader into a document, make them easy to analyzing and communicating statistical information, well-designed data graphics are usually the simplest and understand, even out of context. If they are com- at the same time the most powerful. pelling, they will encourage the reader to venture ~ Edward R. Tue deeper into the document. The combined use of visual and text is said to be 6 times more effective than the use of text-based communication alone. Visual aids are incredibly powerful tools for enhancing both understanding and knowledge retention. Visuals can express ideas and convey information in ways that words alone cannot. They communi- cate by • showing how things look (drawings, photo- graphs, maps), • representing numbers and quantities (tables and graphs), • depicting relationships (flowcharts, schematic diagrams), and • making abstract concepts and relationships concrete (organizational charts). They also highlight the most important informa- tion and emphasize key concepts.

Clear Communication by Design by Michelle Boulton 13 Studies have shown that people “only remember What People Can Remember 10 percent of what they hear, 30 percent of what 80% they read, but about 80 percent of what they see and do.” (Educational psychologist Jerome Bruner 60% of New York University) 40% So, whenever you can express information using a compelling visual element such as a graph, 20% flowchart, timeline, or other illustration, the information will be much easier for your readers 0% Hear Read See & Do to absorb and retain.

Selecting Visuals When you are selecting or developing visuals, consider your purpose and your audience care- fully. For example, you would need different visuals for an automobile user guide than you would for the mechanic who might be repairing the same vehicle. Many of the qualities of good — clarity, simplicity, conciseness, and directness — are equally important in the creation and use of visuals. Even the best visuals only enhance or support the Percentage of Chart that text. The writing must supply the context for the Resembles Pac Man visual. Whenever possible, consider graphic require- ments (or opportunities) before you begin writ- ing, or at least early in the structural editing phase.

Resembles Pac Man Charts and Graphs Does not resemble Pac Man We talked briefly about some of the different kinds of visuals that might be employed in a document: drawings, photographs, maps, tables, graphs, flowcharts, schematic diagrams . . . (to name a few). Editors often don’t have influence over many of the visuals that can be used to complement the text in a document. But, we are often called upon to review and improve tables and graphs, so I want to take a few minutes to talk about ways to use those specific visuals more effectively.

Clear Communication by Design by Michelle Boulton 14 A favourite effect with graphs is 3-. It looks cool, Avoid Special Effects but makes the graphs significantly harder to read Special effects like 3-D draw attention to the design rather and interpret. than the content and oen distort the data.

Chart 1 Chart 2 When designing a graph, use the plainest design 30.0 30.0 possible. Excel, for example, offers dozens of stan-

22.5 22.5 dard graph variations, but only a handful of those 15.0

15.0 7.5 are simple enough to communicate with ease.

0 7.5 Most effective: Straightforward line, bar, and

0 column graphs.

Bar or column? Percentage of Chart that Resembles Pac Man

80

60 When a bar graph is placed horizontally (instead 40 of in columns), they are 20

0 Resembles Does not • easier to label and Pac Man resemble Percentage of Chart that Resembles Pac Man Pac Man • more bars can be shown going down the side Resembles Pac Man of a graph than across its base.

Does not resemble Pac Man Quick Tip: arrange bars (or columns) in order of size to make comparisons easier. 0 20 40 60 80

Line graphs Line graphs are great for showing changes in a series, usually over time. They illustrate flow (ups and downs) very well. They are easy to create, straightforward, and quite elegant.

How People Rated this Presentation Pie charts People seem to love pie charts, but they are not really very effective at communicating informa- tion. Most people think linearly, yet pie charts ask us to compare quantities in a circle. Specialists in visual literacy and many statisticians

Terrible avoid them. Okay Pretty good Excellent Best presentation they’ve seen all day

Clear Communication by Design by Michelle Boulton 15 Checklist Checklist • Place visuals as close to the explanatory text as ✔ Place visuals close to explanatory text. possible. ✔ Give visuals a concise title. • Give visuals a concise title that clearly de- ✔ Number figures and tables and refer to the illustrations by their numbers in the text. scribes what the reader is looking at and why it ✔ Keep visuals simple. has been included. ✔ Allow adequate white space around (and • If your document has a number of figures and within) the graphic. tables, number them and refer to the illustra- tions by their numbers in the text. • Keep visuals simple and only include informa- tion that is relevant to the discussion in the text. If possible, remove unnecessary labels, arrows, boxes, etc. • Allow adequate white space around (and within) the graphic.

White space Use white space effectively. Generous use of white space on the page enhances readability, helps to focus attention on impor- Arrangement tant points, and lightens the overall look of the on the page document. Margins The white space around the text, the margins, should be looked at as a funnel drawing the reader into the document. If you think of it that way, you realize that margins should be as wide as “Design is as much an act of spacing as an act of possible. marking. e typographer’s art concerns not Wide margins are not considered good economy only the positive grain of letterforms, but the (or ecology), but they certainly make the end negative gaps between and around them.” product more effective. This is not relevant for ~ Ellen Lupton digital files.

Clear Communication by Design by Michelle Boulton 16 Optical Centre Optical Centre

Mathematical Centre Optical Centre The optical centre is the point that attracts the viewer’s eye unless other visual elements pull the eye elsewhere. It is not the same as the geometric centre. It is a little higher and slightly to the left of the geometric centre of the page. Because we read from left to right and from the top of the page to the bottom, our eyes naturally move diagonally from the top left of a page to the bottom right. You should balance the elements of your page around the optical centre and not the geometric centre. Factors that Influence Balance Visual balance results from 2 major factors: Weight – The perceived weight of a visual element is a measure of how much things on the page attract your eye. Direction – The perceived direction of the visual is the direction we think an element should be moving if it was given a chance to move based on the forces acting on it. Factors that Influence Weight Size – Larger objects obviously appear heavier. Shape – Irregular shapes appear lighter than regular shapes. Density – Multiple small objects can balance one larger one. Colour – High intensity colours, like red, appear heavier than low intensity colours, like yellow. Location on the page – Visual weight increases the farther an object is from the optical centre; objects at the top appear heavier; objects on the right appear heavier. Orientation – Vertical objects appear heavier than horizontal items. You achieve balance when you place items of combined equal weight on either side of the opti- cal centre. Place the focal point close to or above the optical centre. This has implications when you plan margins.

Clear Communication by Design by Michelle Boulton 17 Historical schemes Many medieval pages were said to have “perfect harmony” between the text block and the margin. THis balance existed long before the computers, printing presses, or even a defined unit of measurement. Each of the facing pages on the top slide is divided into ninths. The outside margins are two-ninths, which is twice the size of the inside margins, one- ninth. The bottom margins are also two-ninths, which is twice the size of the top margins. And the height of the text area equals the page width. This system is still as valid, beautiful, and elegant today as it ever was for the medieval scribes. The End

Clear Communication by Design by Michelle Boulton 18