Don’t neglect the numbers

A brief guide on using the right style of numerical for your use case.

Shambhavi Ojha
UX Collective

--

Typography plays a vital role when laying the visual foundation of any brand. The brand fonts are carefully chosen to be not only legible but also to represent the brand’s personality and be relevant to the industry that the brand exists within. It would be unusual to typeset a comic book in Times New Roman or use Comic Sans in an important government document (despite being on-brand for some governments).

However, numerals often get neglected while taking these mystifying typographic decisions. At times, designers realise far too late that their font choice is not conducive for displaying prices on a website or not stylistic enough to be the point of focus in a publication.

Before making large scale typographic selections, it’s important to be aware of the four styles of figures which exist for numbers and try them out in all your potential use cases.

Not every font will have all the four styles designed, which makes it even more important to be mindful of this beforehand.

Let’s take a look at them.

Firstly there are Tabular and Proportional figures.

Tabular figures, as the name suggests, has numbers that are designed for tables and optimised to be read in columns. This is done by allotting uniform space to each character so that every number is vertically aligned together.

Proportional figures have variable spacing, similar to how alphabets are kerned. So an “8” will occupy more space than the number “1”. It is designed to blend with text due to the fact that the negative spaces are proportional.

Tabular vs Proportional figures

Then, there are Lining and Oldstyle figures.

Lining figures have uniform heights, approximately the same as the uppercase alphabets of the font. But sometimes they can extend slightly above or below the cap height, as well.

Oldstyle figures have varying heights as they have ascenders and descenders like lowercase alphabets do.

Lining vs Oldstyle figures

Together, they combine to be: Proportional Lining Figures, Proportional Oldstyle Figures, Tabular Lining Figures and Tabular Oldstyle Figures.

The four figure styles

When should Proportional Lining figures be used?

In places where the numerical component needs to be legible but is used in a context where text takes up majority of the viewing space. It works great in conjunction with uppercase text due to the matching character height, or for displaying standalone product prices on websites.

Use Proportional Lining with uppercase text

When should Proportional Oldstyle figures be used?

In running paragraphs where usage of lowercase text is prevalent. The existence of ascenders and descenders in the numerals, as well as the proportional kerning, allow the numbers to seamlessly blend with the text.

Use Proportional Oldstyle with lowercase text.

When should Tabular Lining figures be used?

As mentioned before, tabular figures are great for use cases where numbers are of prime importance; like financial reports, invoices or data in a table. The consistent height and width in this style leads to a highly legible reading experience.

Use Tabular Lining where numbers are of prime importance.

When should Tabular Oldstyle figures be used?

Since tabular numbers are primarily meant for tables, the use case for Tabular Oldstyle figures is rare. But, depending on the font, it can be used to add an “oldschool” element to the tables.

Use of Tabular Oldstyle figures is quite rare.

All these styles can be accessed on several Adobe softwares like Illustrator, Indesign and Photoshop through the Open Type setting.

Window > Type > Open Type in Adobe Illustrator

All the best in finding the perfect font for your project!

The UX Collective donates US$1 for each article we publish. This story contributed to World-Class Designer School: a college-level, tuition-free design school focused on preparing young and talented African designers for the local and international digital product market. Build the design community you believe in.

--

--

Art Director and Sr. designer | Passionate about brands, systems, processes and lots of other stuff