Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Better Web Typography with Modular Scale

Better Web Typography with Modular Scale

Elle Meredith

March 27, 2013
Tweet

More Decks by Elle Meredith

Other Decks in Design

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. 16

    View Slide

  11. 16 *
    1.618 = 25.888

    View Slide

  12. 16 / 1.618 = 9.889

    View Slide

  13. 16

    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