Zoé Thivet Zoé Thivet - 4 months ago 13
CSS Question

Enlarge size of numbers but not letters

Within a same html item I would like to set different font sizes for numbers and other characters (I want to have big numbers and small letters). Is there a way to do it in CSS?

Thanks in advance.

Answer

There is no simple solution that doesn't reply on using spans or server side solutions but you could use a smaller font for non-number characters and apply a unicode-range adjustment.

Unicode Range @ MDN

The unicode-range CSS descriptor sets the specific range of characters to be used from a font defined by @font-face and made available for use on the current page.

@font-face {
  font-family: 'Larger';
  src: local('Arial');
  unicode-range: U+30-39;
  /* numbers only */
}
@font-face {
  font-family: 'Smaller';
  src: local('perpetua');
  unicode-range: U+4?;
  /* Anything not numbers */
}
p {
  margin:0;
  font-size: 3em;
  font-family: Larger, Smaller sans-serif;
}
<p>Some random text consisting of at least 50 characters and 10 words which are easy to read.</p>