Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Fonts Lining Numbers

I'm using the Raleway font and Google Font's description says that "the download features both old style and lining numerals".

I can't find any documentation that says how to line numerals. Does anyone know how I can go about doing this?

like image 690
user4484384 Avatar asked Jan 22 '15 21:01

user4484384


People also ask

Which font looks good for numbers?

Neue Helvetica Neue Helvetica keeps all the great things about the classic Helvetica, while adding a flare of contemporary style to the product. It's an elegant and casual sans serif font that can be used for just about any number out there!

What is a lining numeral?

Lining Figures (LF)A modern style of numerals also known as short ranging figures or regular numerals, lining figures are all the same height and all figures sit on the baseline. They are generally the same height as the uppercase letters in the typeface.

What is the difference between a lining and non lining numeral?

Oldstyle figures are one of two styles of numerals, the other being lining figures. Oldstyle figures (also known as non-lining, lowercase, hanging, or text figures) have varying heights and alignments, as opposed to lining figures, which are of uniform height and alignment.

What is tabular lining?

1. Tabular lining, best for tables & columns. The most common figures found in fonts are tabular lining figures. “Tabular” means the figures are designed for tables, so the figures all have the same advance width. “Lining” means the figures align horizontally with each other, usually around the height of the capitals.


1 Answers

To answer my own question:

First I had to add &subset=all as a parameter for the Google font:

<link href="http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700&subset=all" rel="stylesheet" type="text/css">

Then I just added this CSS:

body {
    font-family: "Raleway", Arial, sans-serif;
    -webkit-font-feature-settings: "lnum";
       -moz-font-feature-settings: "lnum";
        -ms-font-feature-settings: "lnum";
         -o-font-feature-settings: "lnum";
            font-feature-settings: "lnum";
}
like image 122
user4484384 Avatar answered Sep 22 '22 08:09

user4484384