Thumbnail Image

Date Posted: Sep 04 2016

Tags: Fonts, Typography, Design

Fixing Raleway and Similar Font's Numerals

If you are reading this article you are probably one of many people who have fallen in love with the elegant Sans-Serif font Raleway (Initially designed by Matt McInerney as a single thin weight and expanded to a 9 weight family by Pablo Impallari and Rodrigo Fuenzalida).

If not, no problem! The information in this article can be applied to many similar fonts.

Raleway is an incredibly popular font. However, I have seen a lot of posts on forums and social media claiming the numerals to be: "broken", "wonky", "badly aligned" and "drunk".

Go home Raleway you're drunk meme

You may be surprised to know that Raleway is not a "broken" font, and does not require "fixing"; the "drunken" numerals are intentional.
But do not worry Raleway comes with everything you require to achieve the "perfectly aligned" numerals you are looking for.

WHY ARE RALEWAY'S NUMERALS UNALIGNED?

In text figures, the numerals are typeset with varying heights resembling a line of running text. Some numerals, most commonly 0, 1 and 2, have neither ascenders nor descenders and are of x-height like lower case letters; whilst 6 and 8 have ascenders and 3, 4, 5, 7, 9 have descenders.

In typography, the x-height or corpus size refers to the distance between the baseline and the mean line of lower-case letters in a typeface. Typically, this is the height of the letter x in the font (the source of the term).

Example of text figures

WHY USE TEXT FIGURES?

The usage of text figures is in fact preferred for paragraphs and content text. By resembling a typical line of running text they improve readability by not standing out and distracting the reader.

Example of text figures used in a paragraph

THAT SOUNDS GREAT SO WHAT IS THE PROBLEM?

Many designers and developers are not using Raleway for content or paragraphing. Raleway looks incredible as a display font and has become one of the most popular fonts for large headings, it also works well as an elegant alternative to many impact style fonts.

Unfortunately, it does not look good when the numerals in your UX design or headers are not correctly aligned.

THE SOLUTION COMES PACKAGED WITHIN THE FONT

We now know and understand the problem: the font uses text figures by default; but how do we modify this?

Most modern fonts and display fonts use lining figures (also called titling, aligning, cap and modern figures).

Lining figures are typically the same height as the uppercase letters: aligning with the baseline and the cap height.

Example of lining figures

Fortunately, Raleway comes with a set of lining figures, and even an alternate W for those who do not want to use the default crossed over W.

Listed below are some methods you can use to access the set of lining figures.

TWEAKING OPENTYPE FEATURE WITH CSS3

As Raleway comes with both text figures and lining figures for web use you can use the CSS3 descriptor "font-feature-settings" to enable lining figures.

-webkit-font-feature-settings: "lnum";
-moz-font-feature-settings: "lnum";
font-feature-settings: "lnum";


The "font-feature-settings" is compatible with almost all modern browsers and can be used with -webkit- and -moz- prefixes for compatibility with older browsers.

You can check the full list of compatible browsers here:
http://caniuse.com/#feat=font-feature.

ACCESSING ALTERNATIVE GLYPHS IN DESIGN AND WORD PROCESSING SOFTWARE

Many design and word processing software packages provide the option to insert alternative glyphs:

In Adobe Illustrator you can access the glyph panel by going to Type > Glyphs.

Screenshot of Adobe Illustrator Glyph Panel

In Microsoft Word you can access the glyph panel by going to Insert > Symbol.

Screenshot of Microsoft Word Glyph Panel

Most versions of Windows even include a built-in glyph panel, you can copy and paste glyphs from this panel to other software that does not have its own glyph panel. You can access it by going to System Tools > Character Map.

Screenshot of Windows Glyph Panel

REMAPPING A FONT TO REPLACE DEFAULT GLYPHS

Recently, I had a client that was dead-set on using the Raleway font family for their new website; but they utterly despised the default W glyph used in the font and wanted lining figures without using OpenType Features.

This is not a problem though: there are plenty of free third party software available that allow you to remap the position of glyphs on any desired font, and generate a new font file with the remapped glyphs.

Personally, I highly recommend the open source font editor FontForge.
You can get it here:
http://fontforge.github.io/en-US/

SUMMARY

Hopefully this article has helped to clear up some of the confusion surrounding the Raleway font's "drunkenness".
Not only is the font "sober" but it also comes fully packaged with both text figures, lining figures and multiple alternative glyphs.

Author Avatar

BY CODIN

Owner of Codesmite.com

Codin is a self taught web developer based in London, UK.
Over the years he has dedicated a lot of time to helping new developers, becoming a well known moderator at Team Treehouse