Small Caps and Digits

Question

I'm facing a weird problem with small-caps and digits. While my text, when I tell him via

p {
    font-variant:small-caps;
}

is using small-caps, digits stay big. Anyone know that problem and a workaround. Or do I have to wrap digits in a span and scale them down by hand? I'm using a webfont, which is showing small-caps in Photoshop. So the font-family provides small-caps for digits.

Answer 1

That's because digits have no case. Digits are neither upper nor lower case, so they cannot be converted like that.

A workaround is to instead make your font-size smaller and force your text to be upper case with the text-transform property:

p {
    font-size: smaller;
    text-transform: uppercase;
}

The only problem with this is that it will also affect letters which are already upper case.

JSFiddle demo.