Better Web Typography with Modular Scale

Transcript

1. Better Web Typography with Modular Scale Elle Meredith

2. None

3. Grids

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

5. Golden Ratio 1:1.618

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

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

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

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

10. 16

11. 16 * 1.618 = 25.888

12. 16 / 1.618 = 9.889

13. 16

14. 16 25.9

15. 16 25.9 41.8

16. 16 25.9 41.8 9.8

17. 16 25.9 41.8 9.8 6.1

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

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

    Double Stranded

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

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

22. How?

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

24. why?

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

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

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