Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save RyanRoberts/0d53b807010108b5ef09 to your computer and use it in GitHub Desktop.
Save RyanRoberts/0d53b807010108b5ef09 to your computer and use it in GitHub Desktop.
Precision responsive typography
<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>
<p>More details here: <a target="blank" href="http://madebymike.com.au/writing/precise-control-responsive-typography/">http://madebymike.com.au/writing/precise-control-responsive-typography/</a></p>
// 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;
: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;
}
}
// Not related to this technique
body{ padding: 0 1em; }
table{
border-collapse: collapse;
border-spacing: 0px;
border: 1px solid #CBCBCB;
}
td,th {
padding: 0.25rem .5rem;
border: 1px solid #CBCBCB;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment