Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


                <div class="wrapper base152">
    <h1>Responsive and Fluid Typography</h1>
    <h4>Linear equation <a target="_blank" rel="noopener" title="by MathsIsFun" href="">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.
    <p>The following example requirements will be used:</p>

        <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>

    <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>

    :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)

    <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>

       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="">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>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:

        <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>

    /* y=mxd + b in CSS pseudo code: */
    .basefont { font-size: calc(m * 100vp * d + b) }

    <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>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><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><b>m = 1 / step size</b></p>

    <div class="table">
            <caption high="2nd">
                <h3>font sizes at viewport breakpoint step sizes</h3>
                <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>
                <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>
                <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>

    <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>

        <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>

    <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>
        <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>

    <h3>Some alternatives</h3>

        <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>

    <h3>Special case when root/html font-size is set to 62.5%</h3>
        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.

          <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>

          <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>

    <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>&lt;code&gt;.font-size</code> and <code>&lt;body&gt;.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>

            <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 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 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> &minus; y<sub>1</sub>) / (x<sub>2</sub> &minus; 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> &minus; m &times; x<sub>1</sub> => value of y when x = 0</span>
                <span big>we can use either linear equation<br>(1) <i>'point slope form'</i></span>
                <br>equation: <span math big>y &minus; y<sub>1</sub> = m(x &minus; x<sub>1</sub>)</span>
                <br>substituted: <span math big>y = y<sub>1</sub> + (y<sub>2</sub> &minus; y<sub>1</sub>) / (x<sub>2</sub> &minus; x<sub>1</sub>) &times; (x &minus; x<sub>1</sub>)</span>
                <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> &minus; y<sub>1</sub>) / (x<sub>2</sub> &minus; x<sub>1</sub>) &times; x + (y<sub>1</sub> &minus; (y<sub>2</sub> &minus; y<sub>1</sub>) / (x<sub>2</sub> &minus; x<sub>1</sub>) &times; x<sub>1</sub>)</span>
            <p big>to calculate any CSS size property value that has to responsively and fluidly scale depending on the current viewport width or height.




/* The magic */
html, .default { font-size: 1rem } /* needed like this to make the demo work properly */

.base144   { font-size: calc(0.694vmin + 0.75rem) } /* iOS */
.base152   { font-size: calc(0.658vmin + 0.75rem) } /* Average, base (160+144)/2 = 152 */
.base160   { font-size: calc(0.625vmin + 0.75rem) } /* Windows */

.base150   { font-size: calc(0.666vmin + 0.75rem) } /* Alternatives */
.base180   { font-size: calc(0.556vmin + 0.75rem) }

.base100   { font-size: calc((1.000vmin + 0.75rem) * 0.625) } /* special case: 62.5% */
.basedelta { font-size: calc(0.00625 * 1.5 * 100vmin + 0.75rem) }

pre>code, table { font-size: calc(0.9375vmin + 7 * 0.0625rem); overflow: scroll }
/* y=0.0125x * 3 with (320,10)(1280,19) plus conversion to rem */

    ALL above:
    𝑥 * 100vmin converted to 𝑥vmin
    px converted to rem

/* Only eye-candy below, ignore */
 * { -webkit-box-sizing: border-box; box-sizing: border-box }

/* * { outline: 1px dashed } /**/

html {
  scroll-behavior: smooth;

body {
    font-size: 1rem;
    line-height: 1.4;
    background-color: #f8f8f8;

    margin: 0; /* reset default 10px margin */

    /* BONUS: responsive body padding using y=mx+b
       T/B: (320,16)(1920, 72) => 0.035x + 4.8, vp height dependent
       L/R: (320,16)(1920,416) => 0.25x - 44.8, vp width dependent
    padding: calc(3.5vh + 4.8px) calc(25vw - 64px);
       not clamped 
       - remain compatible with older browsers without support for 'clamp(..)'
       - viewport sizes below 320px are considered to be negligible

       px because the sizes are viewport dependent, not font dependent
h1 { width: 100%; text-align: center }
p  { margin: 0 }
li { line-height: 1.5 }
b  { color: darkblue; font-weight: normal }

.wrapper    { background-color: White }
.wrapper>*  { padding: 0 2rem }

.wrapper p        { padding: 1rem 2rem 0 2rem }
.wrap-math p      { padding: 1rem 0 }
.wrapper ul       { padding: 0 3rem }
.wrapper h1, pre  { padding: 1em 2rem }

:where(h4,li,p) code { padding: 0.25rem }

.table            { margin-top: 2rem }
pre               { margin: 0 1em; max-width: calc(100% - 2em) }
pre, .table       { overflow: auto; width: 100% }
code              { font-family: Consolas, monospace }
pre>code, table   { overflow: scroll }
pre, code         { background-color: #f2f2f2 }

table  { border-collapse: collapse; margin: 1rem auto }
td     { padding: 0 1em }

thead tr>* { padding: 1em }

tbody tr:last-child>*,
tfoot tr:last-child>*  { padding: 0 1em 0.5em }

tbody tr:hover { background: #eee }
tbody td:hover { background: #ddd; font-weight: bold }

th[colspan], col:first-child,
col:nth-child(2n+3) { background: #f5f5f5 }

table [high]       { background: #ffb }
table [high="2nd"] { background: #bfb }
tr>td:not(:first-child)  { text-align: right  }
tr>td:first-child        { text-align: center }
tr>td { text-align: right }

[math] { color: chocolate; font-family: serif; cursor: auto }
[big]  { font-size: 1.2em } /* to show using em (or rem is responsive)*/
[math] :where(sub,sup) { font-size: 0.75em }