What’s wrong with one of the most elegant typeface — Raleway

If you are reading this, chances are that Raleway is already one of your favorite typefaces but in case if you don’t know Raleway, it’s an elegant sans-serif typeface, designed by Matt McInerney as a single thin weight and it was expanded into a 9 weight family by Pablo Impallari and Rodrigo Fuenzalida in 2012. It’s a display face that features both text figures and lining numerals, standard and discretionary ligatures, a pretty complete set of diacritics. Text figures are default in Raleway typeface, though it does feature a lining numerals set.

What are text figures?

Text figures are also known as old style numerals. In text figures, the shape and positioning of the numerals vary as those of lowercase letters do. In the most common scheme, 0, 1, and 2 are of same height, having neither ascenders nor descenders; 6 and 8 have ascenders; and 3, 4, 5, 7, and 9 have descenders.

Why text figures?

If you are wondering what’s the use of text figures; well, text figures are very useful in paragraphs to improve reading experience since they resemble a typical line of running text and don’t come out and distract a reader.

So where’s the problem?

Most UI designers use Raleway for display, however text figures doesn’t go well with display. Very few designers/programmers know the fact that Raleway does come with lining numerals and very few of those know how to use it. This can easily frustrate a UI designer/developer. And that’s what’s wrong with Raleway, as a display typeface it should come with lining numerals as default. Though it’s really less of a typeface-design and more of a knowledge-problem. But let’s remedy that.

Here’s a few method for switching between lining numerals and text figures that works with any typeface.

Tweak OpenType feature with CSS3

CSS lets you control OpenType’s advance typographic features. As I mentioned earlier Raleway comes with both text figures and lining numerals. And you can enable lining numerals feature using CSS font-feature-settings descriptor.

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

This works only if the OpenType feature exists. If you don’t want to use the OpenType feature there’s another way; read further.

With Google webfont API, pass ‘text’ parameter in URL

If you’re using Google webfont you can use two different font families for different character set. For example, to use alphabets from Raleway but digits from Roboto, do the following:

@import url(https://fonts.googleapis.com/css?family=Raleway);
@import url(https://fonts.googleapis.com/css?family=Roboto&text=0123456789);
body{
    font-family: "Roboto", "Raleway";
}

Play with the code, yourself: http://codepen.io/anon/pen/wKPzrW

How it works:

• Google webfont API provides a feature to control the set of letters in font-file. You can pass a set of letters as a value for the ‘text’ property in URL to load font file with only the provided set of letters.
• The CSS font-family descriptor takes multiple values with the highest priority first with fall back system, i.e. first value having first priority, second with second priority and so on.
• So when you provide Raleway as second priority and Roboto as a first priority which contains only numerals, alphabets (and other characters) will be displayed in Raleway.

Use unicode-range descriptor, with CSS3 @font-face rule

If you are serving fonts from your own server, you can use CSS3 unicode-range descriptor.

@font-face {
  font-family: ‘Roboto-Numerals’;
  src: url(‘/assets/fonts/Roboto-Regular.ttf’) format(‘truetype’);
  font-weight: 400;
  unicode-range: U+30-39;
}
@font-face {
  font-family: ‘Raleway’;
  src: url(‘/assets/fonts/Roboto-Regular.ttf’) format(‘truetype’);
  font-weight: 400;
}
body{
    font-family: "Roboto-Numerals", "Raleway";
}

How it works:

• The unicode-range descriptor can help specify a character set to load from the font defined by related CSS font-face rule (in our case 0-9 from Roboto font).
• You can assign custom name to fonts with the font-family descriptor of related font-face rule. You can also load same font multiple times with a different character set under a different name, for example ‘Roboto-Numerals’ for numbers and ‘Roboto-Capitals’ for upper case letters.
• In the body tag style, setting ‘Roboto-Numerals’ font as a first priory and Raleway as a second, numbers will displayed in Roboto and rest of the characters in Raleway.

You can also use this method to mix and match different font for different characters, like using small case letters from one typeface and uppercase letters from other typeface.

Use Fontsquirrel’s webfont generator

If you don’t want to code or you are using fonts with a designing tool or for some other reason, you can use fontsquirrel’s web-font generator to customise font features.

Resources for further digging on the topic:

• The Raleway webfont is available on google-font for free.
• Google webfont API documentation
• CSS3 font-feature-settings descriptor documentation

About me: I am a programmer, a designer and an entrepreneur, checkout my latest gig Newsbrewer App. I am a novice writer and this is my first Medium post and I am further planing to write on designing, coding and startup, if these interests you follow me, on Medium.

If you find this post worthy hit the recommend button!