Geek Answers Handbook

Font places alignment of numbers

I use the Raleway font, but this font does not align numbers 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 it easily? Or is it just a defective font and should I choose another?

+5
source share
4 answers

Problem

This is part of the font itself, not something you can provide for quick fix (unless you are dealing with very small text). If we look at the Google Font page for the Raleway font , we will see that the numbers have different letter alignments:

Example

If you do not want the numbers aligned so you will have to use a different font.

A fix

You can fix this by wrapping the numbers you want to change the alignment in a separate element and adjust their vertical-align separately, but it will probably be more effort than its value. I gave 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>
+15
source

You can simply change using 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 it out too http://clagnut.com/sandbox/css3/

+6
source

It depends on how the case number function of your font is supported.

still you can do it by following this

Further reading UX stackexchange

+1
source

I created a version of Raleway with pad numbers that will be used by default as the Ultimate Solution for this problem. You can upload font files or embed them in your HTML (using <link> ) or CSS (using @import ) with a single line of code, as with any other Google font. Free, open source and available in all weights and styles:

https://h-ibaldo.imtqy.com/Raleway_Fixed_Numerals/

+1
source

More articles:


All Articles