Words by Ben HamiltonJune 1, 2018
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:
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.
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 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 ??
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:
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 ?