This document provides a short introduction to typography, including definitions of basic typography terms like x-height, leading, and kerning. It discusses different font families like serif, sans-serif, slab, and geometric. The document also covers web typography topics such as font properties, font sizing units, and font stacks. Resources for further learning about typography and design are listed at the end.

1. APPLIED
TYPOGRAPHY
APPLIED
TYPOGRAPHYA short introduction into the
theory and usage of type
Prepared by Aishah and Alvin

2. What is
TYPOGRAPHY?
What is
TYPOGRAPHY?

3. Let’s start from the basics.

4. x-height
leading
Baseline
Kerning
type
x

5. Font
FAMILYS
Font
FAMILYS
Serif
Sans-serif

6. Oldstyles
Made by writers
e.g Garamond

7. Transitional
Made by engineers
e.g Times New Roman

8. Let’s compare x-height!
also look at angled stress and counter

9. Modern
Made by stylists
e.g Bauer Bodoni

10. Slab
Moving towards sans serif
e.g Rockwell

11. Geometric
Perfect circles
e.g Century Gothic

12. Humanist
Matching with old styles
e.g Gill Sans

13. Grotesque
Matching with transitional
e.g Franklin Gothic

14. Moving on.

15. Kerning &
LEADING
Kerning &
LEADING
It matters a lot.

16. x-height
leading
Baseline
Kerning
type
x

17. See it live!

18. Web
TYPOGRAPHY
Web
TYPOGRAPHY

19. Short introduction to
Chrome Developer Tools
Follow closely!

20. font-weight
font-style
font-size
font-variant
100, bold
italics
absolute/relative
small-caps
AttributesAttributes OptionsOptions

21. a a a a a a
lighter heavier

22. inches (in)
centimeters (cm)
millimeters (mm)
points (pt)
picas (pc)
pixels (px)
ems (em)
X-height (ex)
percentages (%)
Absolute sizing
Relative sizing

23. line-height
letter-spacing
word-spacing
text-shadow
text-align
color
absolute/relative
absolute/relative
absolute/relative
x-pos y-pos #color
left, right, center
#color

24. Font
Stacks
Font
Stacks

25. font-family: Tahoma, Arial, ‘Helvetica’, sans-serif
Lorem ipsum dolor sit
amet, consectetur adip-
isicing elit, sed do eius-
mod tempor incididunt ut
labore et dolore magna
aliqua.
Lorem ipsum dolor sit
amet, consectetur adip-
isicing elit, sed do eius-
mod tempor incididunt ut
labore et dolore magna
aliqua.
Lorem ipsum dolor sit
amet, consectetur adip-
isicing elit, sed do eius-
mod tempor incididunt ut
labore et dolore magna
aliqua.

26. ResourcesResources

27. Design inspirations
How to make you designs
Classic book about
typography, now adapted
for web
Hardcore forum
Blog
creattica.com