CHAPTER 9 The Next Steps for Web Typography
Modular Scales
The most common way to establish hierarchy is with a typographic scale.
Tim Brown created Modular Scale^76 , an online calculator that returns a
series of related values based on a given body copy size and any of sever-
al common mathematical scales and musical intervals. The calculator is
named after the typographic concept of the same name. As Brown said in
his article “More Meaningful Typography”^77 :A modular scale is a sequence of numbers that relate to one another in a
meaningful way.For the purpose of this chapter, I selected 16px as the ideal text size, and
the 2:3 perfect fifth scale, which gave me an array of useful values: 7.111,
10.667, 16 (the initial value), 24, 36, and 54. Translated to rems and applied to
subheads and captions in CSS, they look like this:h4 { font-size: 1rem }
h3 { font-size: 1.5rem }
h2 { font-size: 2.25rem }
h1 { font-size: 3.375rem }
caption { font-size: 0.667rem }
small { font-size: 0.444rem }Subhead Styles
While a typographic scale combined with different font weights is a great
way to establish hierarchy and balance on large screens, such variety can
stand in the way on small screens. With large screens there are many more
informational elements and the main content can often compete with
advertisements and other related or unrelated content.76 http://modularscale.com
77 http://www.alistapart.com/articles/more-meaningful-typography/