7 Typography Rules I wish I knew before designing a theme

Dmitry Mayorov | themepatio.com

1. Line Length

45-75

31

60

41

30 30

63

85

2. Flush-LeftText Alignment

InDesign

CSS

CSS

3. Line-Height

Fix problem quickly with galvanized jets.

line-height

body { line-height: 1.5em;}

body { line-height: 1.5;}

h1 { line-height: 1.2;}

4. Vertical Rhythm

5. Modular Scales

16 26 42 68 110 177

body 16px

h1 177pxh2 110pxh3 68pxh4 42pxh5 26px

Too big!

Don’t use pixels!

body 16px

h1 177pxh2 110pxh3 68pxh4 42pxh5 26px

www.modularscale.com/

body 1em

h1 3.2emh2 2.6emh3 2.3emh4 1.8emh5 1.6emh6 1.3em

6. Typefaces

• Is it readable? • Can you choose a good pair typeface for it? • Isn’t it too heavy (in kilobytes)? • Does it support necessary subsets?

7. Break the Rules

Dmitry Mayorov | themepatio.com