I Wish I Knew Before Designing a Theme

1. 7 Typography Rules
I wish I knew before designing a theme
Dmitry Mayorov | themepatio.com

3. 1. Line Length

4. 45-75

6. 31
60
41
30 30
63

8. 85

9. 2. Flush-Left
Text Alignment

10. InDesign

11. CSS

12. CSS

14. 3. Line-Height

15. Fix problem
quickly with
galvanized jets.
line-height

16. body {
line-height: 1.5em;
}

17. body {
line-height: 1.5;
}

18. h1 {
line-height: 1.2;
}

22. 4.Vertical Rhythm

28. 5. Modular Scales

30. 16 26 42 68 110 177

31. body 16px
h1 177px
h2 110px
h3 68px
h4 42px
h5 26px

32. Too big!
Don’t use pixels!
body 16px
h1 177px
h2 110px
h3 68px
h4 42px
h5 26px

33. www.modularscale.com/

34. body 1em
h1 3.2em
h2 2.6em
h3 2.3em
h4 1.8em
h5 1.6em
h6 1.3em

35. 6. Typefaces

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

37. 7. Break the Rules

38. Dmitry Mayorov | themepatio.com