Font messes up alignment of numbers

Question

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?

Answer 1

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/

Answer 2

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/