7 Typography Rules I wish I knew before designing a theme
Dmitry Mayorov | themepatio.com
2. Flush-LeftText Alignment
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
• 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