Theory of graphic design

Typography
Teacher: Mr. Igor Ristovski
Mail: igor.Ristovski@nova.edu.mk
  Typography is the art and technique of
arranging type to make written language
legible, readable, and appealing when
displayed.
Typography  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).
What role does
typography play in
Graphic Design
 Helps clarify a message that the
designer sends to an audience
 The properly selected font has a
huge impact on getting a
message across to an intended
audience
 A poorly chosen font or bad
typographic layout can detract
from or even block the message
all together
What role does
typography play in
Graphic Design
 Poor typography will prevent a
reader from connecting with a
design, and at worst may make
your message illegible!
 Make sure you use proper color
in your typography.
 Make everything readable for the
eye, and not heavy.
Typography terms

 Typeface: Refers to the upper and lowercase letters and numbers of

a specific design/ font. Examples: Helvetica, Times, etc.
 Characters: The individual letters, numbers and punctuation
used when setting type
 Uppercase: The capital letters of the alphabet
 Lowercase: The small letters of the alphabet
Typography terms
 Baseline: An imaginary line on which
the characters seem to be standing
 Meanline: The imaginary line that runs
along the top of most lowercase
letters, such as i, c, e, m, n, u,v, w and
x
 X-Height: The height of the body or
main element of the lowercase
letterform, which falls between the
meanline and the baseline
 Cap Height: The imaginary line that
runs across the top of capital letters
and ascenders in a line of type
Serif vs. San Serif
 Serif: Letters with finishing strokes, or
brackets, that project from letters
- Gives letters “finished” appearance
- Letters flow together, making serif
typefaces easy to read
- Often used in books, magazines and
newspapers
 Sans Serif: Type with no serif
- Also has no variation in the width of
its strokes; computer generated look
- Useful for signs and large-scale text
meant to be seen from a distance
- Text is harder for a reader's eye to
follow in large blocks of text
Leading and kerning
 Leading: The space in between lines of text
 Term refers to lead pieces inserted in between lines of type to add
more space on old fashioned printing pressesda
Leading and kerning

 Kerning: Spacing in
between individual letters
and words in a single line
of text
 Bad kerning will make the
text unreadable.
Typography principles

 Legibility: Making sure the audience can read your text

 Similarity, alignment: Creating organization of information
 Uniformity and consistency: Repeating elements in a composition to
direct the viewer's attention and create design harmony
 Hierarchy: Organizing information in terms of its importance to the
viewer
 Contrast: Creating interest and distinguishing different types of
information with different typefaces
Legibility
 How easy is for the viewer to read the message
 Spacing is key
 Different sizing different legibility
 Check your font
Legibility

 Choose wise about the color surrounding of your typography.

 No contrast = bad for reading
Fonts

 Juggling with many different fonts is a hell of a headache.

 Limit the use to 2 fonts, maximum 3.
 By using the same font you are creating uniformity, but this may
become a bit boring for the reader
 For contrast use two fonts. Serif and sans serif combination is always
a win.
Hierarchy

 Hierarchy helps your audience distinguish between

levels of information, such as title, header, subhead
and body
 Information can be set apart by changing font family,
font type, size, color
 To maintain unity, keep typographic choices
consistent for each section throughout a layout
 Top-level headings can use unconventional
typographic treatments
 Different levels use different font sizes, families,
colors, and leading to arrange and separate
information
Text Alignment:
Left
 Type lines up on the left with "ragged"
the right margin
 Advantage: Easy to read in large
blocks
 Disadvantage: No uniformity
Text Alignment:
Right
 Aligns text to the right; leaves
“ragged” left edge
 Advantage: Allows designer control
over kerning spacing of text on
individual lines
 Disadvantage: Can be hard for the
reader to follow lines of type if they
don’t line up under one another on
the left
 Best used for small amounts of type
Text Alignment:
Center
 Type that aligns along the middle axis
in a composition
 Advantage: Just like with left and right
justification, designer can control word
spacing for good legibility
 Disadvantage: Can be difficult for the
reader to find the beginning of the next
line of text when lines don’t justify left
 Works best using small areas of type,
such as lists, headlines, etc.
Text Alignment:
Justified
 Aligns type on both the left and right
edge
 Advantage: If done correctly, this can
make areas of text appear uniform
and clean, giving crisp edges on both
sides of an area of text
 Disadvantage: Harder to control word
spacing
Text Alignment:
Consider this
 Rivers: Bad words spacing can create “rivers” or unintentional areas of white space that flow
down a page and create a visual distraction for the reader.
 Orphan: An orphan is a short line that appears at the top of a column. Occurs when the last
word of a paragraph continues onto the next page.
 Widow: A very short line at the end of a paragraph
Fonts

 Dafont.com | fonts.com | 1001fonts.com | fontsquirrel.com |

myfonts.com
 Ever stumbled on a great font and you don’t know the name? -
https://www.myfonts.com/WhatTheFont/
Just put an image of the font you need and it will give you either the
closest font or the exact font.