Post on 24-Jun-2015
description
APPLIEDTYPOGRAPHYAPPLIEDTYPOGRAPHYA short introduction into the theory and usage of type
Prepared by Aishah and Alvin
What is TYPOGRAPHY? What is TYPOGRAPHY?
Let’s start from the basics.
x-height
leading
Baseline
Kerning
typex
FontFAMILYSFontFAMILYS
SerifSans-serif
OldstylesMade by writerse.g Garamond
TransitionalMade by engineers
e.g Times New Roman
Let’s compare x-height!also look at angled stress and counter
ModernMade by stylists
e.g Bauer Bodoni
SlabMoving towards sans serif
e.g Rockwell
GeometricPerfect circles
e.g Century Gothic
HumanistMatching with old styles
e.g Gill Sans
GrotesqueMatching with transitional
e.g Franklin Gothic
Moving on.
Kerning &LEADINGKerning &LEADING
It matters a lot.
x-height
leading
Baseline
Kerning
typex
See it live!
WebTYPOGRAPHYWebTYPOGRAPHY
Short introduction toChrome Developer Tools
Follow closely!
font-weight
font-style
font-size
font-variant
100, bold
italics
absolute/relative
small-caps
AttributesAttributes OptionsOptions
a a a a a alighter heavier
inches (in)centimeters (cm)
millimeters (mm)points (pt)picas (pc)
pixels (px)ems (em)
X-height (ex)percentages (%)
Absolute sizing
Relative sizing
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
FontStacksFontStacks
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.
ResourcesResources
Design inspirations
How to make you designs
Classic book about typography, now adapted for web
Hardcore forum
Blog
creattica.com