applied typography
DESCRIPTION
Just a quick run through of typography categorization, identification and usage. This has since been replaced but numerous othe resources on the internetTRANSCRIPT
![Page 1: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/1.jpg)
APPLIEDTYPOGRAPHYAPPLIEDTYPOGRAPHYA short introduction into the theory and usage of type
Prepared by Aishah and Alvin
![Page 2: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/2.jpg)
What is TYPOGRAPHY? What is TYPOGRAPHY?
![Page 3: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/3.jpg)
Let’s start from the basics.
![Page 4: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/4.jpg)
x-height
leading
Baseline
Kerning
typex
![Page 5: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/5.jpg)
FontFAMILYSFontFAMILYS
SerifSans-serif
![Page 6: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/6.jpg)
OldstylesMade by writerse.g Garamond
![Page 7: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/7.jpg)
TransitionalMade by engineers
e.g Times New Roman
![Page 8: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/8.jpg)
Let’s compare x-height!also look at angled stress and counter
![Page 9: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/9.jpg)
ModernMade by stylists
e.g Bauer Bodoni
![Page 10: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/10.jpg)
SlabMoving towards sans serif
e.g Rockwell
![Page 11: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/11.jpg)
GeometricPerfect circles
e.g Century Gothic
![Page 12: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/12.jpg)
HumanistMatching with old styles
e.g Gill Sans
![Page 13: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/13.jpg)
GrotesqueMatching with transitional
e.g Franklin Gothic
![Page 14: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/14.jpg)
Moving on.
![Page 15: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/15.jpg)
Kerning &LEADINGKerning &LEADING
It matters a lot.
![Page 16: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/16.jpg)
x-height
leading
Baseline
Kerning
typex
![Page 17: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/17.jpg)
See it live!
![Page 18: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/18.jpg)
WebTYPOGRAPHYWebTYPOGRAPHY
![Page 19: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/19.jpg)
Short introduction toChrome Developer Tools
Follow closely!
![Page 20: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/20.jpg)
font-weight
font-style
font-size
font-variant
100, bold
italics
absolute/relative
small-caps
AttributesAttributes OptionsOptions
![Page 21: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/21.jpg)
a a a a a alighter heavier
![Page 22: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/22.jpg)
inches (in)centimeters (cm)
millimeters (mm)points (pt)picas (pc)
pixels (px)ems (em)
X-height (ex)percentages (%)
Absolute sizing
Relative sizing
![Page 23: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/23.jpg)
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
![Page 24: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/24.jpg)
FontStacksFontStacks
![Page 25: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/25.jpg)
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.
![Page 26: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/26.jpg)
ResourcesResources
![Page 27: Applied Typography](https://reader034.vdocuments.us/reader034/viewer/2022042521/54c733524a79590c6e8b46c8/html5/thumbnails/27.jpg)
Design inspirations
How to make you designs
Classic book about typography, now adapted for web
Hardcore forum
Blog
creattica.com