CODEWITHSUNDEEP
cssfonts
FaridaElOraby
FaridaElOraby

Reputation: 79

small-caps font in css handles numbers as capital letters

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;

Upvotes: 2

Views: 703

Answers (1)

John
John

Reputation: 5335

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>

Upvotes: 1

Related Questions