Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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-Left

Text 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 177px
h2 110px
h3 68px
h4 42px
h5 26px
Too big!
Don’t use pixels!
body 16px
h1 177px
h2 110px
h3 68px
h4 42px
h5 26px
www.modularscale.com/
body 1em
h1 3.2em
h2 2.6em
h3 2.3em
h4 1.8em
h5 1.6em
h6 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 nec...
7. Break the Rules
Dmitry Mayorov | themepatio.com
7 Typography Rules
7 Typography Rules
7 Typography Rules
7 Typography Rules
7 Typography Rules
7 Typography Rules
7 Typography Rules
7 Typography Rules
7 Typography Rules
7 Typography Rules
7 Typography Rules
7 Typography Rules
7 Typography Rules
Upcoming SlideShare
Loading in …5
×

of

7 Typography Rules Slide 1 7 Typography Rules Slide 2 7 Typography Rules Slide 3 7 Typography Rules Slide 4 7 Typography Rules Slide 5 7 Typography Rules Slide 6 7 Typography Rules Slide 7 7 Typography Rules Slide 8 7 Typography Rules Slide 9 7 Typography Rules Slide 10 7 Typography Rules Slide 11 7 Typography Rules Slide 12 7 Typography Rules Slide 13 7 Typography Rules Slide 14 7 Typography Rules Slide 15 7 Typography Rules Slide 16 7 Typography Rules Slide 17 7 Typography Rules Slide 18 7 Typography Rules Slide 19 7 Typography Rules Slide 20 7 Typography Rules Slide 21 7 Typography Rules Slide 22 7 Typography Rules Slide 23 7 Typography Rules Slide 24 7 Typography Rules Slide 25 7 Typography Rules Slide 26 7 Typography Rules Slide 27 7 Typography Rules Slide 28 7 Typography Rules Slide 29 7 Typography Rules Slide 30 7 Typography Rules Slide 31 7 Typography Rules Slide 32 7 Typography Rules Slide 33 7 Typography Rules Slide 34 7 Typography Rules Slide 35 7 Typography Rules Slide 36 7 Typography Rules Slide 37 7 Typography Rules Slide 38
Upcoming SlideShare
презентация Microsoft office power point
Next
Download to read offline and view in fullscreen.

2 Likes

Share

Download to read offline

7 Typography Rules

Download to read offline

I Wish I Knew Before Designing a Theme

Related Books

Free with a 30 day trial from Scribd

See all

7 Typography Rules

  1. 1. 7 Typography Rules I wish I knew before designing a theme Dmitry Mayorov | themepatio.com
  2. 2. 1. Line Length
  3. 3. 45-75
  4. 4. 31 60 41 30 30 63
  5. 5. 85
  6. 6. 2. Flush-Left
 Text Alignment
  7. 7. InDesign
  8. 8. CSS
  9. 9. CSS
  10. 10. 3. Line-Height
  11. 11. Fix problem quickly with galvanized jets. line-height
  12. 12. body {
 line-height: 1.5em; }
  13. 13. body {
 line-height: 1.5; }
  14. 14. h1 {
 line-height: 1.2; }
  15. 15. 4.Vertical Rhythm
  16. 16. 5. Modular Scales
  17. 17. 16 26 42 68 110 177
  18. 18. body 16px h1 177px h2 110px h3 68px h4 42px h5 26px
  19. 19. Too big! Don’t use pixels! body 16px h1 177px h2 110px h3 68px h4 42px h5 26px
  20. 20. www.modularscale.com/
  21. 21. body 1em h1 3.2em h2 2.6em h3 2.3em h4 1.8em h5 1.6em h6 1.3em
  22. 22. 6. Typefaces
  23. 23. • Is it readable? • Can you choose a good pair typeface for it? • Isn’t it too heavy (in kilobytes)? • Does it support necessary subsets?
  24. 24. 7. Break the Rules
  25. 25. Dmitry Mayorov | themepatio.com
  • BismaKhan14

    Jun. 2, 2017
  • LutfilHaziq

    May. 25, 2017

I Wish I Knew Before Designing a Theme

Views

Total views

1,705

On Slideshare

0

From embeds

0

Number of embeds

218

Actions

Downloads

15

Shares

0

Comments

0

Likes

2

×