Atomic Smash homepage splash

Using alternative character-sets in web fonts

Words byBen HamiltonJune 1, 2018

2 varieties of numerals in a single font

In my next few blog posts I’ll be covering some tricks and tips on the subject of web typography. To kick-off, I’ll be talking about a recent problem I needed to overcome when working on a project using a Google font: accessing an alternative character-set.

The project in question uses Cormorant Garamond, an elegant serif font. I’m using the font as a display typeface for larger text such as page-titles & headings.

While the font is nicely-designed and fits the project perfectly, I’m not a fan of its default set of numerals, which can be referred to variously as old-style figures, or non-lining figures. These are numerals which have ascenders and descenders in the same way as typical lowercase text:

A look at Cormorant Garamond with non-lining figures

These types of numerals look great when used in strings of continuous text such as body copy paragraphs, but as I’m using Cormorant Garamond for headings in uppercase only, they looked out of place in my design and I wanted to use lining figures instead – these sit on the baseline and avoid disruption to the strong horizontal lines created by the uppercase type setting.

If you’re familiar with design software such as Adobe Illustrator or InDesign, you’ll probably know it’s easy to override the default character-sets by accessing the glyphs palette from the type menu, or via contextual menus in the character palettes.

Accessing alternative character-sets in Sketch

However, if you work in Sketch as we do at Atomic Smash, you’ll find it less-easy to access these options. The solution lies in the native typography preferences in Mac OS as follows:

  • In Sketch, go to the View menu and select ’Show Fonts’
  • This opens the Mac character palette:
Accessing the native character palette
Accessing the native character palette
  • Choose the options menu in this new window (the little cog) and choose ‘Typography’
  • This opens another palette

In this new palette, you’ll find a whole heap of useful options for styling your typography. The one I was looking for is in the ‘Number Case’ list, where we have options for Old-style Figures or Lining Figures. As you’ve probably guessed, I chose Lining Figures and, hey presto, we have a string of uppercase text in which the numerals look much nicer  ??

Accessing the Typography options

Accessing alternative character-sets in the code

This allowed me to show the client the headings in the high-fidelity wireframes. But before committing to this approach, I wanted to check that it could be implemented successfully when it came to the build. Consulting one of my colleagues in the development team, I found out it’s easy enough to override the font’s default numeral set using the CSS property below:

font-variant-numeric: lining-nums;

There’s a variety of other useful properties that allow you to control the appearance of numerals in your code here.

I hope this article has sparked some ideas about how to use typography creatively in your own projects, and I’d love to hear about any other tricks you have applied in your work. Drop me a comment below ?

Profile picture ofBen Hamilton

Ben Hamilton

As the designer at Atomic Smash, Ben stays up-to-date with the latest trends and keeps a close eye on the visual details of a project.

Go back to top

Keep up to date with Atomic news