em and rem pre sizing comparison

by stopsatgreen

HTML

<table>
    <thead>
        <tr>
            <th></th>
            <th><code>rem</code></th>
            <th><code>em</code></th>
            <th><code>px</code></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>×1</th>
            <td><pre style="font-size: 1rem">Gorilla</pre></td>
            <td><pre style="font-size: 1em">Gorilla</pre></td>
            <td><pre style="font-size: 10px">Gorilla</pre></td>
        </tr>
        <tr>
            <th>×2</th>
            <td><pre style="font-size: 2rem">Gorilla</pre></td>
            <td><pre style="font-size: 2em">Gorilla</pre></td>
            <td><pre style="font-size: 20px">Gorilla</pre></td>
        </tr>
        <tr>
            <th>×4</th>
            <td><pre style="font-size: 4rem">Gorilla</pre></td>
            <td><pre style="font-size: 4em">Gorilla</pre></td>
            <td><pre style="font-size: 40px">Gorilla</pre></td>
        </tr>
        <tr>
            <th>×8</th>
            <td><pre style="font-size: 8rem">Gorilla</pre></td>
            <td><pre style="font-size: 8em">Gorilla</pre></td>
            <td><pre style="font-size: 80px">Gorilla</pre></td>
        </tr>
    </tbody>
</table>

CSS

html { font-size: 62.5%; }

table:hover pre { font-family: monospace, monospace; }

/* Just styling stuff, not relevant */
tr > * { border-bottom: 1px solid silver; text-align: center; vertical-align: bottom; }
th { font-size: 16px; }
pre { margin: 0; }