The document provides an overview of typography principles including the art and science of arranging type, the anatomy of typefaces, and the importance of type size, weight, and spacing. It categorizes types such as serif, sans serif, script, and decorative, while also discussing software formats like PostScript, TrueType, and OpenType. Key guidelines for effective typography design emphasize contrast, simplicity, and readability to enhance visual appeal.

1. Typography
basics

2. typography basics
WhAtIs
Typography

3. typography basics
Typography: the science of type.
The art & process of arranging type on a
page,nowadays mostly produced on a
computer.

4. typography basics
Type is a flexible communications tool,
by changing the typeface, size,color,
weight, and placement of type in your
design can add extra emphasis to your
words & enhance the visual appeal.

5. typography basics
The Anatomy of Type

6. typography basics
A Typeface is a set of letterforms,
numbers, and symbols unified by a
common visual design; commonly
interchanged with the word font.

7. typography basics
Typeface examples:
Book Antiqua
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
! @ # $ % ^ & * ( ) - + = ? ‘ “ ; :
Comic Sans MS
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
! @ # $ % ^ & * ( ) - + = ? ‘ “ ; :

8. typography basics
Each typeface has a variety of related
Type Styles (Font Styles,) which are
modified versions of the original typeface
such as italic, bold, condensed, or
extended. This whole related group of
styles is known as a Type Family (Font
Family.)

9. typography basics
Type Family Example: Book Antiqua
regular
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( ) - + = ? ‘ “ ; :
italic
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( ) - + = ? ‘ “ ; :
bold
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( ) - + = ? ‘ “ ; :
bold italic
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( ) - + = ? ‘ “ ; :

10. typography basics
Type Size: type is traditionally measured
in points. The term originated from when
type was cast in metal slugs. Ascenders,
body, & descenders are included in point
size.

11. typography basics
Weight: the size of the stroke of the font. Some fonts have
thin strokes, while others have very thick ones. A well
developed type family offers a range of weights such as
light, regular, semi-bold, bold, and extra-bold.
• Using a type family with varying weights increases
your design options because you can pick the weight you
need to add emphasis to your design.

12. typography basics
AaBbCc
12pt
AaBbCc
14pt
AaBbCc
18pt
AaBbCc
24pt
AaBbCc
36pt
AaBbCc
48pt
Times New Roman
Size & Weight Examples
AaBbCc
12pt
AaBbCc
14pt
AaBbCc
18pt
AaBbCc
24pt
AaBbCc
36pt
AaBbCc
48pt
Impact

13. typography basics
Letterspacing: the space between
individual letters and characters.
Leading: the vertical space between lines
of type.
Word Spacing: the space between words.
Letterspacing, Leading, and Word Spacing

14. typography basics
Letterspacing vs. L e t t e r s p a c i n g
Letterspacing, Leading, and Word Spacing Examples
Leading: the size of the
stroke of the font. Some
fonts have thin strokes,
while others have very
thick ones.
Leading: the size of the
stroke of the font. Some
fonts have thin strokes,
while others have very
thick ones.
vs.
Word Spacing•Word Spacing•Word Spacing

15. typography basics
Alignment
Type can be aligned multiple ways on your pages.
Left aligned text is useful in just about any type of
applications because designers find it easier to read.
Right Aligned text is used more sparingly because the
irregular left edge makes it hard for the viewer to read.
Centered text is popular for short amount of text such as
in flyers or wedding announcements.
Justified text is a common trait found in magazines
and newspapers.

16. typography basics
Categories of Type
With all the thousands of typefaces
available, you can narrow them down to
specific typeface categories.

17. typography basics
Serif
The Roman serif typeface originated in
Rome (who’d have guessed?) A stroke was
added to the ends of letterforms.
A

18. typography basics
Sans Serif
Means “without serifs.” Created during the
Industrial Revolution, during the 20th
Century many more Sans Serif typefaces
were created because they looked more
streamlined.
A

19. typography basics
Script
Typefaces that convey the feeling of handwritten
designs. Depending on your design, script can be either
formal or informal.
A

20. typography basics
Decorative
Those typefaces that are hard to
categorize are by default dropped
into the decorative category.
A

21. typography basics
Font Software Formats
There are three main software formats
created for Computer Graphics and
Desktop Publishing with their large array
of applications.

22. typography basics
PostScript
A language created by Adobe that has
become a standard for most high-end laser
printers. Incorporates a two font process
using screen fonts and printer fonts.

23. typography basics
TrueType
A font format that works both on Mac’s
and PC’s. These fonts generally show
perfectly fine on-screen but have problems
printing. Fonts must be created into
outlines or rasterized to print correctly on
a PostScript Printer.

24. typography basics
OpenType
A merging of both PostScript and
TrueType fonts. OpenType incorporates
both PostScript data and TrueType screen
fidelity.

25. typography basics
A Few Simple
Rules!

26. typography basics
Use Plenty of Contrast
Using contrast on your pages
increases visual interest. When you
utilize fonts that are extremely
different from one another they do
not fight each other to be dominant.

27. typography basics
Size Contrast
Type size contrast is a simple concept:
contrast big type with little type. Don’t do
it in half measures. Have fun with it.

28. typography basics
Weight Contrast
Weight contrast is also a simple concept: intermix
light, regular, and heavy type with one another.

29. typography basics
Color Contrast
When budget allows, consider using
contrast colors to attract a readers
attention. Contrast bright colors with dark
colors. Color adds dimension to type that
cannot always be achieved in grayscale.

30. typography basics
Emphasis
Like anything else, keep in mind what on
your page is the most important, it
should look the most prominent, the
second should look the second most
important, and so on.

31. typography basics
Keep it Simple
A goal of typographic design is to pick
legible, readable typefaces.
Legibility: how easy it is to identify text in
short phases such as headlines.
Readability: how easy it is to read lots of
text such as paragraphs.

32. typography basics
Avoid Conflict
Conflict in type occurs when words are
similar in size, color, value, weight, or
typeface. Remember to mix it up, without
contrast your design is boring.

33. typography basics
Combinations That Work
• Sans Serif fonts in headlines, serif fonts in body copy
• Use no more than two type combinations in a design
• Use only one decorative typeface per page
• Avoid using two serif or sans serif together on a page
• Emphasize headlines and titles more than body text
• Start your experiments with classic typefaces

34. typography basics
A Few Things to consider
• Don’t be afraid to break the rules of type, but to
meaningfully break the rules you must understand them
• Place readability and communication before style
• If you have a hard time reading it, its hard to read
• Consider the page format and purpose
• Type should be appropriate for the tone of page and
should appeal to the audience
• AVOID ALL CAPS LIKE THE PLAGUE
• Just because a program will let you apply bold, italic,
and outlined at once doesn’t mean it should be done
• Alignment, letterspacing, and word spacing are all
critical to readability
• If all else fails just K.I.S.S. it (Keep It Simple Stupid)