The source problem
As @hugocsl commented in your question, there are some font types where font numbers follow an old pattern where the font is aligned with the ascending and descending font rather than the baseline. See:
Intextfigures(textfigures),numeralsarecomposedofvaryingheightsthatresemblealineoftext.Somenumerals,mostcommonly0,1and2,havenoascendersordescendantsandareofheightxaslowercaseletters,while6and8haveascentsand3,4,5,7,9havedescendants.Here'sanexampletomakeiteasiertounderstand:
* {
font-family: 'Raleway', sans-serif;
font-size: 50px;
text-align: center;
}
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<span>span 0123456789</span>
If you analyze well you will see that the 0, 1 and 2 are aligned with the lowercase letters, 6 and 8 in turn have ascents and the rest of the descending numbers, as said before.
But what are ascending and descending?
Ascenders are a vertical ascending trace found in certain
lowercase letters that extend beyond the "cap height" ( cap
height ) or baseline . Descendants are the vertical trace
descending in these letters.
But is this really a problem, these fonts that have no alignment in the baseline?
In fact it depends a lot on each point of view, it can be a problem for me and not for you. But I believe that this sometimes takes the pattern out of a text and can also disrupt the reading of a very large text by distracting the person. If you do not like or do not want to solve with CSS you can change font .
The solutions: 0
Let's face it, the CSS property that makes this baseline alignment happen, the font-feature-settings ! A property that gives you control over advanced typography in OpenType fonts, such as Raleway. What we are going to do with our source is to allow lining figures , also called modern figures , which has uniform height and that are aligned with the baseline . I emphasize that the font has lining figures but that by default is not enabled in browsers.
Note that it is compatible with almost all browsers, but use the prefixes to support older versions.
Finally, see an example and draw your own conclusions.
* {
font-family: 'Raleway', sans-serif;
font-size: 50px;
text-align: center;
-webkit-font-feature-settings: "lnum";
-moz-font-feature-settings: "lnum";
font-feature-settings: "lnum";
}
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<span>span 0123456789</span>
But what is the "lnum" passed the property?
Actually, this is a simple answer, the simplest one that I will answer here. It's kind of a synonym for lining figures . There are several values you can pass to font-feature-settings and "lnum" is just one of them. At you have a complete list and a few examples.
Before finishing I'll leave another solution that I found in a question in the SO . I only leave it because it is a creative gambiarra and that can serve as help or solution for some people in some cases.
h1 {
font-family: Raleway;
font-size: 2rem;
border-bottom: 1px solid $text-color;
border-top: 1px solid $text-color;
padding: 2rem 0;
}
.raised {
display: inline-block;
vertical-align: 12%;
}
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<h1>
<span class="raised">5</span>
Comments
</h1>
Some references I used to mount the answer:
