CODEWITHSUNDEEP
htmlcssfontstypography
sjbuysse
sjbuysse

Reputation: 4134

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?

Upvotes: 17

Views: 16949

Answers (8)

Abdulla Saad KP
Abdulla Saad KP

Reputation: 1

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

Upvotes: 0

Tamplix
Tamplix

Reputation: 123

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

Upvotes: 2

Bruno Mattelet
Bruno Mattelet

Reputation: 101

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/

Upvotes: 6

Est&#234;v&#227;o Rolim
Est&#234;v&#227;o Rolim

Reputation: 37

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.

Upvotes: 0

fluidbrush
fluidbrush

Reputation: 501

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/

Upvotes: 40

Henrique Ibaldo
Henrique Ibaldo

Reputation: 168

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/

Upvotes: 2

4dgaurav
4dgaurav

Reputation: 11496

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

still you can do it by following this

Further reading UX stackexchange

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128801

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>

Upvotes: 18

Related Questions