TYPOGRAPHY
The art and technique of arranging type to make written
language legible, readable, and appealing when displayed
Typography - Goals of typographic design
• Typography plays an important role in how audiences perceive your
document and its information.
• Good design is about
capturing your audience’s interest and
helping your audience gather information quickly and accurately.
• Typography creates relationships between different types of information,
both organizing this information and keeping it interesting.
Typography – font vs. Typefaces
Typography is the art and technique of arranging type to make written
language legible, readable, and appealing when displayed. The
arrangement of type involves selecting typefaces, point size, line length,
line-spacing (leading), letter-spacing (tracking), and adjusting the space
within letters pairs (kerning).
The term typography also is applied to the style, arrangement, and
appearance of the letters, numbers, and symbols created by the process.
https://en.wikipedia.org/wiki/Typography http://whatis.techtarget.com/definition/font
Typography – font vs. Typefaces
A font is a set of printable or
displayable text characters in a
specific style and size. The type
design for a set of fonts is the
typeface and variations of this
design form the typeface family .
Thus, Helvetica is a typeface family, Helvetica italic is a typeface, and
Helvetica italic 10-point is a font. In practice, font and typeface are often
used without much precision, sometimes interchangeably.
Typography - font vs. Typefaces Font is the most misused term in all of typography
http://xk9.com/bones/tt-006/
. A typeface is comprised of fonts
and those variations make up the typeface family. As seen in the
example, Cala is a typeface. A font is a set of characters in a specific
iteration of a typeface – 54 point Cala light italic is a font. A font is a
specific size, weight, and style of a typeface. More often now it refers
simply to the typeface, weight, and style, as in Cala light italic.
“If you were to ask me what the font is used in the second line of the graphic above, the correct answer would be “54 point Cala medium.” If
you asked me to name the typeface, I’d answer “Cala, and it’s spectacular.”
• Legibility: Making sure the audience can read and understand your text.
• Proximity, Similarity, Alignment: Using typography to create relationships between similar kinds of information
• Uniformity or Consistency: Repeating familiar elements to focus your audience’s attention.
• Contrast: Creating interest and distinguishing different types of information with different typefaces. One element of contrast is hierarchy—making sure the audience understands that information has different levels of importance.
Typography - Design principles for typography
Typography - Typography and legibility
Legibility is a combination of factors:
• Font family
• Font size
• Letter, word, and line spacing
• Alignment
Typography - Legibility and font families
In typography, a serif is a small line attached to the
end of a stroke in a letter or symbol. A typeface with
serifs is called a serif typeface (or serifed typeface).
A typeface without serifs is called sans serif or sans-
serif, from the French sans, meaning "without". Some
typography sources refer to sans-serif typefaces as
"Grotesque" (in German "grotesk") or "Gothic", and
serif typefaces as "Roman".
https://en.wikipedia.org/wiki/Serif
Typography - Legibility and font families
In typography, a sans-serif, sans serif, gothic, san
serif or simply sans typeface is one that does not have
the small projecting features called "serifs" at the end
of strokes. The term comes from the French word
sans, meaning "without" and "serif" from the Dutch
word schreef meaning "line". Sans-serif fonts tend to
have less line width variation than serif fonts.
In print, sans-serif fonts are often used for headlines
rather than for body text.
https://en.wikipedia.org/wiki/Serif
Typography - Legibility and font families
Stroke
Line
Stroke
Typography - Legibility and body text size
Legibility of body text varies for different audiences:
• Younger audiences may be able to read fonts sized at 8 or 9 points.
• Older audiences may be able to read font sizes around 10 points or
above.
• Font sizes above 14 points break down the continuity of the text,
making text appear too gray.
Typography - Legibility and spacing
• If letters, words, or lines are too close together, readers have a hard
time because text blocks tend to look too dark.
• If letters, words, or lines are too far apart, readers have a hard time
because blocks of text tend to look too light, causing readers to lose
a sense of continuity.
• Spacing between words needs to be consistent to promote legibility;
too much variation leads to eyestrain.
Typography – Legibility, Spacing & Leading
Typography - Legibility and alignment
• Left-aligned text is most legible, because
spacing between words is uniform.
• Justified text is also legible, though less so
with shorter line lengths because it tends to
create uneven spaces between words.
Typography - Legibility and alignment
• Center-aligned and right-aligned text
is generally harder to read, because
your readers’ eyes are used to
following text from left to right.
Typography - Font families and audience
• Each font family has a different “personality.”
• Use different font families to evoke tone and mood.
An advertisement for a school, for example, might use an “elegant” font such as
An advertisement for a financial firm, on the other hand, might use a more
“modern” font such as
Typography - Font families for headings
• For body text, you may want to use something fairly conventional
and legible.
• For headings, consider audience: teenagers respond to different
fonts than businesspeople or academics.
• Choose font families that support your subject matter, or
deliberately use a contrasting font to create interest.
Typography - Similarity and alignment
• Aligned text creates a line in
your design; such lines help
readers draw connections
between different parts of a
document.
Typography - Uniformity and font families
• To maintain overall uniformity, limit
the number of different font families
per page to one or two.
• Use the same font for headings and
body text to produce a uniform look;
this is known as
Typography – Proximity & Alignment
• Proximity, as defined by the "Universal
Principles of Design," states that elements that
are close together are perceived to be more
related than elements that are further apart.
• Proximity in web design is most commonly
achieved by grouping information. By
organizing elements on a page into clear
groups, it is apparent to site visitors that those
elements are somehow related. Conversely,
elements that are far apart or not clearly
grouped convey that they are not related.
Typography - Proximity & Alignment
• When several items are in close
PROXIMITY to each other, they become
one visual unit rather than separate units.
• The basic purpose of proximity is to
ORGANIZE
• Group related items together, move them
physically close to each other so the related
items are seen as one cohesive group rather
than a bunch of unrelated bits
• Items or group of information that are not
related to each other should not be in close
proximity to the other elements.
Typography – Proximity & Alignment
Avoid too many separate elements on a page
Avoid leaving equal amount of white space
between elements unless each group is part of
a subset
Do not create relationship with elements that
don’t belong together. If they are not related,
move them apart from each other.
Do not put thing around with out any though.
White space is GOOD.
–Jim Krauser
Typography - Imply Emotion & Importance
• Decorative typefaces provide a way to express
emotion with type. Certain typefaces are designed
to represent certain feelings. Decorative typefaces
are best when used in moderation, and never for
long lines of text. You should have a reason for
using these typefaces. It’s also important to use a
typeface that represents the desired response. For
instance, a typeface that invokes fear is probably
inappropriate for a story about the benefits of
holiday giving.
Typography - Contrast and font families
• Using the same font family throughout creates uniformity
but may make documents seem “flat” or uninteresting.
• You can add interest by contrasting the display type and
body type.
Typography - Contrast and font families
• To create ,
you could use two
font families, one
serif and one sans
serif.
Heading is set in Impact
—a sans serif fontSubheading is set in Georgia
—a serif font
Heading is set in Palatino—a serif font
Subheading is set in Georgia—also a serif font
Typography - Conflict and font families
• To avoid conflict, many designers avoid using two font families of the same variety, such as two serif fonts.
Heading is set with wide tracking
Typography - Contrast and tracking
• Tracking refers to the space between all of the letters in a line.
• Font families have built-in tracking that works well for body text.
• For headings, you can change tracking to create contrast.
Typography - Contrast and baseline shift
• Designers shift baseline to create interest:
Dropping the first letter adds a playful look.
Moving other letters around creates a “jittery” effect.
Typography - Hierarchy and typography
• Use typography to guide readers through the levels of
your document.
• Use different headings by changing font family, font type,
font size, font color.
• To promote uniformity and help your audiences navigate,
keep typographic choices consistent for each subsection
throughout the document.
Typography - Hierarchy and typography
• Hierarchy helps your audience distinguish between levels of
information, such as headings versus body text.
• Many documents are divided into hierarchical sections:
Main title
Section
Subsection
Or
Book
Chapter
Subheading
Sub-subheading
Typography - Example of hierarchy
These headings look the same because they express the same level of hierarchy
Different levels use different font sizes, font families, font colors, and leading.
Top-level headings can use unconventional fonts
Typography - Summary
• Typography can play a key role in design.
• Good typography starts with font family; choose these to meet your design goals, but
keep them limited.
• Use text alignment to create relationships between different kinds of information.
• Create contrast by using a serif font for headings and a sans serif font for body text
(or vice versa). You can also use italics, bold, tracking, or color to create contrast.
• Use contrast to indicate hierarchy.