Better Web Typography with Modular Scale Elle Meredith 

No content

Grids 

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 

Golden Ratio 1:1.618 

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

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

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

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

16 

16 * 1.618 = 25.888 

16 / 1.618 = 9.889 

16 

16 25.9 

16 25.9 41.8 

16 25.9 41.8 9.8 

16 25.9 41.8 9.8 6.1 

16 25.9 41.8 9.8 6.1 12 19.4 31.4 7.4 4.5 

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

Ref: http://modularscale.com/ 

Ref: http://modularscale.com/ 

How? 

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

why? 

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 

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

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