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

More Decks by Elle Meredith

Other Decks in Design


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

  3. 16

  4. 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
  5. 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