In CSS, how do I align Numbers with Text in Classic Fonts?

Question

I’m wearing a Font-Face that has the old typographical style in the numerals is want to align them with the text.

Note that the numbers of this source follow the old pattern, where the digit is aligned with the ascendants and descendants of the source and not in the base-line

Font I’m using Raleway: https://fonts.google.com/specimen/Raleway

See how her numbers are aligned against the text

---

How do I align the numbers with the rest of the text using CSS ?

* {
  font-family: 'Raleway', sans-serif;
  font-size: 50px;
  text-align: center;
}

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

<span>span 1234567890</span>
<h1>título 1234567890</h1>

Answer 1

The problem of sources

As @hugocsl commented in their question, there are some types of sources where the source numbers follow an old pattern, where it is aligned with the source’s ascendants and descendants and not in baseline. Behold:

In text figures (text figures), numerals are composed with varying heights resembling a line of text. Some numerals, most commonly 0, 1 and 2, have no ascending or descending and are of height x as lowercase letters, while 6 and 8 have ascending letters and 3, 4, 5, 7, 9 have descendants. See with an example to facilitate understanding:

* {
  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 0, 1 and 2 are aligned with the lower case letters, 6 and 8 have ascending numbers and the rest of the descending numbers, as said earlier.

But what are up and down?

The ascendants are an ascending vertical trace found in certain lower case letters extending beyond the "cover height" (chap height) or of baseline. Descendants are the vertical trace descending in those letters.

But this is really a problem, these sources that have no alignment in baseline?

Actually it depends a lot on each point of view, it can be a problem for me and for you not. But I believe that it 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 don’t like or want to resolve with CSS you can switch to ;D font.

The solutions :0

Let’s get down to business, the CSS property that makes this baseline alignment happen, the font-feature-settings! A property capable of giving you control over advanced typography in Opentype fonts, such as the Raleway case. What we’re going to do with our source is allow Lining figures (I don’t have a translation for this), also called Modern figures, which has uniform height and which are aligned with the baseline. Bounce that the source has Lining figures but that by default is not enabled in browsers.

Note that it is compatible with almost all browsers, but use 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" past the property?

Actually this is a simple answer, the simplest answer I’m going to 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. In this link you has a complete list and some examples.

Before I finish I will leave another solution that I found in a question on ONLY. I just leave her for being a gambit creative 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 assemble the answer:

• Understanding typography

• Fixing Raleway and Similar Font’s Numerals

• font-Feature-Settings MDN

• Lining Figures