Send the link below via email or IMCopy
Present to your audienceStart remote presentation
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Document Design, Color, and Typography
Transcript of Document Design, Color, and Typography
Designing Your Documents
Use parallel structure for headings
Use emphasized headings
Use levels of headings to divide longer more complex documents
Use space between headings and body text
You will need to choose fonts/typefaces and point sizes that will fit your purpose, audience, and context.
Divide the content for easy access
There are common principles in design, use them
Decide how you want your text to appear
Choose the colors you will use in the document
Think of your purpose, audience, context ...
Also consider the design principles, your document theme, color meanings, etc.
a lot of C-R-A-P
Anyone can type up a paper in a word processor and insert an image or two. The tricky part comes when you want to design your document to fit a target audience or work with a theme. You need to know how to arrange your elements, what typefaces to use, how to apply color, etc.
Examine the document closely and organize the content.
Create clear distinctions between elements
› body text
Use contrasting visual cues to distinguish between elements
Group related items together
Emphasize important elements
Create a unified look and feel for the document
Use similar or repeated elements to make sure your document feels like one unified piece.
Repeat your design choices throughout and on every section.
fonts, typefaces, and points ... oh my!
Keeping it Simple
Color Systems: Subtractive Color
... a little dab will do ya ...
Color Systems: Additive Color
C - R - A - P
If two items are not exactly the same, then make them different. For contrast to be effective it must be strong
Contrast is the most visual attraction on the page
Strong contrast helps organize information ... if elements are not the same, make them VERY different
The easiest way to add contrast is with a typeface. Avoid using typefaces, colors, images, and graphics that are too similar
Creating contrast: Use space(lines of space or
indentation) between elements to create
contrast Use bullet points or numbers to
distinguish items in a series Make headings
and body text look different from each
other. Provide contrast between the
foreground and the background colors of a
document. Can you read this text?
Use space (lines of space or indentation) between
elements to create contrast
Use bullet points or numbers to distinguish items in a series
Make and body text look different from each other.
Provide contrast between the foreground and the background colors of a document.
Can you read this text now?
Reasons for Contrast
Control where the reader’s eye flows
Set primary and secondary focal points
Use bold, italics, size, and color
› Contrasts in color should be reassuring and pleasing to the eye, not jarring.
You repeat some aspect of the design throughout the entire piece
Repetitive elements may include
Consistency is one of the most important principles of document design
Choose only one or two fonts for your document
Choose a palette of no more than five contrasting colors for your document
Repeat choices consistently (font, spacing, styles, labeling color, and contrast) throughout a document
Do not change your choices without warning
Reasons for Repetition
Creates unity, order, cleanliness and security
Controls the readers attention
Every element in your document has a place and purpose
Nothing should be placed arbitrarily
Every element should have some visual connection with another element on the page
Choose one alignment and stick with it
Avoid centering ... unless necessary
Move elements away from the edges
Place related information close together on a page, screen, or slide
Place visuals near the text they inform
We read left to right
Right aligned text is harder to read
So is switching alignments
In the middle of a document
Left alignment works best 95% of the time
Group related items together; consider the relationships between the elements on a page
Using several images in close proximity, creates
one visual unit rather than several separate units
Use white space
› Do not spread elements around to “fill” the page
› White space helps separate and distinguish visual units
Place important information “above the fold”
› in the top third of a page
Make sure that color choices reproduce acceptably in gray-scale
Make sure that margins are consistent across a document
Avoid “widows and orphans”
The “scan test”
› Can someone scan your document and easily get an idea of its content?
› Focus is usually on headings and readability
› Can people find specific information in your document easily and quickly?
› Focus is usually on the content and readability
A set of one or more fonts designed with
stylistic unity, each comprising a
coordinated set of glyphs
A complete character set of a single size
and style of a particular typeface
Color Theory is a set of principles used to create harmonious color combinations.
Using color can be tricky, because people have their own opinions, often making color a controversial topic
When we mix colors using paint, or through the printing process, we are using the subtractive color method.
Mixing means that you begin with white and ends with black
As you add color, the result gets darker
If we are working on a computer, the colors we see on the screen are created with light using the additive color method.
Mixing begins with black and ends with white
As more color is added, the result is lighter
Uses variations in lightness and saturation of a single color.
› This scheme looks clean and elegant.
› Monochromatic colors go well together, producing
a soothing effect.
› Easy on the eyes, especially with blue or green hues.
Consists of two colors that are opposite each
other on the color wheel.
› This scheme looks best when you place a warm color
against a cool color
› For example, red versus green-blue. This scheme is
› Complementary colors do not always go together!
war, danger, power, determination, passion, desire, and love
light, goodness, innocence, purity, perfection, and virginity
power, elegance, formality, death, evil, authority, prestige, mystery, and grief
joy, sunshine, enthusiasm, happiness, creativity, success, and encouragement
loyalty, nobility, luxury, ambition, wealth, wisdom, mystery, and magic
growth, harmony, freshness, fertility, and money
stability, trust, loyalty, confidence, intelligence, faith, truth, and heaven
Readability is used to describe the ease with which written language is read and understood
Concerns the difficulty of the language itself, not its appearance.
Factors that affect readability include
sentence and word length
frequency of uncommon words
Level of writing
Legibility describes how easily or comfortably a typeset text can be read.
Not connected with content or language
Focuses on the size and appearance of the printed or displayed text
Good document design is a combination of common sense and keeping things simple
White space is critical to balanced layouts. Cramped copy lacks appeal and is amateurish
Avoid using long lines of text. Use multiple columns to break up copy and improve readability
Infrequently use bullets. Bullets should be reserved for technical documents or presentations
Keep the number of type families on a page to a minimum
Left justified text is easier to read than justified or right justified copy
Typography plays a big part in our society
Most of the time, the goal is to use the appropriate typeface so the average person will not see the typeface, but get the right emotional response
Sometimes, the goal is to use typography to elicit a response
When is Typography Art?
Does the use of typography match the purpose?
When can you hinder readability
When do you use a typeface?
Good vs. Bad
the line that determines where non-ascending lowercase letters terminate in a typeface.
the line upon which most letters "sit" and under which descenders extend.
1. Cap Line
2. Ascender Line
8. Mean Line
9. Base Line
13. Descender Line
Serif typefaces are identifiable by the “feet” on the ends of the letters.
Have variations of thick/thin transitions
“Sans” is French for “without”
Sans serif typefaces are those without serifs on the end of the strokes
Always “monoweight” no visible thick/thin transitions ...
> there are some exceptions (Optima)
Oldstyle typefaces are based on hand-lettering of scribes.
Curved strokes always transition from thick to thin
Always have serifs
> Serifs on lower-case letters are always at an angle
Modern typefaces are more mechanical
Serifs can be used, but will be
more horizontal with more radical
contrast and thick/thin transitions
Modern typefaces often have
more freestyle and follows the
trends and cultural changes.
Script typefaces include all that appear to be written by hand with a pen, brush, or pencil
Can be broken down into further categories
Decorative typefaces are easy to spot
If the thought of reading an entire book in the font makes you want to throw up, it’s decorative
They are fun, exciting, and distinctive but should be used sparingly
When organizing a document, it is always best to create contrast between the typefaces you use. Never use more than three typefaces in a document, but make sure the typefaces work well together
Run a Test
When choosing a typeface for a project, see how the typeface will look in all manifestations ... Size - All caps - Weights - Italics
Leading & Kerning
Leading: the space between lines of text
Kerning: the space between letters in a line
Refers to the height of a capital letter above the baseline for a particular typeface .. typically for capital letters that are flat—such as H or I—as opposed to round letters such as O
Refers to the distance between the baseline and the mean line in a typeface
The portion of a letter in a Latin-derived alphabet that extends above the mean line of a font ... in most typefaces all capital letters are ascenders, and lowercase letters such as l, k, b, h, d, f, t
the portion of a letter in a Latin alphabet that extends below the baseline of a font ... in most typefaces, descenders are reserved for lowercase characters such as q, j, g, p, and y
the stroke of the character that encloses the circular or curved parts of some letters
a, B, b, D, d, g, O, o, P, p, Q, q, R
areas of white space form by straight or curved strokes (entirely or partially enclosed)
a, B, b, C, c, D, d, e, G, g, O, o, P, p, Q, q, R, S, s, U, u, etc.
Numbers such as 0, 4, 6, 8, and 9 also possess a counter
negative space beneath a letter that dictates how the letter
h, n, m
Pay attention to how multiple lines of text work together.
Caps and Small Caps
Read chapters 7 & 9 of your textbook and skim chapter 14, then complete the chapter exercises assignment posed on Canvas ...
Please note there are 3 parts to your assignment worth a total of 4 points
Using a serif and sans-serif can add contrast to your text, separating the headings and the body.
Do not combine two similar, but different typefaces
Be careful when using Decorative or Script fonts
What typefaces do you know?
Do you have a favorite?
Does anyone know the most famous and most used typeface in business & advertising
Developed in 1957 by Max Miedinger & Eduard Hoffmann in Switzerland
Originally named Neue Haas Grotesk
Re-named Helvetica (Latin word for Swiss) in 1960 for world-wide marketing
Designed for great clarity, no intrinsic meaning in its form, and usage on a wide variety of signage
same everything ...
Working with Typefaces
Picking a color theme
Readability of my document
Creating Parallel Headings