davidbgk
/
larlet-fr-david-cache

title: A Responsive Guide to Type Sizing
url: http://blog.cloudfour.com/responsive-guide-to-type-sizing/
hash_url: 9ff37a890e93f6f4d5a1bbb30657ff0d

<p>When starting new projects, a CSS builder&#8217;s initial concerns tend to involve typography. Setting a typographic foundation with the right mixture of ingredients can form something solid enough to support many other building blocks of design. It&#8217;s an approach that makes structural sense.</p>
<p><em>Proportions</em> are a key ingredient to the mixture. Calibrating your type proportions for a balance of aesthetics and order can be an obsessive undertaking. It’s a challenge getting proportions right for a given screen size, let alone <em>any possible</em> screen size. This process can be less challenging &#8212; even for responsive designs &#8212; if you use a <em>modular scale</em> and let math do the work for you.</p>
<h3>Using a modular scale for typographic proportions</h3>
<p>In his <a href="http://alistapart.com/article/more-meaningful-typography">detailed article</a> on the subject, Tim Brown demonstrates using a modular scale for composing type. He explains how compositions can benefit from using numbers that relate to each other in a meaningful way:</p>
<blockquote><p>Modular scales[&#8230;] help us achieve a visual harmony not found in compositions that use arbitrary, conventional, or easily divisible numbers.</p></blockquote>
<p>This <em>modulation-based</em> approach is particularly useful for determining type sizes. Selecting sizes using a ratio (instead of guessing) yields a more harmonious range of proportions.</p>
<p>With tools like <a href="http://www.modularscale.com">this indispensable calculator</a>, you can see how different <em>bases</em> and <em>ratios</em> affect your scale. These are the variables in your scale&#8217;s equation. The value produced by multiplying or dividing these variables is a <em>step</em> on your scale. Repeating the operation on each resulting value forms a new step:</p>
<figure style="margin:1em 0; text-align:center">
<table style="display:table; width:100%; table-layout:fixed">
<thead>
<tr>
<th style="text-align:center">Step</th>
<th style="text-align:center">Math</th>
<th style="text-align:center">Result</th>
</tr>
</thead>
<tbody style="font:1em 'source code pro',monospace">
<tr>
<td>+3</td>
<td>&nbsp;40 × 2</td>
<td>80&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td>+2</td>
<td>&nbsp;20 × 2</td>
<td>40&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td>+1</td>
<td>&nbsp;10 × 2</td>
<td>20&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr style="opacity:.5">
<td>&nbsp;0</td>
<td>&nbsp;none</td>
<td>10&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td>−1</td>
<td>&nbsp;10 ÷ 2</td>
<td>&nbsp;5&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td>−2</td>
<td>&nbsp;&nbsp;5 ÷ 2</td>
<td>&nbsp;2.5&nbsp;</td>
</tr>
<tr>
<td>−3</td>
<td>2.5 ÷ 2</td>
<td>&nbsp;1.25</td>
</tr>
</tbody>
</table>
<figcaption style="font-style:italic">
    Example with a base of 10 and a ratio of 2<br />
  </figcaption>
</figure>
<p>You can also associate each step in the sequence with the number of times the ratio has been multiplied or divided:</p>
<figure style="margin:1em 0; text-align:center">
<table style="display:table; width:100%; table-layout:fixed">
<thead>
<tr>
<th style="text-align:center">Step</th>
<th style="text-align:center">Math</th>
<th style="text-align:center">Result</th>
</tr>
</thead>
<tbody style="font:1em 'source code pro',monospace">
<tr>
<td>+3</td>
<td>10 × 2 × 2 × 2</td>
<td>80&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td>+2</td>
<td>10 × 2 × 2&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td>40&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td>+1</td>
<td>10 × 2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td>20&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr style="opacity:.5">
<td>&nbsp;0</td>
<td><em>none</em></td>
<td>10&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td>−1</td>
<td>10 ÷ 2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td>&nbsp;5&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td>−2</td>
<td>10 ÷ 2 ÷ 2&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td>&nbsp;2.5&nbsp;</td>
</tr>
<tr>
<td>−3</td>
<td>10 ÷ 2 ÷ 2 ÷ 2</td>
<td>&nbsp;1.25</td>
</tr>
</tbody>
</table>
</figure>
<p>Experimenting with base and ratio parameters is a quick way to gauge how much proportional contrast is right for your project. Compare the following scales:</p>
<ul>
<li><a href="http://www.modularscale.com/?1&amp;em&amp;1.618&amp;web&amp;text">The golden section</a> (1.618)</li>
<li><a href="http://www.modularscale.com/?1&amp;em&amp;1.2&amp;web&amp;text">The minor third</a> (1.2)</li>
</ul>
<p>Due to their ratios, these scales have wildly differing degrees of change between each step. The &#8220;golden section&#8221; ratio yields much more change than the &#8220;minor third&#8221;. Consider how much change you&#8217;re likely to need, and how it correlates with varying screen sizes and content hierarchy.</p>
<figure style="margin:1em 0">
  <a href="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/wp-content/uploads/2015/12/modularscale-ratios_compared.png"><img src="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/wp-content/uploads/2015/12/modularscale-ratios_compared.png" alt="Comparing two scale ratios"></a></p>
<figcaption style="text-align:center; font-style:italic">
    Scales with the ratios of 1.618 and 1.2 compared on <a href="http://modularscale.com">modularscale.com</a><br />
  </figcaption>
</figure>
<p>The balance of typographic contrast in scale is dependent on screen size. A scale that works well on a large screen may have too much contrast for a small screen (and feel obtrusive). Likewise, a scale that is harmonious on a small screen may be too subtle when viewed on a large screen.</p>
<p>One solution to this conundrum is to create a scale intended for small screens that is also capable of adapting for large ones. The first thing to consider when creating that scale is which ratio to use.</p>
<figure style="margin:1em 0; text-align:center">
<table style="display:table; width:100%; table-layout:fixed">
<thead>
<tr>
<th style="text-align:center">Step</th>
<th style="text-align:center">Font size</th>
<th>Result</th>
</tr>
</thead>
<tbody style="font-family:'source code pro',monospace">
<tr>
<td>&nbsp;0</td>
<td>&nbsp;&nbsp;1.0em</td>
<td>
<div style="font-size:1em; text-align:left">Abcdefg</div>
</td>
</tr>
<tr>
<td>+1</td>
<td>&nbsp;&nbsp;1.2em</td>
<td>
<div style="font-size:1.2em; text-align:left">Abcdefg</div>
</td>
</tr>
<tr>
<td>+2</td>
<td>&nbsp;1.44em</td>
<td>
<div style="font-size:1.44em; text-align:left">Abcdefg</div>
</td>
</tr>
<tr>
<td>+3</td>
<td>1.728em</td>
<td>
<div style="font-size:1.728em; text-align:left">Abcdefg</div>
</td>
</tr>
<tr>
<td>+4</td>
<td>2.074em</td>
<td>
<div style="font-size:2.074em; text-align:left">Abcdefg</div>
</td>
</tr>
<tr>
<td>+5</td>
<td>2.488em</td>
<td>
<div style="font-size:2.488em; text-align:left">Abcdefg</div>
</td>
</tr>
</tbody>
</table>
<figcaption style="font-style:italic">
    The minor third ratio (1.2) with a base of 1em<br />
  </figcaption>
</figure>
<p><a href="http://www.modularscale.com/?1&amp;em&amp;1.2&amp;web&amp;text">The minor third</a> ratio of 1.2 yields a gradually changing range of sizes. They all feel reasonable for small screens, and are distinct enough for levels of typographic hierarchy. At step #5, the resulting size can still be used while retaining a reasonable number of characters per line. With these attributes, this ratio feels like a good selection for small screen proportions.<sup style="line-height:0"><a href="#responsive-guide-to-type-sizing-fn1">1</a></sup></p>
<h3>Applying your scale from the ground up</h3>
<p>After figuring out a scale that works well for your project, you&#8217;ll probably want to put it into practice. CSS offers a few options:</p>
<ol>
<li>Copying and pasting numbers for a bunch of property values</li>
<li>Using preprocessors like <a href="http://sass-lang.com">Sass</a> with built-in math capabilities</li>
<li>Using the native CSS <code>calc()</code> function</li>
</ol>
<p>The following examples employ option #3, using <a href="https://github.com/postcss">PostCSS</a> in order to provide browser support for <code>calc()</code> and <code>var()</code>. If you prefer a different CSS processor, you can apply the same operations with that tool&#8217;s own arithmetic and variable syntax.<sup style="line-height:0"><a href="#responsive-guide-to-type-sizing-fn2">2</a></sup></p>
<p>For more complex modular scale applications, you should check out these plugins available for <a href="https://github.com/postcss">PostCSS</a> and <a href="http://sass-lang.com">Sass</a>:</p>
<ul>
<li><a href="https://github.com/kristoferjoseph/postcss-modular-scale">postcss-modular-scale</a></li>
<li><a href="https://github.com/modularscalemodularscale-sass">modularscale-sass</a></li>
</ul>
<p>They provide a cleaner syntax than <code>calc()</code> for getting scale values, and also support multiple values for <em>base</em> and <em>ratio</em>.</p>
<h4>Configuring the variables</h4>
<p>The first step is to define values for the <em>ratio</em> and <em>base</em> variables that much of the scale logic depends on:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #3333ff;">:root </span><span style="color: #00AA00;">&#123;</span>
  --ratio<span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">1.2</span><span style="color: #00AA00;">;</span>
  --base<span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">1</span><span style="color: #00AA00;">;</span>
  --base-em<span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> <span style="color: #933;">1em</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
  --base-px<span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> <span style="color: #933;">16px</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>There are three base-related properties defined here. This is to provide flexibility when different CSS units (or no units) are needed.</p>
<p>Next, you need to establish the range of scale steps you&#8217;re likely to use:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #3333ff;">:root </span><span style="color: #00AA00;">&#123;</span>
  --ms0<span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">1</span><span style="color: #00AA00;">;</span>
  --ms1<span style="color: #00AA00;">:</span> var<span style="color: #00AA00;">&#40;</span>--ratio<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>                    <span style="color: #808080; font-style: italic;">/* 1.2   */</span>
  --ms2<span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--ratio<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms1<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* 1.44  */</span>
  --ms3<span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--ratio<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms2<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* 1.728 */</span>
  --ms4<span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--ratio<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms3<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* 2.074 */</span>
  --ms5<span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--ratio<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms4<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* 2.488 */</span>
  --ms6<span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--ratio<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms5<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* 2.986 */</span>
  --ms7<span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--ratio<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms6<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* 3.583 */</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>With these step properties defined, you can now compute them with your base to get values from your scale:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms1<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* 1.2em  */</span>
<span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms2<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* 1.44em */</span></pre></td></tr></table></div>

<h4>Establishing default sizes</h4>
<p>The browser default <code>font-size</code> paired with the scale step of 1.44 for <code>line-height</code> feels like an <a href="http://practicaltypography.com/line-spacing.html">appropriate choice</a> for body copy:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;">body <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms0<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms2<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Headings probably don&#8217;t need to consist of six different sizes (as there are other ways to differentiate them). However, if you do wish to incorporate a different size for each, you can use a series of steps from your scale:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;">h6 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> / var<span style="color: #00AA00;">&#40;</span>--ms1<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
h5 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms0<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
h4 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms1<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
h3 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms2<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
h2 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms3<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
h1 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms4<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>In addition to heading <code>font-size</code>, you should also consider the values for <code>line-height</code>.</p>
<blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">One of the most overlooked things in front-end development is the line-height of wrapped headings. They&#39;re often way too large</p>
<p>&mdash; Matt Stow (@stowball) <a href="https://twitter.com/stowball/status/672710430628810752">December 4, 2015</a></p></blockquote>
<p><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<p>Using a lower step of the scale in this case can benefit readability when lines are wrapping:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;">h3<span style="color: #00AA00;">,</span>
h2 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms1<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
h1 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms0<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>With these defaults for body copy and headings in place, you have a nice foundational hierarchy that works well on small screens:</p>
<figure style="margin:1em 0">
  <a href="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/wp-content/uploads/2015/12/modularscale-ratio_in_use1.png"><img src="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/wp-content/uploads/2015/12/modularscale-ratio_in_use1.png" alt="Ratio of 1.2 on a small screen"></a></p>
<figcaption style="text-align:center; font-style:italic">
    A scale with a ratio of 1.2 applied to content on a 320&#215;480 screen<br />
  </figcaption>
</figure>
<h3>Expanding your scale when proportional contrast is needed</h3>
<p>Increasing screen sizes and viewing distances will reveal new typographic requirements for your layout. Your body copy and the contrast in scale of all typographic elements will likely need adjustments to suit the new context:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #a1a100;">@media (min-width: 480px) {</span>
  html <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-px<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms1<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Bumping the global font size like this is a practical adjustment that requires little effort. While this practice is <a href="https://bugsnag.com/blog/responsive-typography-with-rems">common</a>, it&#8217;s worth noting that even small tweaks like this can leverage steps from your modular scale. Rather than incrementing the size by an arbitrary few pixels or a percentage, you can use your scale to determine the new value.</p>
<p>In line with amplifying your body copy, you might also want to increase the amount of change between each heading size. You can do this by overriding the larger headings with sizes from higher up your scale:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #a1a100;">@media (min-width: 768px) {</span>
  h3 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms3<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
  h2 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms4<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
  h1 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms5<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #a1a100;">@media (min-width: 1024px) {</span>
  h2 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms5<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
  h1 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms6<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #a1a100;">@media (min-width: 1360px) {</span>
  h1 <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms7<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>With these size adjustments in place, viewport width will determine how far up the scale your headings are allowed to climb:</p>
<p><iframe height='480' scrolling='no' src='//codepen.io/erikjung/embed/XmOdEo/?height=480&#038;theme-id=0&#038;default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/erikjung/pen/XmOdEo/'>Responsive Type Sizing</a> by Erik Jung (<a href='http://codepen.io/erikjung'>@erikjung</a>) on <a href='http://codepen.io'>CodePen</a>.<br />
</iframe></p>
<p>(View <a href="http://codepen.io/erikjung/pen/XmOdEo">the full CodePen</a> to see how the text size responds.)</p>
<h3>Broadening the usage of your scale</h3>
<p>Limiting your scale&#8217;s influence to just specific elements would be <a href="https://www.youtube.com/watch?v=Ru9e2rTHeuk">highly illogical</a>. You want flexible, abstracted styles to build complex interfaces with. Utility classes can provide that flexibility:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.u-textBigger</span> <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">*</span> var<span style="color: #00AA00;">&#40;</span>--ms1<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.u-textSmaller</span> <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> calc<span style="color: #00AA00;">&#40;</span>var<span style="color: #00AA00;">&#40;</span>--base-em<span style="color: #00AA00;">&#41;</span> / var<span style="color: #00AA00;">&#40;</span>--ms1<span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>With one ratio relating all the text sizes, anything affected by these classes will adhere to the steps of your scale. Even when combining or nesting the classes, the resulting text will remain in relative proportion:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="html5" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;u-textBigger&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h2</span>&gt;</span>Now I'm as big as an H1<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h2</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>Now I'm as big as an H2<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;u-textSmaller&quot;</span>&gt;</span>I haven't changed at all.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
&nbsp;
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;u-textSmaller&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;u-textSmaller&quot;</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;u-textBigger&quot;</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;u-textBigger&quot;</span>&gt;</span>Same as it ever was.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></td></tr></table></div>

<p><iframe height='320' scrolling='no' src='//codepen.io/erikjung/embed/RrrzVr/?height=320&#038;theme-id=0&#038;default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/erikjung/pen/RrrzVr/'>Responsive Type Sizing (utils)</a> by Erik Jung (<a href='http://codepen.io/erikjung'>@erikjung</a>) on <a href='http://codepen.io'>CodePen</a>.<br />
</iframe></p>
<h3>TL;DR</h3>
<ul>
<li>Use a modular scale to define your typographic proportions.</li>
<li>Create a scale that is flexible enough to work on many screen sizes.</li>
<li>Use higher steps from your scale when more proportional contrast is needed.</li>
<li>Don&#8217;t limit the use of your scale to specific elements.</li>
</ul>
<h3>Further reading</h3>
<ul>
<li><a href="http://alistapart.com/article/more-meaningful-typography">More Meaningful Typography</a> by Tim Brown</li>
<li><a href="http://typecast.com/blog/a-more-modern-scale-for-web-typography">A More Modern Scale for Web Typography</a> by Jason Pamental</li>
<li><a href="http://madebymike.com.au/writing/precise-control-responsive-typography">Precise control over responsive typography</a> by Mike Riethmuller</li>
<li><a href="https://bugsnag.com/blog/responsive-typography-with-modular-scale">Responsive typography with Modular Scale</a> by Max Luster</li>
<li><a href="http://www.modularscale.com">Modular Scale Calculator</a></li>
<li><a href="http://www.pearsonified.com/typography">Golden Ratio Typography Calculator</a></li>
<li><a href="http://www.gridlover.net/try">Gridlover</a></li>
<li><a href="http://type-scale.com">Type Scale</a></li>
</ul>
<hr />
<h5>Footnotes</h5>
<ol style="font-size:80%;">
<li id="responsive-guide-to-type-sizing-fn1">
    Using one base and one ratio isn&#8217;t the only way to arrive at a scale that works within small screen limitations. You can also create a <em>multi-stranded</em> scale by using multiple base or ratio values instead of just one. Here is an <a href="http://www.modularscale.com/?1,4&#038;em&#038;1.5&#038;web&#038;text">example</a> using a secondary base value to shorten the distance between each step. See <a href="http://modularscale.com">modularscale.com</a> for a better explanation.
  </li>
<li id="responsive-guide-to-type-sizing-fn2">
    The <a href="http://github.com/cssnext/postcss-cssnext">postcss-cssnext</a> plugin can be used to transform the output of <code>calc()</code> and <code>var()</code>.
  </li>
</ol>