Font messes up alignment of numbers

html css fonts typography
sjbuysse picture sjbuysse · Aug 11, 2015 · Viewed 10.5k times · Source

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

You can see this in this snippet:

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

Answer

fluidbrush picture fluidbrush · Apr 8, 2016

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/

Related questions

How to combine bold and italic in CSS?

This W3Schools tutorial taught me how to use the CSS font-style property to make text bold (equivalent to <b&g>this</b> in old-fashioned HTML) as well as how to make text italic (equivalent …

Read More
How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. …

Read More
Using .otf fonts on web browsers

I'm working on a website that requires font trials online, the fonts I have are all .otf Is there a way to embed the fonts and get them working on all browsers? If not, what other alternatives do I have ?

Read More