2. What is typography?
• Design is about
communication, and even
with the power of images,
words remain at the core of
how we communicate.
• Typography is the practice
of visually representing
words.
3. Type conveys a meaning the face, size,
weight, color etc.. They all add to the message.
4. What is typography?
• Remember: legibility is
important AND the content is
the king.
• Legibility comes from various
things – spacing, letter shape,
size, weight..
• Both content and presentation
have direct effect on the
message we convey
7. How type works?
•Type communicates visually with
curves, corners, variation, visual
balance etc
•Anatomy of a letter
http://www.counterspace.us/typogra
8. How type works?
• Typefaces come in variety of styles;
Old-style, Transitional, Modern,
Egyptian/slab-serif, Sans-serif
• Sans-serifs can be further classified realist,
geometric & humanist faces
9. Serif & sans-serif?
• This is text written with a serif
typeface
• This is text written with a
serif typeface
10. Serif & sans-serif?
• serif : A stroke added usually to the
beginning or the end of a letter
• sans: ”without”
11. A small glossary of
typographic terms
Letterspacing
unnevenly spaced letters
can disrupt our ability to
distiguish words
12. A small glossary of
typographic terms
Line-height (leading)
can have great impact on
legibility of text passages.
Sami Niemelä | sn@neocite.com
13. A small glossary of
typographic terms
Line length
The main issue for the reader is the disruption
of having to go from the end of one line to the
beginning of the next. When lines are too long this can
be quite difficult because of the sheer distance the eye
has to travel. On the other hand,
if lines are set
extremely short,
the reader will
have to switch
lines much more often.
Sami Niemelä | sn@neocite.com
14. A small glossary of
typographic terms
X-height
Has a great impact on legibility:
Both typefaces are set on the exact same size
but
the readability varies greatly
Sami Niemelä | sn@neocite.com
15. Good typography on web
design
• The biggest problem for good online
typography is the screen resolution
Sami Niemelä | sn@neocite.com
16. Rule of Thirds!
• Don’t place anything directly in center!
• No bull’s eye!
17. Your First Assignment…
• 2. Going to any of the website address' listed on
class website, find 1 example of a logo design that
you find visually appealing and uses:
• A. Size
• B. Weight (light vs. dark)
• C. Form (shapes)
• D. Rule of Thirds (don’t center!)
• E. Direction
• F. Color
Form, Color,
Weight
18. • Choose examples that Color or Direction
you could possibly
show your
PERSONALITY in
Font style and your
Logo Design
Rule of Thirds
• 2. Save example in
folder on your desktop
computer. Label file for
each item listed in A-F.
19. Color Direction Form
Rule of Thirds Size Weight