JSFiddle - React, Tailwind, and code Playground

by higginbottom

HTML

<body>
    <h1>Using font-variant</h1>
    <p><span id="fv-one">M</span><span id="fv-two">m</span>
    </p>
    <p><span id="fv-three">m</span>
    </p>

    <h1>Using font-feature-settings</h1>
    <p><span id="ffs-one">M</span><span id="ffs-two">m</span>
    </p>
    <p><span id="ffs-three">m</span>
    </p>
</body>

CSS

body {
    font-family:'ArnoPro-Regular';
}
p {
    margin: 0;
    font-size: 216pt;
    line-height: 140pt;
}
#fv-two, #fv-three {
    color:#3e8cc4;
    font-size: 304pt;
    font-variant: small-caps;
}
#ffs-two, #ffs-three {
    color:#3e8cc4;
    font-size: 304pt;
    -moz-font-feature-settings:'smcp';
    -webkit-font-feature-settings:'smcp';
    -ms-font-feature-settings:'smcp';
    font-feature-settings:'smcp';
}