JSFiddle - React, Tailwind, and code Playground

HTML

<p class="one"> lorem ipsum janc dcnkjcnkjdsn kjn kjdcnskjc nskjn acs</p>
<p class="two"> lorem ipsum janc dcnkjcnkjdsn kjn kjdcnskjc nskjn acs</p>
<p class="three"> lorem ipsum janc dcnkjcnkjdsn kjn kjdcnskjc nskjn acs</p>


<hr />

<p class="one adjusted"> lorem ipsum janc dcnkjcnkjdsn kjn kjdcnskjc nskjn acs</p>
<p class="two adjusted"> lorem ipsum janc dcnkjcnkjdsn kjn kjdcnskjc nskjn acs</p>
<p class="three adjusted"> lorem ipsum janc dcnkjcnkjdsn kjn kjdcnskjc nskjn acs</p>

CSS

p {
    font-size: 12px;
}

.one {
    font-family: 'Source Sans Pro';
}

.two {
    font-family: Verdana;
}

.three {
    font-family: Arial;
}

.adjusted {
    font-size-adjust: 0.55;
}