This document provides a short introduction to typography, including definitions of key typographic terms like x-height, baseline, leading, and kerning. It discusses various font families like serif, sans-serif, slab, geometric, and humanist. It also covers typographic attributes that can be adjusted like font-weight, font-style, font-size, letter-spacing, and color. The document demonstrates how to use font stacks and explores typography for web design, highlighting resources for further inspiration and learning.

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

2. What is
TYPOGRAPHY?

3. Let’s start from the basics.

4. x
x-height
Baseline type Kerning
leading

5. Font Serif
FAMILYS 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 & It matters a lot.
LEADING

16. x
x-height
Baseline type Kerning
leading

17. See it live!

18. Web
TYPOGRAPHY

19. Short introduction to
Chrome Developer Tools
Follow closely!

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

21. a a a a a a
lighter heavier

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

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

24. Font
Stacks

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

26. Resources

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