Edit in JSFiddle

<h2>
    EM vs PX vs PT vs % which one is better js fiddle example by <a href="http://aamirshahzad.net">Aamir Shahzad</a>:<br>
Change body font-size to observed reaction of different font units.
</h2>

<table>
    <thead>
        <tr>
            <td>Font Unit</td>
            <td>body { font-size: 120%; }</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1px</td>
            <td>The quick brown fox jumps over the lazy dog</td>
        </tr>
        <tr>
            <td>1em</td>
            <td>The quick brown fox jumps over the lazy dog</td>
        </tr>
        <tr>
            <td>1pt</td>
            <td>The quick brown fox jumps over the lazy dog</td>
        </tr>
        <tr>
            <td>100%</td>
            <td>The quick brown fox jumps over the lazy dog</td>
        </tr>
    </tbody>
</table>

 body {
     font-family: calibri, arial;
     font-size: 120%
 }
 table {
     table-layout: fixed;
 }
 table td {
     border: 1px solid #ccc;
     padding: 5px;
     height: 20px;
     overflow: hidden;
     display: inline-block;
     margin-left: 2px;
     width: 300px;
 }
 table thead td, table tbody tr td:first-child {
     font-weight: bold;
     font-size: 16px;
 }
 table tr td:first-child {
     width: 80px;
 }
 table tbody tr:first-child td:nth-child(2), table tbody tr:first-child td:nth-child(3) {
     font-size: 16px;
 }
 table tbody tr:nth-child(2) td:nth-child(2), table tbody tr:nth-child(2) td:nth-child(3) {
     font-size: 1em;
 }
 table tbody tr:nth-child(3) td:nth-child(2), table tbody tr:nth-child(3) td:nth-child(3) {
     font-size: 12pt;
 }
 table tbody tr:last-child td:nth-child(2), table tbody tr:last-child td:nth-child(3) {
     font-size: 100%;
 }