'Font messes up alignment of numbers

I'm using the Raleway font, but this font doesn't align numbers properly with letters.

You can see this in this snippet: 

    h1 {
      font-family: Raleway;
        font-size: 2rem;
        border-bottom: 1px solid $text-color;
        border-top: 1px solid $text-color;
        padding: 2rem 0;
    }
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<h1>5 Comments</h1>

Can I solve this easily? Or is this just a faulty font and should I chose another one?

htmlcssfontstypography


Solution 1:[1]

The Problem

This is part of the font itself and not something you can provide a quick fix for (unless you're dealing with very little text). If we look at Google Font's page for the Raleway font, we'll see that numbers have different alignment to letters:

Example

If you don't want the numbers to be aligned like this, you're going to have to use a different font instead.

A Fix

You can fix this by wrapping the numbers you wish to change the alignment of in a separate element and adjusting their vertical-align separately, but this is probably going to be more effort than its worth. I've given an example of this below:

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>

Solution 2:[2]

You can simply change with the help of CSS add font-feature-settings: 'lnum' 1; to your css file

so your new css will be:

h1 {
        font-family: Raleway;
        font-size: 2rem;
        border-bottom: 1px solid $text-color;
        border-top: 1px solid $text-color;
        padding: 2rem 0;
        font-feature-settings: 'lnum' 1;
    }

Check out this too http://clagnut.com/sandbox/css3/

Solution 3:[3]

2020 speaking

Depending on the font and the browser you can add

font-variant-numeric: lining-nums;

Source : https://css-tricks.com/almanac/properties/f/font-variant-numeric/

Solution 4:[4]

https://www.codesmite.com/article/fixing-raleway-and-similar-fonts-numerals

This article explains it all and gives de fully compatible css3 "solution".

This code do the magic:

.yourclass {
    -webkit-font-feature-settings: "lnum";
    -moz-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
}

Solution 5:[5]

It depends on "the number case setting" feature of your font supports.

still you can do it by following this

Further reading UX stackexchange

Solution 6:[6]

I created a version of Raleway with lining numerals as default to be used as The Definitive Solution for this problem. You can download the font files or just embed it into your HTML (using <link>) or CSS (using @import) with a single line of code, like you'd do with any other Google Font. Free, open source and available in all weights and styles:

https://h-ibaldo.github.io/Raleway_Fixed_Numerals/

Solution 7:[7]

I know you've posted this question a long time ago, but take a look at this property: 

.class, #id, tag, * {
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings:"lnum" 1; 
  -moz-font-feature-settings:"lnum=1"; 
  -ms-font-feature-settings:"lnum" 1; 
  -o-font-feature-settings:"lnum" 1; 
  -webkit-font-feature-settings:"lnum" 1; 
  font-feature-settings:"lnum" 1;
}

It forces all the numerals to be correctly aligned, so you can just apply this property to * in CSS and any text containing numbers will be a lot more readable.

Solution 8:[8]

This code will work for Raleway, I have tested and got the result

-webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum":

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2
Solution 3 Bruno Mattelet
Solution 4 Tamplix
Solution 5 Community
Solution 6 Henrique Ibaldo
Solution 7 Estêvão Rolim
Solution 8 Abdulla Saad KP

Related Questions