You stand in the front looking out at glazed-over eyes. Behind you, your PowerPoint slides. You are an instructor in a big auditorium or a boss at a meeting. Perhaps the eyes before you are not fogged at all, but riveted to little glowing rectangles held in hands.
In Anglo-American culture, for the most part, we have considered it rude to look away when someone is speaking to us. However, in classrooms, workshops, and meetings, we now often look away, especially if we are part of a large audience.
I am no exception. I too have found myself at times with downcast eyes at gatherings, especially if the presentation was of information I already knew. Or if the speaker’s presentation was basically a reading of the slides, I’d read the slides, which was faster, of course, than listening to the speaker. Once I “got” it, that is, the information, I would stop listening to the speaker. So, alas, I too would then surf on my phone or laptop, work-related surfing perhaps, but rude nonetheless. And I am not a millenial.
Pay attention, pay attention, please. Isn’t this what we all want when we are speaking to someone or many someones? Whether we are whispering to our lover in bed, telling our parents we are leaving home, or describing our big idea to co-workers.
So now, like someone prompted by the New York City MTA’s “Courtesy Counts, Manners Make a Better Ride” signs on the subwaywho gives up their seat to an older or disabled person, I try to give my undivided attention to the speaker, no matter what. I don’t even put my cell phone in plain sight on the conference table anymore. Awake at work.
MTA subway poster about manspreading. Part of New York’s Transit Courtesy Campaign
MTA subway poster about personal grooming
MTA subway poster about offering a seat to pregant, disabled, or elderly people
What About the Other Side? The Speaker? The Slides?
An audience wishing to be elsewhere. It is so obvious when you the speaker have not connected with those folks in front of you. This affects your energy and sometimes the information trying to be transmitted. No wonder so many people fear public speaking more than death.
To the average person, if you have to go to a funeral, you’re better off in the casket than doing the eulogy. — Jerry Seinfeld
However, many of us now are asked to give presentations or teach workshops. For the sake of career and public reputation, we say, “yes, sure, I’ll explain the quarterly report to the board next week, I’ll teach that class on HTML for beginners.” And then …
And Then We Go to Make Our Slides
True or False? Most of the slide presentations you’ve seen in the last year have not been stellar and many have been boring or unreadable. And often these slides did not help the speakers connect to their audiences. And it is not just a matter of making your text large enough or using just so many bullets.
But before there are slides, there is you, the speaker. Presentation is about presenting first of all yourself. If you could read only one book about presenting, may I suggest Garr Reynolds’ The Naked Presenter: Delivering Powerful Presentatins With or Without Slides.
Tell me and I forget. Teach me and I remember. Involve me and I learn. — Garr Reynolds in the The Naked Presenter
How do we create and use slides that help us wake up our audience?
How do we keep folks awake and engaged in a way that creates better listeners and speakers of us all? That creates better meetings? Better teaching sessions? Better brainstorming events?
I don’t think we should feel that because our tools have become more advanced, we are more advanced. The technology of the soul has not changed for a long time. Many times we use technological advances to stand in for we are more advanced. Jazz is not like that. You can come up with all the synthesizers you want. It’s still not going to be able to swing…. This music celebrates human beings and our creativity. — Wynton Marsalis quoted in Garr Reynolds’ The Naked Presenter
Yes, there are books about presentation design and your slides. They are coming up in the next blog posts.
For students to pay attention in a class, there needs to be sufficient need for that attention to be devoted to the material at hand. That is, we need to engage the students in ways that make it difficult for them to pay attention to anything else. — Chris Hakala
To Be Continued …
Including Hegel, Eisenstein, and Stein
What is a Rag? What is a Good Rag? And Why Should We Care?
Something beautiful there is about letters in words across a page. We read for the pleasure of the eyes as well as the mind’s sense of what the words mean. To know just a bit about what makes a page of text beautiful for the eyes can increase our pleasure in reading and the likelihood that our words will be read by others. A “good rag” is part of that knowing-a-bit-more.
A “rag” in typography is the uneven side of a paragraph where the text is aligned on the other side. So if the text is right-aligned, the rag is on the left side. If the text is left-aligned, the rag is on the right side. When setting type with a ragged edge, print typographers have long given attention to the shape of the rag, the goal being “a good rag.”
A good rag is one where the lines move in and out in small increments. A not-so-good rag bounces the eye back and forth from line to line creating distracting white spaces in the margin. In the two type arrangements of the Bringhurst quote above, the dramatically uneven text-line edges of the layout on the left could be called a “bad rag” as compared to the more even edges of the “good rag” on the right.
What to do with a poor rag?
The easiest thing to do is to use manual line breaks where you want them. You can also change your hyphenation rules and edit your text. If those changes fail to give you the rag you want, you can then make slight adjustments in tracking, kerning, column width, page margins, or point sizes. Like many other typographic skills, the ability to do these things well requires time spent learning the techniques and time spent in practice.
One important variable in creating a good rag is line length. By changing line length, we can learn the best line length for specific typefaces and font sizes to achieve a decent rag. For optimum readability, typographers have long suggested that one limit line length to 40-80 characters, including spaces, 65 characters being ideal. The longer the line, the more distracting is a bad rag.
Software applications such as InDesign allow the user to make all these adjustments over large blocks of text, but other applications may not. For example, the paragraphs of this blog may be examples of not-so-great rags as this application (WordPress) does not allow me to work on the rag, and the look of the rag will depend on your browser and on the device you are using (tablet, phone, monitor). As those interested delve further into using CSS with WordPress, we should see better rags in blogs.
The same typography skills needed to understand and set good rags are used in setting good justified text. For those interested in learning to master these typography skills, a good resource is Lynda.com. For me, the book, magazine, and e-book courses taught by Nigel French have been especially helpful.
Widows and Orphans
Widows are short last lines of a paragraph. A widow could be one word, the end of a hyphenated word, or two/three words left alone on the last line of a paragraph. A widow generally leaves too much white space at the end of a line, making it look like an extra blank line. The wider the line and the tighter the paragraph spacing, the more distracting the widow. Orphans are short top lines of a page or column and are even more distracting to the reader.
Widows and orphans have long been considered typography “crimes” resulting from laziness of the typesetter. However, today, it is often a matter of the writer having no idea that these are even problems. Also, there is some debate among typographers about the definition of these terms. See The Top 10 Typography Crimes.
As we notice more details of what makes a beautifully set book or magazine article, we will begin to set our own pages with those details in mind. And we begin to type out more beautiful pages, which mean pages easier to read. With e-books, responsive design, and everyone having to typeset their own resumes, annual reports and other documents, the ideal of a good rag with no widows and no orphans seems to have gone underground. But only temporarily. Just as good typeface options have come to the web (for more than a few years there was almost nothing much except Arial and Times New Roman). So too will we see more people paying attention to the centuries of craft and skill and knowledge of setting a good page.
To Know More
“A widow is considered poor typography because it leaves too much white space between paragraphs or at the bottom of a page. This interrupts the reader’s eye and diminishes readability. Fix them by reworking the rag or editing the copy.” To read more, see Strizverhttp,Ilene: Rags, Widows & Orphans/Fontology. Accessed June 25, 2015.
“Many people, designers included, think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there. But there is much more to achieving good typography and it’s in the details that designers often neglect.” To read more, see Carusone, Antonio: Simple Ways to Improve Typography in Your Designs. Accessed 6/25/2015. for web issues and CSS written though in 2010.
“Most everyone agrees that a widow is a short last line of a paragraph. According to what I learned as a lad, a widow becomes a problem when it’s so short that it creates the visual impression of a blank line between paragraphs. The wider the line length (also called measure), the more impact a very short widow can have. A hyphenated widow — in which the last line of a paragraph is a morsel of a hyphenated word — is a particularly egregious subspecies.” To read more see Felici, James: How to Solve Typographic Widows and Orphans/Creative Pro.com. 1/18/2010. Accessed 6/25/2015.
Do you ever feel today the call of the non-digital? A desire for cunieform? A hankering to learn the Tibetan Naxi Dongba script? A regret that your handwriting has gone illegible?
This summer, I have been dedicating my non-earning-a-living days to learning HTML and CSS, the pixel world of the web. It is a world of grids and boxes-within-boxes and automatic wraps. Nice. Elegant.
And complicated like a m#$&%*er once you get beyond the basics. Not that I do not love the logic of this; I do. The detective part of my brain finds it very satisfying. And it goes well with my love of Photoshop, InDesign, Illustrator, and all things interactive.
And then I remember that the tail
of a Garamond or Times New Roman letter calls to mind the calligraphy brush. Serif letters are partly about the soft or hard landings of letter strokes. These landings link to the adjacent letterforms and are still believed by many to make for easier reading than sans-serif letters.
the more pixels I count during my HTML/CSS days, the more I want to escape the box confinement. The digital world we inhabit today was not born of rounded shapes, body shapes, cell shapes, or star shapes. I sometimes miss those shapes shut out of my screen world. Nature is not square.
The Moving Line : Handwriting, Drawing & Brushwork as Embodied Practice
And so on July 25, I registered once again for aday working with Barbara Bash, well-known Big Brush calligrapher and Buddhist teacher. A remedial course for those of us still wanting to write, draw, or paint by hand.
Even though we love the digerati world, there can be something missing for us in days when we work only on digital devices. That something is working with the hand and pencil, hand and pen, hand and brush. I am not new to this path, having studied off and on with Bash since 2005, but I do forget and my handwriting is still illegible.
When Chogyam Trungpa Rinpoche once said, ‘It is possible to make a brushstroke that expresses one’s whole life’ I took that to mean a very LARGE brushstroke. This was the beginning of my Big Brush practice. — Barbara Bash: Big Brush The Journey
This post is an introduction to alignment typesetting and an encouragement to look at the details of alignment choices out in the world. Regarding text alignment, there is left aligned, centered, right aligned, and justified text.
In left-aligned text, the words are in rows one right below the other on the left side of the page, and the right side of the text is uneven. This uneveness of non-aligned text is called a “rag.”
In right-aligned text, the words line up on the right side of the page, and the left side is uneven.
♦ left aligned = flush left = ragged right = rag right
♦ right aligned = flush right = ragged left = rag left
In center-aligned text, text is equidistant from a center point.
In justified text, all the lines of type are the same length, so text on both the left side and right side are aligned.
In the West, most documents we write (type) today are left aligned, and we let our software take care of the rag. Word-spacing and letter-spacing are done automatically for optimal readability, no matter our software—Adobe InDesign, Quark, MS Word, or other writing software application.
You can chose basic alignment settings in word processing applications, and there are more alignment options in layout applications such as InDesign.
Text Alignment and White Space
Although most of your work will be with left-aligned text, there are times when a right-aligned block of text can serve you well. For example, when an image is placed on the right side of a page, right-aligned type anchors text and image. In the first example below, there is a gap between the text and the image, leading to “trapped white space.” In the second example, the text is right-aligned, freeing up the white space and connecting type to image.
There are also times when right-aligned text balances an image on the left or adds a dynamic alternative to the predictability of left-aligned text. This is often seen in business card designs.
Love the look of justified text? Just Hit the Justify Button?
Justified text is what we are used to seeing in our newspapers, novels, and text books. However, these printed materials have been typeset by printers or designers, and there is skill involved. Yes, a quickie justify—just hit the justify button—is possible, even in MS Word, and sometimes this will look just fine. However, automatic justification can result in some problems for your readers. See the three versions of justified text below of the quote from Designing with Type by James Craig and William Bevington, page 99.
Problem #1: You could end up with words and letters too tightly packed together resulting in text that is hard to read.
Problem #2: You could end up with distracting variations in word-spacing or letter-spacing or “rivers” of white space making distracting columns running through the text, which can make for ugly and difficult-to-read pages.
Rivers are more likely to happen when you do not allow text to be hyphenated, when the line length produces a narrow column, and when word-spacing (tracking) and letter-spacing (kerning) are not adjusted. For more examples, google “rivers in justified text.”
For those working with Adobe InDesign who want to know how to create well-justified text in long documents, see Designing a Book by Nigel French on Lynda.com. The entire video book course (4–5 hours) is well worth the time spent.
The three most relevant movies to this post are (1) Chapter 3: Creating and Applying Paragraph Styles, (2) Chapter 4: Styling the Text, and (3) Chapter 6: Finessing the Text.
Proper justified type takes time to master, but it is worth the effort to learn more about word-spacing, letter-spacing, orphans, widows, and other type elements if you want to craft beautiful readable typography.
Before I spent time learning from Nigel French how to set justification parameters within Adobe InDesign, I never used justified text for long documents. I had seen too many bad examples of sloppy justified text. I would, however, justify short paragraphs of text, but this could be time-consuming. In what was an agonizingly slow process, I have manually changed word-spacing, font size, and letter-spacing, and sometimes word choice for each line of text to get typography that worked. All to prevent the rivers or distracting white space between words.
In the HPV poster below (created in Adobe Illustrator), the justified text was done manually by changing the length of the lines, color, font size, word choice, letter-spacing (kerning), and word-spacing (tracking) to eliminate rivers and wide gaps between words.
Lynda.com is a great online resource for learning about graphic design and typography, whether you are interested in learning the principles of design or honing your technical skills in various applications, including Adobe InDesign and MS Word.
While this is a subscription service, there are courses free without a subscription and there is also often a free month trial subscription where all the video courses would be available to you.
Two Short Free Online Lynda.com Videos on Kerning and Tracking
If you work with Adobe InDesign every day, this blog post may not interest you, especially if you are part of thedesign gentry offended by a question that contains both “design” and “Microsoft Word” coming from the commons. Alas, there is much to lament about MS WORD, especially the make-more-workproblems. However…
While it does not have the elegance and workhorse qualities of InDesign, one can still get a very well-designed page out of MS Word. A word processing application that now includes some ability to control the look of the page, Word is probably the most popular software for writing documents, used by editors, bricklayers, doctors, waiters, shoe shine entrepreneurs, kids in school, and writers (and are we not ALL writers now?) Some designers may craft their letters in InDesign, but many of us still use Word for letters, design briefs, agendas, teaching outlines, etc.
Are there design strategies that don’t work well in Word, such as grids, text wrap, rulers, and web writing? Yes, but since so many of us all over the world are using Word as our frequent go-to writing tool, why not use it to the peak of what it is capable and get our words in Word to look better than what the default offers us?
Line Spacing (aka Leading) in Word
In typography, leading (pronounced ledding, rhymes with heading)refers to the distance between the baseline of one line of type and the next. The term comes from the days when typesetters placed by hand thin strips of lead into the presses to increase the vertical distance between lines of type. The term is still used in page layout software such as InDesign. In word processing software, it is usually called line spacing.
For a good annotated image of what metal leading looks like, see James Felici’s photograph where the strip of added lead is flagged in yellow. His article, Just Say “No” to Automatic Leading, is a an excellent explanation of why to eschew the default leading suggestion. Also, if my explanations here are not clear or you want more information, a quick reading of his article may clarify things for you.
Leading is generally measured from baseline to baseline and expressed in points. Changing the leading affects appearance and readability. For example, lines of type jammed closely together or too far apart can be difficult to read, and typefaces with long ascenders and descenders generally read better with increased leading.
So, even if it is just a quick snail-mail thank you letter to your grandmother, consider paying attention to leading in order to improve readability of your message. Sometimes the default will work fine. Other times, you may want manual control. To get manual control of line spacing in Word, go to the drop-down menu for Format > Paragraph > Indents and Spacing, and you will find the panel where you can control line spacing and other parameters.
If you are changing the leading for text already in the Word document, remember to select (highlight) all the text that you want changed.
Change the line spacing to “Exactly” and determine the point size for leading. A good start is to add 2 points to the text size. So if your text size is 11, try setting the “Line Spacing” at 13 or 14 points.
The dialogue boxes for “Spacing” indicate how much white space will be “Before” the paragraph and how much space “After.” A good start for paragraphs set at 11 points and not indented is to enter zero for “Before” the start of the paragraph and 6 points for “After” the paragraph.
If you are indenting paragraphs, you may want to also set “After” to zero.
Your choice of typeface family, letter spacing, text alignment, background color, text color, line length, and written copy—all of these choices will affect the line spacing requirements. While you can find mathematical rules to follow (typesetters, printers, and writers have been looking at these issues since before the 1400s and Gutenberg’s press), setting good line spacing (the best for readability) is matter of aesthetic judgement and personal reading preferences, based on who our potential readers will be as well as history: what we know about how people of different times, cultures, and alphabets read texts.
Craig, James. Basic Typography: A Design Manual. Formerly Phototypesetting: A Design Manual. New York: Watson-Guptill, 1990.
Craig, James and Irene Korol Scala. Designing with Type: A Basic Course in Typography (5th ed). New York Watson-Guptill, 2006.
Most readers of English have no trouble reading the HOT BEER sign above, even though the letters are all uppercase, generally considered a typography hazard (a practice that risks confusing, alienating, or losing readers). So right away, this HOT BEER sign in this post is an alert that there are many great exceptions to the all-capitalization typography hazard I am writing about in this post.
The Bouma Shape versus ALL CAPS
Named after Dutch psychologist Herman Bouma, the term “bouma shape” was first used in 1997 by Paul Saenger (Space between Words: The Origins of Silent Reading) to describe the shape of a word in multicase letters. The term is still used by typographers and graphic designers as a useful description relating to letterform differences.  The ascenders and descenders of lowercase letters create varied shapes for different words, whereas words in all caps have very little shape distinction since they are all basically rectangles.
Using all caps for headlines, subject lines, and emphasis is a long-established print convention that also works for electronic text. Along with words in bold, words in ALL CAPS call attention to themselves and are often the most important words we want to write, and in addition to color and size, are a way to direct the reader’s eyes to the text we want them to see first or to remember.
So what is the hazard?
Using all caps for whole sentences these days can be read as the equivalent of shouting. For example, something like PLEASE SEND IN YOUR TIMESHEET BEFORE YOU GO HOME can be read as an irritated command as opposed to a simple request, especially when sent in an email. For a brief history of this issue, see Netiquette of Capitalization: How Caps Became Code for Yelling by Alice Robb. 
Using all caps for whole paragraphs can reduce readability, depending, of course, on who the readers are, what the message is intended to accomplish, and how many paragraphs are going to be set. Using all caps for whole paragraphs can also make for some slow reading, and many proofreaders will tell you that text set in uppercase is harder to proofread. So it is no surprise that today we don’t see many newspapers or books set in all uppercase letters. Typographers used to explain this by saying that it is the bouma shape of words that allows for faster reading. However, there are other factors to consider.
Most readers spend the bulk of their time reading multicase text and are therefore more proficient at it. When readers are forced to read large quantities of uppercase text, their reading speed will eventually increase to the rate of lowercase text. Even text oriented as if you were seeing it in a mirror will quickly increase in reading speed with practice (Kolers & Perkins, 1975). — Kevin Larson 
Even so, since readers today read mostly multicase text, for typographers (and writers) setting type, it still makes sense to use all caps sparingly, wisely, and interestingly if we wish to keep our readers. And yet, of the 17 words in the subscribers sign below, 15 are in all caps. Now why does this work? Partly due to good contrast in size and choice of different typefaces. Hm, breaking the oft-quoted type rule of “use only one or two different typeface families.” Nice.
Bouma Shape and How We Recognize Words
The “bouma-shape” model has never been scientifically linked to how readers actually read text. And recently (the last 20 years), cognitive and neurology researchers have rejected the bouma model of word recognition in favor of the parallel letter recognition model, which stresses that the letters within a word are recognized simultaneously, and this is what allows us to recognize the words. This is the theory of word recognition that is most accepted today by psychologists.
For an introduction to the discussion of these issues, including description of eye-movement studies and neural signal processing of reading, see the work of Dehaene, Enneson, Larson, and Sacks, listed below. Much of this work relates to the need to understand the science of how we read and the designing of typefaces, especially for readability and legibility of screen text.
Unpredictable Use of All Caps
In the cat poster shown here, the words in ALL CAPS attract less attention than the bold lowercase due, of course, to larger weight and size of the lowercase letters.
Not Exactly Bouma Evidence. However …
Aoccdring to rscheesrch at an Elingsh uinervtisy, it drosn’t mttaer in waht oerdr the lteters in a wrod are. Thew olny oprmoatnt tihng is taht frist and lst ltteres are in the rghit pacle. The rset can be a mses and you can siltl raed it wouthit a pobrelm. This id bcuseae we don’t raed erveuy lteetr individually, but as parts of familiar wrod shapes. — Alex W. White. Thinking in Type. 2005 
When grapefruits were 5 cents and oranges a penny, grocers hand printed their own signs and they did well. They just wrote: “APPLES DELICIOUS 4 LB 25¢” and they sold apples. Union Leader, 7-Up, Beech Nut, Copenhagen Cigars, and Model Tobacco (the advertisers) thought the letterforms were just fine, even though the advertisers had their own signage typeset by printers.
In this Lincoln, Nebraska photo from 1942, the handwritten “A” appears five times, similar each time but not exactly the same, but readers know this is an “a” regardless of the slight variations.
Letterforms are the graphic representation of letters of the alphabet (including punctuation and other symbols), either as hand written or in a particular typeface. Whether typeset by a printer or handwritten by a grocer, letterforms are recognizable to citizens of the same culture, e.g., Westerners can identify the letters of the Latin alphabet (with or without diacritical marks), Russians, the Cyrillic alphabet, etc. The alphabet letterforms below are formed by the tops of buildings and the sky.
A typeface is a design for a set of characters (letterforms). Each character is also called a glyph. The glyphs of a typeface include the letters of the alphabet, numbers, punctuation marks, and symbols. Frequently used typefaces today are Times Roman and Arial, to name only two. The typeface represents one aspect of a font: the font also includes digital perimeters for use on screens and other digital devices.
There are two general categories of typeface families (classifications): serif and sans serif. Serif typefaces have flourishes (cross-lines or decorative marks) at the ends of the letter strokes. These typefaces were based on early calligraphy and stonecutter lettering. Times Roman, Garamond, Caslon, and Minion Pro are examples of serif typefaces. Sans serif typefaces do not have these flourishes. Helvetica, Arial, Verdana, and Corbel are examples of sans serif typefaces.
Many designers also separate out Script Typefaces and Display Typefaces as separate classifications. Script typefaces such as Beth Hand and Daniel are based generally on handwriting and are used most often for things like wedding invitations or diploma documents. Display typefaces such as Fashion Victim and Braggadocio are generally too hard to read when used as body text, but serve to focus attention in headlines and poster titles.
A typeface for text such as Helvetica is actually a family of typefaces composed of the typefaces Helvetica Medium, Helvetica Italic, Helvetica Bold, etc. Most typeface families are composed of a Regular (used for body text), an Italic (used for emphasis), and a Bold (also used for emphasis).
Although the terms “typeface” and “font” are used interchangeably today, they are not strictly speaking the same thing. After a typeface is designed to work in print, type designers today then create the digital paradigms so that the typeface can be used in digital form, i.e., in bytes. The skill involved in creating beautiful typefaces that allow comprehension of words can be compared to fiddle and violin makers, skill levels and sound levels and aesthetic levels vary with skill and love of the task. And even though there are thousands of beautiful typefaces in use today, still there are those, especially large corporations or foundations, that want a typeface designed especially for them. Doyald Young is one of those designers celebrated for the individual typefaces he has designed for specific businesses and institutions that have requested them. His love of this work and some indication of the skill involved can be seen in the film on Lynda.com listed below.
In addition to understanding the basic difference between serif and sans serif typefaces, another useful thing to know is the parts of a letter. Often when we design a page, we need to be mindful not only of the size of the font (9 points vs. 14 points), we need to pay attention to the spacing between the lines (called line height or leading). Baseline, x-height, ascender, descender: these are a few things to know that can help in making those lines-on-the-page decisions.
To learn to draw a letter well takes a lot of time. I’ve been drawing letters since 1948. And I’m still learning how to draw. Jan Van Krimpen, one of my great heroes, he says, “I do not want to draw a beautiful letter.I want to draw a good letter.”Now I think that good letters are beautiful.
I love to draw letters. I found out that I did. It pleased me.I think it goes back to basic personality.For instance I have a love of detail.Despite the fact I call myself a logotype designer teacher,I’m delighted to say that my life revolves around typography.It permeates our lives, it permeates our culture.Our history is written in typography.
And it’s just something I love to do.I’m happiest when I’m at the board with a pencil.
As drawing, painting, theater, dance, and music classes have disappeared from many American schools and so too from our homework-help sessions, some parents wonder where our children will begin to learn how and why to make something beautiful and meaningful. Everyone is a scientist/engineer now, everyone is a writer, everyone is a designer. No training, no study, no history, no apprenticeship: Is that what D.I.Y. (Do It Yourself or Design It Yourself) is about?
If we read Ellen Lupton, curator of contemporary design at Cooper-Hewitt, National Design Museum in New York City and director of the Graphic Design MFA program at Maryland Institute College of Art (MICA) in Baltimore, perhaps we would not worry so much. And we would have a better idea of why encouraging more D.I.Y can ultimately produce stronger design (or other) work throughout our society.
We are in a new phase of culture now, where people have direct access to powerful tools—not just design tools, but also to video, animation, music, podcasting and blogging. People are actively engaged with media production across the board, whether we like it or not.By encouraging the public to use design tools intelligently, we will ultimately increase the general understanding of professional work, as well as raise the level of design across society. My students’ book is one small contribution to a much bigger movement. (1) — Ellen Lupton
This D.I.Y. book is a collection of “tools for thinking and making that aim to advance design as a common language” created by MICA students and faculty. (2) With this and her other D.I.Y. books, Lupton is a spokesperson for the Design-It Yourself (or Do-It-Yourself) Movements, closely aligned to the Maker Movement, which started with exuberance in the mid 2000s and continues through Maker Faires in one city/town after another.
Lupon may also be the doyenne of ethical community-and-designer collaborations. I base this on looking at some of the MICA collaborative projects like Baltimarket: Fresh Food in Urban Food Deserts in my home city and reading her book on graphic design brainstorming. (3) Her work does seem different from some recent MFA design project discussions that seemed to have, unfortunately, a patina of mental colonialism, as in the western artist drawing up designs that are then made in non-western countries, as if those countries did not have artists and designers themselves or as if they needed an update (i.e., murals or posters) on how to appreciate the importance of clean water. However, in Lupton’s work with her students and her communities in Baltimore, I do not see this attitude. I see respect for opinions and ideas of the collaborators. (2) Worth a deeper look.
So, if you are building your own website, designing your own business card, or constructing your own robot, you are part of this D.I.Y. movement, brought about by the recent recession, the rising value of the handmade, and other conditions to be eventually described in more detail by anthropologists, economists, and historians. As we see that we can no longer buy all the beautiful glittery things we desire and sometimes the tools we need to survive, we are beginning (again) to make things ourselves, and we are finding this very satisfying.
But what put in us this desire for glittery things in the first place? Cultural critics and neuroscientists will have more than a few ideas about this. But I digress. The energy of the D.I.Y movement and the possibilities for diversity of mind that this could foster make me a fan. And we in the U.S. can learn a lot from what designers are doing in other countries, as they do not wait for American designers to come and design things for them. Just one example: Saki Mafundikwa’s work in Zimbabwe.
Saki Mafundikwa, graphic designer, typographer, and author of Afrikan Alphabets, (4) left a successful design career in New York to return to his home country and establish the Zimbabwe Institute of Vigital Arts (ZIVA) a design and new media training college in Harare. Design students from the U.S. also go there to study. For more about Mafundikwa and the history of Afrikan typographies, see Mafundikwa S. TED Talk: Ingenuity and Elegance in Ancient African Alphabets. (5), AIGA’s profile of Mafundikwa, and Typography + Language + Writing Systems = Afrikan Alphabets written by Ima-Abasi Okon on the website Another Afrika. To dispel the notion of a western design hegemony, it does not take much.
Mafundikwa had this D.I.Y. advice for his students, which could serve all of us, no matter our art or discipline, whether we are pursuing a vocation or career or entering the D.I.Y. world:
You wanna break the rules? Well, you gotta learn the rules first. Learn to draw like your life depends on it. (6)
I’m not visual, so do I have to draw in this workshop?
Yes I said yes you do. Yes. (7)
Writing systems vary, but a good page is not hard to recognize, whether it comes from Tang Dynasty China, the Egyptian New Kingdom or Renaissance Italy. The principles that unite these different schools of design are based on the structure and scale of the human body—the eye, the hand, and the forearm in particular—and on the invisible but no less real, no less demanding and no less sensuous anatomy of the human mind. ~ Robert Bringhurst
One afternoon at a conference for medical writers and editors, I was running a three-hour workshop on page layout and typography. We were 21 people participating. Our task was to look at what makes a “good page,” as in the Bringhurst quote at the head of this post: something not hard to recognize as good. (1) Before showing examples of page layouts based on grid systems, I gave each person six or seven shapes of colored paper and one sheet of paper with a grid of nine squares. The only direction was to place these colored shapes in some arrangement on the grid in a way that worked for the arranger. We were going to think about how a “page” looks, irrespective of any word content and to see if it was obvious—those principles of design that according to Bringhurst cut across cultures and generations.
Although more than a few participants had said they had no visual talent, and only one admitted to some formal graphic design training, when we put all the grids up on the wall, almost every grid layout was appealing and interesting in some way. There were a lot of “good pages” there. How did this happen? Intuition? Gut instinct about where to place a shape? Tradition? Did we all agree on what made a page “good” or not? Were there some grids that some believed should not make it into the “good page” category at all? And if so, what was it about them that got them relegated to the ‘not-a-good-page’ pile?
Defining a “good page” for us became less like a biochemist’s pursuit of a new vaccine and more like a knight’s quest, where the knight gets sidetracked and forgets the quest with the discovery of new wonderful things, equally as desirable as the original sought-for object. It was clear also that different people had different preferences for good/better/best page layouts. Does this mean a “good page” is subjective? And that my “good page” may not be your “good page”? Or are there rules one could follow that would help us to recognize, appreciate, and create good (or better) pages? Words like focal point, alignment, balance, and dynamic tension come to mind. We are still in the realm of no words yet on the page. First, let’s define “page.” A “page” used to mean one side of a sheet of paper in a collection of sheets, sometimes bound together in a book, magazine, or newspaper. However, today a “page” could be a screen rectangle, as in the “home page” or other “pages” of a website. In this blog, a “page” is any surface upon which one could write, draw, or project an image—a cave wall, a window pane, a quilt, a television screen.
On these various “pages” we eyeball a lot of images (and words) today—ads in our magazines, animated billboards, store displays, fashionista outfits walking by. And what we see around us does influence us, whether to copy or reject or build upon. In creating a good page from scratch (book cover, resume first page, annual report page, graffiti wall, etc.), we can use intuition. We can use what we have seen and liked. We can also use math. A grid is a simple mathematical tool for organizing space, words, images, and other elements placed on a page. A page divided into columns and rows (one type of grid) is a way to organize information so that one can determine how to place elements that carry the message we want. The page-grid ideas used today by many designers originate in older systems of aesthetics based on math and physics and can get beautifully complicated. See the Fibonacci Sequence(also known as the Golden Mean, Golden Ratio, Fibonacci Spiral, and the Greek Letter Phi) for some history.
Typography is not only verbal information but also lines of texture within a composition. These textures create rectangles of tone on the page and the relationship of the positions of these rectangles is critical to the perception of order and unity within a composition. The duality of the two roles gives the designer responsibility for both communication and composition.
The grid exercise described in the first paragraphs of this post is a looser version of the basic exercise (with various levels of restrictions) that Kimberly Elam develops in her book (course) on the grid and graphic design, Grid Systems, from which the quote above is taken. (3) The red rectangles represent blocks of text and the circle is a wild card. Spend time deep-reading through one of her exercise assignments and solutions; you may never look at text-in-a-square quite the same way again. Even a quick look through her examples of how designers have used the grid in unpredictable ways can prove enlightening no matter your level of grid-design skill.
This is not to say that in order to lay out a good page, one must follow a grid structure. Many cultures and present-day designers do not use grids in shaping their pages, and those pages would still make it into the halls of the good-page archives. But grids are a useful tool to understand and use. As for my own level of grid-design skill, I am still in the early (5) years of using the grid, especially now for white papers, grant proposals, and eBooks. Currently I am collecting interesting or odd text-in-a-square pages, whether a grid structure is obvious or not, that I see in my home city streets and elsewhere. These are so far mostly signage and posters. If you have any photos of text-in-a-square layouts in the world around you that you want to share, send and I will post them in this blog.
Bringhurst, Robert. The Elements of Typographic Style (3.2). Vancouver: Hartley & Marks. 2008: 10.
Archeological pre-historic human cliff drawing over 4000 years ago, Nakhonratchasima, Thailand. iStockPhoto. 2010.
More than ornate frill, the design of a page can make written words sing or disappear. The writer in me asks, “If something is well written, why does it need design help?” Other writers and editors ask this question too.
The designer in me replies, “Readability (the accessibility of the text) is at stake here. The design of the page (layout and typography) determines how easily a passage may be read or understood.”
It is not that writing requires design help; it is that the action of placing words on a page, aka writing, is already designing the page. Would a random pouring out of words from a bucket onto paper be graphic design? Yes. That bucket load of words would have landed in a design, but no thanks to any conscious attention by a designer. The resulting design may be pleasing to some viewers and unpleasant to others, meaningful to some but meaningless to others.
Graphic design is what we do to words so that they can be read on a page, the means by which words, images, shapes, and symbols convey meaning. By grouping like things together in agendas, nuggets of content are made. Writers indent paragraphs, capitalize words, place commas, underline phrases, give titles special treatment, and italicize quotations—all elements of graphic design.
How words are arranged on the page determines the legibility and readability of the text. The placement and visual attributes (typeface, color, size) of these words determines whether a reader will be attracted to the page at all. The “page” could be analogue or digital: housed in a Microsoft WORD document, Excel spreadsheet, tablet screen, email, e-book, or LinkedIn post.
In the Middle Ages, monks used gold leaf, color, patterns, and detailed images to create pages of beauty in illuminated manuscripts that would attract their readers, mainly at first, other monks who were studying the sacred texts. The images served another purpose: listeners who could not read would have something to look at as monks read the text to them.
Since these stories contained the essence of a culture/religion and descriptions of how to live a good life, it was important that these stories be remembered, repeated, and widely known. The images helped them remember the plot, characters, and messages of the narratives and lessons.
The image here is the Inner board page from the Gondarine Sensul, an illuminated manuscript made in the Gondarine region of Ethiopia in the 17th century. (1) This accordion book was created from a single folded strip of parchment, attached to heavy leather “boards” at each end. The original pocket-size book is now in the archives of the Walters Museum of Art in Baltimore.
As writers, we may need to create a book cover that will attract readers, craft an annual report that will get a deep read instead of a quick scan, formulate an agenda that people will actually read before a meeting, or write and design an email that will get a prompt response. To heighten the chance that our words will be understood, these two or three elements of graphic design can be good to know for creating business letters, memos, agendas, blogs, progress reports, evaluations, Web pages, résumés, informational graphics, research posters, patient brochures, slide decks, and long documents to heighten the chance that our words will be given the attention they deserve—that people will read them and not just scan them.
Like the fundamentals of music, the design principles are what one learns at the beginning of design practice and then can spend a lifetime working with—studying with great mentors and experimenting along the way. The basic design principles are the same for novice and expert designers, and writers can use them. In this post, I describe five: contrast, white space, repetition, alignment, and proximity. One of the easiest-to-read introductions to these principles is Robin Williams’ Graphic Design for Non-Designers. (2)
Contrast is about comparison, one element noticeably different from another, and it is one of the best ways to attract readers to the page and create a visual hierarchy of various text elements. There are many ways to create contrast. One can use large type and small type, a bright color and a neutral color, large blocks of text and small blocks of text, large photo and small photo, densely packed lines and widely spaced lines, a decorative typeface and a standard typeface, all caps and sentence case.
The key to effective contrast is to make the elements VERY different. To have contrast on your page, make elements very different, not just a little different. Make one element bigger, brighter, darker, or bolder than another. Subtle differences do not often work, for example, 12-point text combined with 10-point text. Make that 18-point text with 10-point text.
Like water for fish, “white space” in design is that element of the layout that is generally not noticed. That part of the page not marked by text, images, lines, or shapes, it is also called “negative space” and refers to that part of a page left blank, empty.
Writing is a visual thing. We see words. But we also see the spaces between the words, and it is in the placing of letterforms and white space that we achieve meaning in the mind of the reader. Negative spaces on pages function much like the rests in musical notation, which are as important as the notes themselves. The white space between individual words (word space) allows us to read the sentence and not have to decipher this: whitespacebetweenwords.
White space can be literally white, or, as early rough drafts of the book cover shown below, not white, but light grey. The first row shows the text needed on the cover. The second row emphasizes the shapes of negative space. Each of the three book cover versions could be said to contain just one “piece” of negative space, not counting the confined spaces within the letters O, R, A, and P. Of the three different shapes of negative space, the first draws attention to the center and appears more “organized” than the second.
The second example could be distracting as the two words in black could appear to be moving away from the center, and if those two words were placed closer to the top and bottom edges of the page, it could look like they are out of control and about to fall off the page. Since the book is about organization and order, this may not be what you want in the mind of your potential reader. The third example of negative space has the less predictable and possibly more interesting and dynamic shape. However, there is something slightly off-balance about the whole design so it might require more work to both keep the interesting negative shape and also achieve a balanced look to the page.
Our eyes like patterns and rhythms, which create unity and add visual appeal. Repeated visual elements—a line, a logo, a color, a typeface—all of these are pleasing to us on a page and provide consistency in multi-page documents. Bold headings, numbers lists, and quotations in italics are repetitive visual elements used daily by many writers.
In the list of Five Design Principles shown here, I used the same amount of white space between each category, the same red color for letters and bullets, and the same indent spacing of all bullets, and also used left alignment of all elements except the title. However, what a relief that the line lengths are different. Otherwise, all this visual consistency could become annoying. However, the repeated elements order the parts and make it easy to see the parallel structure and main ideas. Understanding this design principle can be especially useful at a time when we are all streamlining our texts for blogs, emails, tweets, and web pages. Repetition of design elements can help eliminate unnecessary words by relying upon structure to convey some of the meaning.
Use repetition in a layout to draw readers to your text,speed comprehension, and provide unity for an entire document or project. For example, use the same color scheme and typeface for business card, stationery letterhead, web page, and annual report, which will go a long way toward establishing an integrated and positive business identity.
Alignment is about providing a sense of order to your page when you want that, as opposed to the design-equivalent of the messy-desk effect, ie, old coffee cups, newspapers, open books, sticky notes, and pens scattered around. Giving each item a visual relationship with something else (aligning every element to at least one other element) will help provide strength, visual pleasure, and logic to a page. Aligned items are attractive to the eye and help the reader to navigate though the text. Align what you can and with intention.
This strategy can be effective even for an outline contained in an email message. You can greatly increase readability just by using the bullet/number icons on the formatting option toolbar. Usually these icons can be found on a toolbar at the bottom of your email “compose” message screen. This will align all the text, not just the first bullet or number item, and you will have something much easier on the eye and hence more likely to be read.
Items relating to each other should be placed physically near one another and apart from unrelated Items. Reduce clutter by treating grouped items as one unit. In the two business cards shown here, the one on the left looks cluttered, and items are placed in no particular order. By grouping together the name of the restaurant and the type of food and separating that group from the location information, the card becomes easier to read and more appealing to the eye. Editing the text also helps.
When making design decisions, whether made while writing the text or when the text is completed, consider starting with the proximity idea. Once you know what “bits” of information groups you have, it can be easier to make decisions about contrast, repetition, etc.
The guides for creating beautiful pages and beautiful lettering have been in the world for centuries. Like all arts, graphic design and typography deserve time devoted to study and practice, but, like hot pepper and salt in a chocolate sauce, just one or two good spices can change the whole dish. Notice the exploding world of graphic design savvy all around you. Desktop publishing, color printers for home and office, and the ability to upload pages to the Internet have encouraged much experimentation. Some of this is blatantly awful, but there is much that is truly beautiful. You can borrow some of these ideas, as great designers have always done, to design elegant page layouts—whether web pages, business cards, annual reports, agendas, or article proposals—in the service of meaning.