SlideShare une entreprise Scribd logo
1  sur  14
R(el|a)tional Design
Better Typography using Modular Scales.




       Billy Whited
       User Experience Craftsman
“A modular scale, like a musical scale, is a
 prearranged set of harmonious
 proportions.




 Robert Bringhurst
 The Elements of Typographic Style
“...a sequence of numbers that relate to one
 another in a meaningful way.




 Tim Brown
 More Meaningful Typography
“Using a modular scale on the web means
 choosing numbers from the scale for type
 sizes, line height, line length, margins,
 column widths, and more.




 Tim Brown
 More Meaningful Typography
1. Consider your content.
2. How much variety will you need?
3. Be a Synesthete.




      Major Second on C


      Perfect Fourth on C
“I’ve found that a variety of things can serve
 as an important number. The size at which
 caption text looks best, for instance, or a
 large number like the width of a piece of
 media...ensures that something about
 those elements resonates with the layout
 as a whole.




 Tim Brown
 More Meaningful Typography

Contenu connexe

Similaire à Relational Design with Modular Scales

Similaire à Relational Design with Modular Scales (9)

Typography
TypographyTypography
Typography
 
MCMAGCOVER-Typo1
MCMAGCOVER-Typo1MCMAGCOVER-Typo1
MCMAGCOVER-Typo1
 
Typography
TypographyTypography
Typography
 
Photoshop terminology
Photoshop terminologyPhotoshop terminology
Photoshop terminology
 
Unit 2 graphics
Unit 2 graphicsUnit 2 graphics
Unit 2 graphics
 
Lettering Techniques
Lettering TechniquesLettering Techniques
Lettering Techniques
 
Typography in UI Design
Typography in UI DesignTypography in UI Design
Typography in UI Design
 
Typography
TypographyTypography
Typography
 
Chap7
Chap7Chap7
Chap7
 

Relational Design with Modular Scales

  • 1. R(el|a)tional Design Better Typography using Modular Scales. Billy Whited User Experience Craftsman
  • 2.
  • 3.
  • 4. “A modular scale, like a musical scale, is a prearranged set of harmonious proportions. Robert Bringhurst The Elements of Typographic Style
  • 5. “...a sequence of numbers that relate to one another in a meaningful way. Tim Brown More Meaningful Typography
  • 6.
  • 7.
  • 8.
  • 9. “Using a modular scale on the web means choosing numbers from the scale for type sizes, line height, line length, margins, column widths, and more. Tim Brown More Meaningful Typography
  • 10. 1. Consider your content.
  • 11. 2. How much variety will you need?
  • 12.
  • 13. 3. Be a Synesthete. Major Second on C Perfect Fourth on C
  • 14. “I’ve found that a variety of things can serve as an important number. The size at which caption text looks best, for instance, or a large number like the width of a piece of media...ensures that something about those elements resonates with the layout as a whole. Tim Brown More Meaningful Typography