Applied Typography

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