Search code examples
csstypography

How to set the same line height for digits


I'm using google fonts - Alegreya, and the digits are nautical. Is there a way to place them in one line?

Cheers!


Solution

  • There are two (in my knowledge) types of numerals in typography.

    Alegreya uses "Old-style figures", which are designed to fluidly rise above and sink below the baseline where most appropriate. In the context of certain fonts, the old style figures are beautiful and improve readability.

    What you are looking for are called "Lining figures", which are so named as they line up neat as soldiers standing on the baseline.

    If you do want to "correct" this, you will have to do it manually for each number you wish to reposition (or create a function to do this programmatically).

    If you do want to build your own private hell, CSS3 has a feature that allows you to. Check out baseline-shift: http://www.cssportal.com/css-properties/baseline-shift.php

    .theNumberSixSpan{
       baseline-shift:-0.3em;
    }
    .theNumberSevenSpan{
       baseline-shift:0.4em;
    }
    

    Can you imagine this for each number? Especially, since it unnecessarily contravenes at least 500 years of typographical knowledge.

    Old-style figures only become a real design issue when you try to represent them as stand-alone numerals (i.e. not in-line with other long copy text). I am guessing that this is what you are doing. That's good: it means that you can select a second typeface for these blocks which is both complementary to your design, and uses lining figures.

    Depending on the nature of the text, you can then choose to keep the old-style figures in your long copy, or switch it out to the second font's lining figures programmatically.

    Hoping this information helps you out. Let us know in comments if there is anything else we can add.