Better Web Typography with Modular Scale

Better Web Typography with Modular Scale

492d339a2ec66fa8d80e937abddb58e6?s=128

Elle Meredith

March 27, 2013
Tweet

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