I am designing a website and I wanted to use the font-variant to be small caps. The problem is when I have a number anywhere in the sentence, it is treated as a capital letter and has a bigger size than the rest of the sentence.
What do I do? Should I change something in the font-variant-numeric?
font-family: Montserrat;
font-style: normal;
font-variant: small-caps;
font-variant-numeric: normal;
That's because numbers are not letters and therefore don't have either a capital letter and also don't have a small-caps letter.
If you're 100% set on getting numbers the same size as the small-caps, you'll have to it manually and with different text sizes. Sort of like this:
.c1{
font-family: Montserrat;
font-style: normal;
font-variant: small-caps;
font-variant-numeric: normal;
font-size: 20px;
}
span {
font-size: 12px;
}<div class="c1">
Hello, <span>3</span> and <span>4</span> are numbers.
</div>