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".
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).
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.
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.
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.
In Microsoft Word you can access the glyph panel by going to Insert > Symbol.
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.
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.
