Class 3

1. Class 3

2. typography and
communication design
lesson 04

3. 1. Size and scale
2. Mixing typefaces
3. Leading / Line spacing
4. Kerning and Tracking
4. Alignment
5. Enlarged Capitals
6. Paragraphs
7. Hierarchy

4. Size and scale
TYPE BASIC

5. Attempts to standardize the measurement of type
began in the eighteenth century. The point system is
the standard used today.
Typography can also be measured in inches,
millimeters, or pixels.
Most software applications let the designer choose a
preferred unit of measure; picas and points are
standard defaults.
Size > Height

6. 1 pica
1/6 inch
12 points
16 pixels
1 point
1/72 inch
0.35mm
Pica is associated with line-length
and column width.

7. A letter also has a horizontal measure, called its set width. The set width
is the body of the letter plus a sliver of space that protects it from
other letters. The width of a letter is built-in to the proportions and visual
impression of the typeface.
Some typefaces have a narrow set width, and some have a wide one.
You can change the set width of a typeface by fiddling with its horizontal
or vertical scale. This distorts the line weight of the letters,
however, forcing heavy elements to become thin,
and thin elements to become thick.
Instead of torturing a letterform, choose a typeface
that has the proportions you are looking for, such as
condensed, compressed, wide, or extended.
Size > Width

8. The perceived size of a typeface is a function
of it’s x-height as well as its cap height.
Size > X-Height

9. These texts are set in the same point size, but their perceived scale is completely different.

10. Scale > Scale is the size of design elements in comparison to other elements
in a layout as well as to the physical context of the work.
Designers create hierarchy and contrast by playing with the scale
of letterforms. Changes in scale help create visual contrast,
movement, and depth as well as express hierarchies of importance.
People intuitively judge the size of objects in relation to their own
bodies and environments.

11. Scale > Scale is the relationship among elements within
a composition or hierarchy

12. Typographic hierarchy is about
analysing text-based information and
creating levels of importance based on
the meaning of the words.
The designer can determine the order in
which the reader sees the information
through basic typographic techniques
such as changing the size, weight or
position of the type.
>>

13. Mixing Typefaces
TYPE BASIC

14. Combining typefaces is like making a salad.
Start with a small number of elements representing different colors, tastes,
and textures. Strive for contrast rather than harmony, looking for emphatic
differences rather than mushy transitions.
Give each ingredient a role to play: sweet tomatoes, crunchy cucumbers,
and the pungent shock of an occasional anchovy.
When mixing typefaces on the same line, designers usually adjust the point
size so that the x-heights align.
When placing typefaces on separate lines, it often makes sense to create
contrast in scale as well as style or weight.
Try mixing big, light type with small,
dark type for a criss-cross of
contrasting flavors and textures.
big, light type
with small, dark type

16. TYPE
CRIME
These typefaces are from the
same family, BUT they are too
close in weight to mix well.
TYPE
CRIME
These two type styles are
too similar to provide a
counterpoint to each other.
• Counterpart is similarity. It brings unity and harmony to type design
• Counterpoint is contrast It brings opposition and dissonance to type design

17. CONTRAST

18. Look for contrast when mixing typefaces.

19. Leading /
Line Spacing
TYPE BASIC

20. Leading describes the amount of space between lines of text. You can
measure leading by obtaining the distance between two baselines.
Leading is powerful.
It can affect how readable long blocks of text are.

21. When you decrease leading, lines get closer to each other,
making a block of text appear more compacted.
Lowering the amount of leading can cause descenders and
ascenders to collide, and this could have an adverse effect
on readability.
But as a visual style, low amounts of leading can increase the
pace of the reader and invoke the feeling of cramped
conditions and claustrophobia, which can be desired when
you are using type in this expressive manner.
Decreased
Leading

22. Increasing leading can reduce the pace of a piece of text;
it can slow the reader by introducing more white space.
It can display a more relaxed feel in text blocks.
Too much leading can cause continuity problems, as the eyes
of the reader is required to travel a greater distance between
lines of text.
Increased
Leading
LEADING / LINE SPACING

23. • Example 1 is set to a negative
value (a value that is smaller
than the type size). You can
see the ascenders colliding
with descenders and its effects
on readability and aesthetics.
• Example 2 is set at an often-
recommended value, which is
120% of the type size. This
means that if your font size is
10pt, then leading should be
set at 12pt.
• Example 3 is set to 200% of
the type size. You’ll notice the
disruption in the pace and flow
of reading the text.

24. In summary, here are a few leading guidelines:
• Leading can affect text blocks in different ways. A short block of text
versus a long block of text will be affected by leading in its own way.
Just because it works well on one doesn’t mean it will work equally
well in the other.
• The more words you have in a line, the more leading you will need to
maintain a pleasurable reading experience.
• If you increase word-spacing (the space between each word), you’ll
have to increase leading to improve the readability of the text block.

25. Do you know?

26. Leading is so named because traditional
print shops put strips of lead between lines
of type to increase vertical space.
(During much of the letterpress era, movable type was composed by hand for each
page. Cast metal sorts were composited into words and lines of text and tightly bound
together to make up a page image called a forme, with all letter faces exactly the
same height to form an even surface of type. The forme was mounted in a press, inked,
and an impression made on paper.)

27. TYPE BASIC
Kerning and
Tracking

28. Kerning is an adjustment of the space between two letters. Kerning adds
or subtracts space between letters to create more visually appealing
and readable text.
The characters of the Latin alphabet emerged over time; they were
never designed with mechanical or automated spacing in mind. Thus
some letter combinations look awkward without special spacing
considerations.
Working in a page layout program, a designer can choose to use
metric kerning or optical kerning as well as adjusting the space
between letters manually where desired.
A well-designed typeface requires little or no additional kerning,
especially at text sizes.
Kerning >

29. Metric Kerning
The kerning tables that are built into the typeface. It refers to
the intended letter spacing (kerning) by the type designer.
Metric kerning usually looks good, especially at small sizes.
Optical Kerning
Automatic kerning by the page layout program. Optical kerning
assesses the shapes of all characters and adjusts the spacing
wherever needed.
Some graphic designers apply optical kerning to headlines
and metric kerning to text.

30. Tracking is overall letter spacing.
Tracking differs from kerning in that tracking is the adjustment of
space for groups of letters and entire blocks of text.
You can apply tracking to all text or selected portions. You can use
selective tracking to squeeze more characters onto a line to save
space or prevent a few words from carrying over to another page
or column of text.
Tracking often changes line endings and shortens lines of text.
Tracking can be further adjusted on individual lines or words to
improve hyphenation and line endings.
Tracking >

31. TYPE
CRIME
Tightly tracked text.
Letters are tracked too
close for comfort.

32. TYPE BASIC
Alignment

33. • Flush Left
• Flush RIght
• Justified
• Centred
Note: Some softwares have
more alignment options
Each basic mode of alignment has distinct characteristics and typical uses.
4 types of alignment

34. Poorly Shaped text block.
In most uses, centered text
should be broken into
phrases with a variety of
long and short lines.
Full of holes.
A column that is too
narrow is full of gaps.
Bad rag.
An ugly wedge shape
spoils the ragged edge.
Punctuation eats the edge.
Excessive punctuation
weakens the right edge.
TYPE
CRIME
TYPE
CRIME
TYPE
CRIME
TYPE
CRIME

35. ALIGNMENT

36. Roman letters are designed to sit side by side, not on top of one another.
Stacks of lowercase letters are especially awkward because the ascenders
and descenders make the vertical spacing appear uneven, and the varied
width of the characters makes the stacks look “weak”.
Capital letters form more stable stacks than lowercase letters. Centering the
column helps to even out the differences in width.
Many Asian writing systems, including Chinese, are traditionally written
vertically; the square shape of the characters supports this orientation.
The simplest way to make a line of Latin text vertical is to rotate the text from
horizontal to vertical. This preserves the natural affinity among letters sitting on
a line while creating a vertical axis.
Vertical Text

37. TYPE
CRIME
Stacked Lowercase

38. Mexican Street Signs. Photographs by Andrea Marks. Stacked letters often appear on commercial street signs, which often employ thin, vertical
slices of space. The letters in these signs were drawn by hand. Wide characters and squared-off Os stack better than narrow letters with traditional
rounded forms. In some instances, the letters have been specially aligned to create vertical relationships, as in the "Optica" sign at right, painted
on a sliver of flat molding inside a door frame.

39. SIMPATICO Poster for the Public Theatre, 1994.
Designer: Paula Scher/Pentagram. Type set on
a vertical baseline creates movement across
the poster. The theater’s logo, which also
employs a vertical baseline, can be easily
placed on street banners.
Instead of stacking letters, designers
often change the orientation of the
baseline to make vertical lines

40. PARALLELEN IM SCHNITTPUNKT
(CROSSING PARALLELS) Poster, 1997.
Designer: Gerwin Schmidt. Publisher: Art-Club
Karlsruhe. The axes of type and landscape
intersect to create posters that are simple,
powerful, and direct. The text is mirrored in
German and French.
Instead of stacking letters, designers
often change the orientation of the
baseline to make vertical lines

41. TYPE BASIC
Enlarged Capitals

42. Enlarged capitals, also called versals, commonly mark the entrance to a
chapter in a book or an article in a magazine.
Dropped capitals are traditional page device, especially for opening chapters in a book.

45. TYPE BASIC
Paragraphs

46. Use the “Space After Paragraph”
feature in your page layout program
to insert a precise increment of
space between paragraphs.
Skipping a full line often creates too
open an effect and wastes a lot of
space.
NOTE
Get in the habit of inserting a full paragraph return (Enter key)
only at the end of paragraphs; insert a line break when you
don't want to add additional space (Shift + Enter).
Space After
Paragraph

47. Line Break
[Shift + Enter]
Line Break
Line Break
Line Break
+ 1/2 Line
Space
Indent

48. Line Break
Line Break
Outdent
Extra Space

49. Symbol
Too many signals.
Using paragraph spacing and indents together
squanders space and gives the text block a
flabby, indefinite shape.
TYPE
CRIME

50. On the web, paragraphs are usually marked with a skipped line, wasting lots of vertical space.

51. WHAT IS WRONG?

54. TYPE BASIC
Hierarchy

55. A typographic hierarchy expresses the organization of content, emphasizing
some elements and subordinating others.
A visual hierarchy helps readers scan a text, knowing where to enter and exit
and how to pick and choose among its offerings.
The concept of visual hierarchy is simple , the more important content
should look like more important, and the less important should look
like less important.
The user should be able to divide and
retrieve the data in chunks.

56. So, here we have our information in a liner continuous text presentation.
Acceptable, if it comes as a mobile text message etc.
But in a layout, this arrangement fails to guide and help the user
in getting information quickly.
Example:

57. Lets try using the White-space.
The spacing divides the information
into chunks and provides a better
visual hierarchy.
Now reader can at least focus on
reading one part of the information
at one time.
Example:

58. One way to establish Visual Hierarchy is Typographic variations.
The level of attention on an specific
element can be decided with the
type scale, weight, and alignment.
Now user automatically builds visual
relationship between elements and
we can make sure what should they
read first and what later.
Example:

59. Variations >
• Symbols
• Indents
• Line Break
• Indents
• Line Break
• Font change
• Indents
• Line Break
• Alignment
• Font change
• Line Break

60. One text...
Different expression.

63. THANK YOU
SEE YOU IN THE NEXT LESSON