<div class="wrapper base152">
<h1>Responsive and Fluid Typography</h1>
<h4>Linear equation <a target="_blank" rel="noopener" title="by MathsIsFun" href="https://www.mathsisfun.com/equation_of_line.html">y = mx + b</a> is one of the easiest ways to implement responsively and fluidly resizing fonts. This tutorial shows how to use a simplified version of the equation without <code>@media</code> queries.
</h4>
<p>The following example requirements will be used:</p>
<ul>
<li>Assume page visitors can be using any kind of device</li>
<li>root font size on small devices: <b>~14px</b></li>
<li>root font size on large devices: <b>~20px</b></li>
<li>the page must responsively scale font sizes</li>
</ul>
<h2 id="tilder" title="too long, din't read">tl;dr - example for root font-size</h2>
<p>The <i>quick and dirty</i> solution requires a simple line of CSS:</p>
<pre>
<code>
:root { font-size: calc(0.658vmin + 0.75rem) }
/*
y=mx+b using points p1( 304,14), small devices
and p2(1216,20), large devices
=> y=0.00658x + 12 ('Average' base 152)
*/
</code>
</pre>
<p>Convert all your properties with pixel units to <code>rem</code> by dividing them by 16 and keep using only either <code>rem</code> or <code>em</code> as required.</p>
<h2 id="libra" title="long, but read anyway">l;bra - both responsive and fluid font sizes in one equation: <b>y=mxd+b</b></h2>
<p>
In its original form <b>y=mx+b</b> is called the <b>slope intercept form</b> of the <a target="_blank" rel="noopener" title="by MathsIsFun" href="https://www.mathsisfun.com/equation_of_line.html">Equation of a Straight Line</a>. When properly used, the result of the equation makes a font resize both responsively and fluidly.</p>
<p>The fully substituted equation is hard to use and maintain as we need to define two points on a 2D XY-graph and use the coordinates of those points, <b>p1(x1,y1)</b> and <b>p2(x2,y2)</b>, to calculate font sizes. At the bottom of this page you can find <a href="#the-math">y=mx+b Math in a Nutshell</a>.
</p>
<p>Some prior information makes using the math much easier. All we have to do is deal with four parameters to get the calculated size we need:
</p>
<ul>
<li><b>m</b> - 'Slope' or steepness of the line, 1 divided by the viewport breakpoint step size</li>
<li><b>x</b> - the current viewport size, <b>always 100vp</b>, where <b>vp</b> is either <code>vh</code>, <code>vw</code>, <code>vmin</code> or <code>vmax</code></li>
<li><b>d</b> - change in <b>(y)</b> per step of <b>(m)</b>, the value a font size has to change per breakpoint step size</li>
<li><b>b</b> - 'Y-intercept' or initial value of <b>(y)</b> at viewport size <b>(x)</b> = 0</li>
</ul>
<pre>
<code>
/* y=mxd + b in CSS pseudo code: */
.basefont { font-size: calc(m * 100vp * d + b) }
</code>
</pre>
<h4>In words: every n-th of the current viewport size add or subtract a fixed number of pixels relative to a starting size.</h4>
<p><b>(x)</b> current viewport size, is the easiest as it <b>is always 100vp</b> and as fonts (in general) are not viewport width or height dependent we can use either <code>vmin</code> or <code>vmax</code>. <i>For fonts using <code>vmin</code> as calculation unit yields the best final result.</i></p>
<p><b>(d)</b> change in <b>(y)</b> per step of <b>(m)</b>, this value determines how much pixels a font size will change each breakpoint. When <b>(d) = 1</b> you can leave this parameter out of the equation altogether. Any value will do, but be aware that <i>the equation is linear</i> meaning that the change will be the same for each breakpoint step size.</p>
<p><b>d = (y<sub>2</sub>)-fontsize minus (y<sub>1</sub>)-fontsize divided by number of steps between (y<sub>1</sub>) and (y<sub>2</sub>)</b>.
<br>From our example we can derive: <b>d = (20 - 14) / (8 - 2) = 1</b> (see table below).</p>
<p><b>(b)</b> Y-intercept, the value of the required result when the current viewport size is <b>0</b>. Once we have defined the value for <b>(d)</b> in our equation, <b>(b)</b> can be derived with a simple manual calculation:</p>
<p><b>b = (y<sub>1</sub>)-fontsize minus (d) * (y<sub>1</sub>)-step</b> where <b>(y<sub>1</sub>)</b> is the required root font size for small devices.
</p>
<p>Given the example requirements:
<br>when <b>(d) = 1 </b> then <b>b = 14 - 1 * 2 => b = 12</b>
<br>when <b>(d) = 1.5</b> then <b>b = 14 - 1.5 * 2 => b = 11</b>
</p>
<p><b>(m)</b> the 'Slope' of the line, the table below shows some familiar viewport breakpoint values, perhaps scattered over several columns. As <i>the equation is linear</i>, a sinlge column with a step size that best meets your requirements needs to be chosen. Then derive:
</p>
<p><b>m = 1 / step size</b></p>
<div class="table">
<table>
<caption high="2nd">
<h3>font sizes at viewport breakpoint step sizes</h3>
</caption>
<thead>
<tr><th colspan="2">font sizes<br>(Y-axis in px)</th><th colspan="7">viewport breakpoint steps per base (X-axis in px)</th></tr>
<tr><td><b>(d)</b> = 1</td><td><b>(d)</b> = 1.5</td><td>step</td><td>base 144<br>(iOS)</td><td>base 160<br>(Windows)</td><td>base 152<br>(Average)</td><td>base 150</td><td>base 180</td><td>base 100</td></tr>
</thead>
<tbody>
<col><col><col><col><col><col><col><col><col>
<tr ><td><b>(b)</b> 12</td><td>11.0</td><td> 0</td><td> 0</td><td> 0</td><td> 0</td><td> 0</td><td> 0</td><td> 0</td></tr>
<tr ><td> 13</td><td>12.5</td><td> 1</td><td> 144</td><td> 160</td><td> 152</td><td> 150</td><td> 180</td><td> 100</td></tr>
<tr high><td><b>(y1)</b> 14</td><td>14.0</td><td> 2</td><td> 288</td><td> 320</td><td><b>(x1)</b> 304</td><td> 300</td><td> 360</td><td> 200</td></tr>
<tr ><td> 15</td><td>15.5</td><td> 3</td><td> 432</td><td> 480</td><td> 456</td><td> 450</td><td> 540</td><td> 300</td></tr>
<tr ><td> 16</td><td>17.0</td><td> 4</td><td> 576</td><td> 640</td><td> 608</td><td> 600</td><td> 720</td><td> 400</td></tr>
<tr ><td> 17</td><td>18.5</td><td> 5</td><td> 720</td><td> 800</td><td> 760</td><td> 750</td><td> 900</td><td> 500</td></tr>
<tr ><td> 18</td><td>20.0</td><td> 6</td><td> 864</td><td> 960</td><td> 912</td><td> 900</td><td>1080</td><td> 600</td></tr>
<tr ><td> 19</td><td>21.5</td><td> 7</td><td>1008</td><td>1120</td><td>1064</td><td>1050</td><td>1260</td><td> 700</td></tr>
<tr high><td><b>(y2)</b> 20</td><td>23.0</td><td> 8</td><td>1152</td><td>1280</td><td><b>(x2)</b> 1216</td><td>1200</td><td>1440</td><td> 800</td></tr>
<tr ><td> 21</td><td>24.5</td><td> 9</td><td>1296</td><td>1440</td><td>1368</td><td>1350</td><td>1620</td><td> 900</td></tr>
<tr ><td> 22</td><td>26.0</td><td>10</td><td>1440</td><td>1600</td><td>1520</td><td>1500</td><td>1800</td><td>1000</td></tr>
<tr ><td> 23</td><td>27.0</td><td>11</td><td>1584</td><td>1760</td><td>1672</td><td>1650</td><td>1980</td><td>1100</td></tr>
<tr ><td> 24</td><td>28.5</td><td>12</td><td>1728</td><td>1920</td><td>1824</td><td>1800</td><td>2160</td><td>1200</td></tr>
<tr ><td> 25</td><td>30.0</td><td>13</td><td>1872</td><td>2080</td><td>1976</td><td>1950</td><td>2340</td><td>1300</td></tr>
<tr ><td> 26</td><td>31.5</td><td>14</td><td>2016</td><td>2240</td><td>2128</td><td>2100</td><td>2520</td><td>1400</td></tr>
<tr ><td> 27</td><td>33.0</td><td>15</td><td>2160</td><td>2400</td><td>2280</td><td>2250</td><td>2700</td><td>1500</td></tr>
<tr ><td> 28</td><td>34.5</td><td>16</td><td>2304</td><td>2560</td><td>2432</td><td>2400</td><td>1880</td><td>1600</td></tr>
</tbody>
<tfoot>
<tr high="2nd"><td>step size</td><td></td><td><b>(m) = 1 /</b></td><td>144</td><td>160</td><td>152</td><td>150</td><td>180</td><td>100</td></tr>
<tr high="2nd"><td>y=mx+b</td>
<td></td><td></td>
<td>1/144𝑥+12</td>
<td>1/160𝑥+12</td>
<td>1/152𝑥+12</td>
<td>1/150𝑥+12</td>
<td>1/180𝑥+12</td>
<td>1/100𝑥+12</td>
</tr>
</tfoot>
</table>
</div>
<h3>Assembling the equation in CSS</h3>
<p>For this tutorial page I chose the 'Average base 152' (average of 'iOS' and 'Windows') column where viewport breakpoint step size is <b>152</b>. Filling in the parameters we get:</p>
<ul>
<li><b>m = 1 / 152</b>, where <b>152 = (144 + 160) / 2</b></li>
<li><b>x = 100vmin</b>, device independent</li>
<li><b>d = (20 - 14) / 6 = 1</b>, as shown before</li>
<li><b>b = 14 - 1 * 2 = 12</b>, ditto</li>
</ul>
<p>The intermediate CSS:</p>
<pre><code>:root { font-size: calc(1 / 152 * 100vmin * 1 + (12 / 16 * 1rem)) }</code></pre>
<p>The final, optimized CSS (as depicted in <a href="#tilder">tl;dr - example for root font-size</a>):</p>
<pre><code>:root { font-size: calc(0.658vmin + 0.75rem) }</code></pre>
<p>To be complete the final, optimized CSS where <b>(d) = 1.5</b>:</p>
<pre><code>:root { font-size: calc(0.658vmin * 1.5 + 0.75rem) }</code></pre>
<h4>Now that you have a responsive and fluid :root font-size, it is imperative that you only use <code>REM</code> or <code>EM</code> units for any CSS font-size and other sizes that are font-size dependent...and <code>REM</code> or <code>EM</code> units only...</h4>
<h3><br>CSS class examples using the bases of the table</h3>
<ul>
<li class="default"><code>html, .default { font-size: 1rem }</code><br>by default 16px, HTML default body font size for comparison: neither responsive nor fluid</li>
<li class="base144"><code>.base144 { font-size: calc(0.694vmin + 0.75rem) }</code><br>when your intended audience mainly uses iOS devices</li>
<li class="base152"><code>.base152 { font-size: calc(0.658vmin + 0.75rem) }</code><br>device independent, no OS specific audience targeted</li>
<li class="base160"><code>.base160 { font-size: calc(0.625vmin + 0.75rem) }</code><br>when your intended audience mainly uses Windows devices</li>
</ul>
<h3>Some alternatives</h3>
<ul>
<li class="base180"><code>.base180 { font-size: calc(0.556vmin + 0.75rem) }</code><br>first alternative base size (e.g. for 360x640)</li>
<li class="base150"><code>.base150 { font-size: calc(0.666vmin + 0.75rem) }</code><br>second alternative base size (arbitrary)</li>
</ul>
<h3>Special case when root/html font-size is set to 62.5%</h3>
<p>
If so, you will have already been using <code>REM</code> and <code>EM</code> throughout your CSS anticipating base 10 sizes instead of the more common imperial base 16.
I have not tested this yet, but for a smooth transition, you will likely want to use the <b>base100</b> equation found in the CSS. On this webpage (with base 160 root font-size) it just looks too small at any viewport size. When applicable, please let me know in the comments if this works for you.
</p>
<ul>
<li class="base100"><code>.base100 { font-size: calc((1.000vmin + 0.75rem) * 0.625) }</code><br>third alternative base size (looks small here, but should work out just fine for :root fs 62.5%)</li>
</ul>
<ul>
<li class="basedelta"><code>.basedelta { font-size: calc(0.00625 * 1.5 * 100vmin + 0.75rem) }</code><br>special case showing how to use the 'delta' parameter, in this case: <b>1.5</b></li>
</ul>
<h4>Now it is time for you to fork or export the pen and start experimenting with the code. Make sure to check the CSS for <code><code>.font-size</code> and <code><body>.padding</code> showing alternatives to using the math in this tutorial.</h4>
<div class="wrap-math">
<h2 id="the-math">y=mx+b Math in a Nutshell</h2>
<div>
<p big>
<span>Using points <span math>p1(x<sub>1</sub>,y<sub>1</sub>)</span> and <span math>p2(x<sub>2</sub>,y<sub>2</sub>)</span> where</span>
<br><span math>x<sub>1</sub>,y<sub>1</sub> = the small viewport size (x<sub>1</sub>) where required small size is (y<sub>1</sub>) </span>
<br><span math>x<sub>2</sub>,y<sub>2</sub> = the large viewport size (x<sub>2</sub>) where required large size is (y<sub>2</sub>)</span>
</p>
<p big>
<span>on a 2D graph with</span>
<br><span math>x-axis = viewport size values</span>
<br><span math>y-axis = size attribute values</span>
</p>
<p big>
<span>and variable definitions</span>
<br><span math>y = the calculated size we want to use in CSS</span>
<br><span math>m = (y<sub>2</sub> − y<sub>1</sub>) / (x<sub>2</sub> − x<sub>1</sub>) => delta Y / delta X</span>
<br><span math>x = either 100vh, vw, vmin or vmax, determined by viewport width/height dependency</span>
<br><span math>b = y<sub>1</sub> − m × x<sub>1</sub> => value of y when x = 0</span>
</p>
<p>
<span big>we can use either linear equation<br>(1) <i>'point slope form'</i></span>
<br>equation: <span math big>y − y<sub>1</sub> = m(x − x<sub>1</sub>)</span>
<br>substituted: <span math big>y = y<sub>1</sub> + (y<sub>2</sub> − y<sub>1</sub>) / (x<sub>2</sub> − x<sub>1</sub>) × (x − x<sub>1</sub>)</span>
</p>
<p>
<span big>or (2) <i>'slope intercept form'</i></span>
<br>equation: <span math big>y = mx + b</span>
<br>substituted: <span math big>y = (y<sub>2</sub> − y<sub>1</sub>) / (x<sub>2</sub> − x<sub>1</sub>) × x + (y<sub>1</sub> − (y<sub>2</sub> − y<sub>1</sub>) / (x<sub>2</sub> − x<sub>1</sub>) × x<sub>1</sub>)</span>
</p>
<p big>to calculate any CSS size property value that has to responsively and fluidly scale depending on the current viewport width or height.
</p>
</div>
</div>
</div>
!
