JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <th></th>
        <th>default</th>
        <th>legibility</th>
    </tr>
    <tr class="reg">
        <td>16 px</td>
        <td>Staff, film, flow, shuffle</td>
        <td class="legib">Staff, film, flow, shuffle</td>
    </tr>
    <tr class="large">
        <td>32 px</td>
        <td>Staff, film, flow, shuffle</td>
        <td class="legib">Staff, film, flow, shuffle</td>
    </tr>
</table><t

CSS

body {
    font-family: "Deja Vu", Calibri, Candara, Constantia, Corbel;
    padding: 10px;
}

.legib {
    text-rendering: optimizeLegibility;
}

.reg {
    font-size: 16px;
}

.large {
    font-size: 32px;
}

td,
th {
    padding: 5px;
    border: 1px #ddd solid;
}