Font messes up alignment of numbers - html

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

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:
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>

Answer 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/

Answer 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";
}

Answer 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

Answer 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/

Answer 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.

Answer 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":