Precision responsive typography

index.html

<h1>Responsive Typography</h1>

<p>It appears that by using calc() and vw we can get responsive typography that scales perfectly between specific pixel values within a specific viewport range.</p>
<p>The problem with the common approach to responsive typography is that it is jumpy and requires a lot of media queries.</p>
<p>Viewport units are fluid but lack precise control over font-size.</p>
<p>Typically you might use a table like this to work out the range of font sizes across different resolutions.</p>
<table>
  <tbody>
    <tr>
      <th>Viewport units:</th><th>1vw</th><th>2vw</th><th>3vw</th><th>4vw</th><th>5vw</th>
    </tr>
    <tr>
      <th>Viewport size</th><th colspan="5">font-size in pixels</th>
    </tr>
    <tr>
      <th>400px</th><td>4px</td><td>8px</td><td>12px</td><td>16px</td><td>20px</td>
    </tr>
    <tr>
      <th>500px</th><td>5px</td><td>10px</td><td>15px</td><td>20px</td><td>25px</td>
    </tr>
    <tr>
      <th>600px</th><td>6px</td><td>12px</td><td>18px</td><td>24px</td><td>30px</td>
    </tr>
    <tr>
      <th>700px</th><td>7px</td><td>14px</td><td>21px</td><td>28px</td><td>35px</td>
    </tr>
    <tr>
      <th>800px</th><td>8px</td><td>16px</td><td>24px</td><td>32px</td><td>40px</td>
    </tr>
    <tr>
      <th>900px</th><td>9px</td><td>18px</td><td>27px</td><td>36px</td><td>45px</td>
    </tr>
    <tr>
      <th>1000px</th><td>10px</td><td>20px</td><td>30px</td><td>40px</td><td>50px</td>
    </tr>
    <tr>
      <th>1100px</th><td>11px</td><td>22px</td><td>33px</td><td>44px</td><td>55px</td>
    </tr>
    <tr>
      <th>1200px</th><td>12px</td><td>24px</td><td>36px</td><td>48px</td><td>60px</td>
    </tr>
  </tbody>
</table>
<p>Looking at the table you can see there are many limitations. There is no way to scale between 16px and 36px for example over the given viewport sizes. That is a shame because this is the type of control designers expect (and should expect).</p>
<p>Imagine you want the smallest font-size to be 12 pixels and then once the device width is greater than 400px you want the font-size to gradually increase to 24px and stop scaling by the time the viewport reaches 800px. That is exactly what this demo does!</p>
<p>This is achieved by using viewport units in combination with calc().</p>
<hr>
<p>More details here: <a target="blank" href="https://madebymike.com.au/writing/precise-control-responsive-typography/">https://madebymike.com.au/writing/precise-control-responsive-typography/</a></p>
<p>Get the SCSS mixin: <a href="https://codepen.io/MadeByMike/pen/vNrvdZ">https://codepen.io/MadeByMike/pen/vNrvdZ</a></p>
<p>See all examples in the collection: <a href="https://codepen.io/collection/nLbRMZ">https://codepen.io/collection/nLbRMZ</a></p>
<p>Read about it on Smashing: <a href="https://www.smashingmagazine.com/2016/05/fluid-typography/">https://www.smashingmagazine.com/2016/05/fluid-typography/</a></p>

precision-responsive-typography.markdown

Precision responsive typography

I've not seen this before so I think I've figured out something new and hopefully useful.

It appears that by using calc() and vw we can get responsive typography that scales perfectly between specific pixel values within a specific viewport range.

Check it out. (might be buggy in some browsers)

http://madebymike.com.au/writing/precise-control-responsive-typography/

A Pen by Mike on CodePen.

License.

style.scss

// These values are the minimum and maximum viewport sizes to apply the font scaling
$min_width: 400;
$max_width: 800;
// These values represent the range of fon-tsize to apply
// These values effect the base font-size, headings and other elements will scale proportionally
$min_font: 12;
$max_font: 24; 

// Looking for a mixin? Try: https://codepen.io/MadeByMike/pen/vNrvdZ

:root { font-size: #{$min_font}px; }
// This part is a little bit ugly, I will explain what is going on in a blog post soon.
@media (min-width: #{$min_width}px) and (max-width: #{$max_width}px){
  :root { 
    font-size: calc( #{$min_font}px + (#{$max_font} - #{$min_font}) * ( (100vw - #{$min_width}px) / ( #{$max_width} - #{$min_width}) ));
  }
}
@media (min-width: #{$max_width}px){
   :root { 
     font-size: #{$max_font}px;
   }
}