Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start 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

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Document Design, Color, and Typography

General Writing Class presentation covering the basics of document design

Keitha Truong

on 23 February 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Document Design, Color, and Typography

Document Design, Typography & Color
Designing Your Documents
Use parallel structure for headings

 Use emphasized headings
› typeface
› bold
› color

 Use levels of headings to divide longer more complex documents

Use space between headings and body text
Design Principles



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
› headings
› body text
› images

Use contrasting visual cues to distinguish between elements
› size
› space
› color

Group related items together

Emphasize important elements
Main Ideas
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
Color Theory
... a little dab will do ya ...
Color Systems: Additive Color
Emotional Colors
The Basics
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?
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 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.
Contrast Example
You repeat some aspect of the design throughout the entire piece
Repetitive elements may include
› emphasis
› bullets
› rules
› color
› format
› size
› space
Using Repetition
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


Adds interest
Repetition Example
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
Alignment Tips
Choose one alignment and stick with it

Avoid centering ... unless necessary

Move elements away from the edges
Using Alignment
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
Alignment Example
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”
Testing Documents
The “scan test”
› Can someone scan your document and easily get an idea of its content?
› Focus is usually on headings and readability

Usability testing
› Can people find specific information in your document easily and quickly?
› Focus is usually on the content and readability
Proximity Example
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

Example: CMYK
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

Example: RGB
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
intrinsically high-contrast.
› 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

Visual Typography
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
Mean line
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
3. Serif
4. Counter
5. Bowl
6. Loop
7. Descender
8. Mean Line
9. Base Line
10. Ascender
11. Stroke
12. Aperture
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
Hand print
Not touching
Calligraphic styles

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
Cap Height
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
is interpreted
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 typefaces
same spacing
same colors
same everything ...
Use Styles
Using Color
Working with Typefaces
Analyzing Readability
Picking a color theme
Readability of my document
Creating Parallel Headings
Full transcript