Better Web Typography with Modular Scale

Transcript

1. Better Web Typography
   with Modular Scale
   Elle Meredith
   

   View Slide

2. View Slide

3. Grids
   

   View Slide

4. Modular scales serve much the
   same purpose as grids, but they
   are more flexible. A modular
   scale, like a musical scale is a
   prearranged set of harmonious
   proportions
   — Robert Bringhurst
   “
   ”
   Ref: The Elements of Typographic Style, p. 166
   

   View Slide

5. Golden Ratio
   1:1.618
   

   View Slide

6. Ref: http://blog.8thlight.com/billy-whited/2011/10/28/r-a-ela-tional-design.html
   

   View Slide

7. … 3, 5, 8, 13, 21,
   34, 55 …
   

   View Slide

8. Ref: http://commons.wikimedia.org/wiki/File:Golden_section_in_book_design.svg
   3 3 5
   5
   5
   5
   8
   8
   

   View Slide

9. M
   Ref: http://www.webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.1/
   

   View Slide

10. View Slide

11. 16 *
    1.618 = 25.888
    

    View Slide

12. 16 / 1.618 = 9.889
    

    View Slide

13. View Slide

14. 16 25.9
    

    View Slide

15. 16 25.9 41.8
    

    View Slide

16. 16 25.9 41.8
    9.8
    

    View Slide

17. 16 25.9 41.8
    9.8
    6.1
    

    View Slide

18. 16 25.9 41.8
    9.8
    6.1
    12 19.4 31.4
    7.4
    4.5
    

    View Slide

19. 16 25.9 41.8
    9.8
    6.1
    12 19.4 31.4
    7.4
    4.5
    Double Stranded
    

    View Slide

20. Ref: http://modularscale.com/
    

    View Slide

21. Ref: http://modularscale.com/
    

    View Slide

22. How?
    

    View Slide

23. Ref: http://nicewebtype.com/fonts/ambroise-with-le-monde-sans-960/
    

    View Slide

24. why?
    

    View Slide

25. Ref: https://github.com/scottkellum/modular-scale,
    http://thesassway.com/projects/modular-scale
    // two up the modular scale
    width: modular-scale(2);
    // Shorthand for the line above
    width: ms(2);
    // two up the modular scale with a base size of 1em
    width: modular-scale(2, 1em);
    // Same as above but on an octave scale
    width: modular-scale(2, 1em, octave() );
    Sassy Modular Scale
    

    View Slide

26. Thank You
    Elle Meredith | @aemeredith
    http://bit.ly/11OnBDo
    Ref: https://speakerdeck.com/aemeredith/better-web-typography-with-modular-scale
    

    View Slide

27. Online Resources:
    • More Perfect Typography by Tim Brown, http://vimeo.com/17079380
    • More Meaningful Typography by Tim Brown, http://alistapart.com/article/more-meaningful-typography
    • Type Inspired Interfaces by Dan Mall, http://24ways.org/2009/type-inspired-interfaces/
    • R(a|ela)tional Design by Billy Whited, http://blog.8thlight.com/billy-whited/2011/10/28/r-a-ela-tional-design.html
    • The Secret Law of Page Harmony by Alexander Ross Charchar, http://retinart.net/graphic-design/secret-law-of-page-harmony/
    • Page Proportions by Katherine Hughes, http://www.khughesdesign.com/proportion_lecture.pdf
    • Composing the New Canon: Music, Harmony, Proportion by Owen Gregory, http://24ways.org/2011/composing-the-new-canon/
    • The Typographic Scale by Alexander Ross Charchar, http://retinart.net/typography/typographicscale/
    Reference Books:
    • The Elements of Typographic Style by Robert Bringhurst
    • The Typographic Desk Reference by Theodore Rosendorf
    • Thinking with Type by Ellen Lupton, http://www.thinkingwithtype.com
    • Stop Stealing Sheep & find out how type works by Erik Spiekermann & E.M. Ginger
    

    View Slide