Design

Finding the best free fonts for numbers

by

on

View all posts

Though there are countless blog posts and recommendation lists for fonts and font pairings these days, what’s really tough to find are the best fonts for numbers. If you can’t afford FF DIN or Numbers by H&CO, there isn’t much guidance, let alone a go-to recommendation list.

Our principles

At Graphiq, we think about data tables, charts, and infographics all day every day. Though we use Helvetica for most of our embeddable data visualizations, we do have several guidelines for picking number fonts and we’re happy to share them with the world.

1. Lining and tabular

The first rule for picking a good number font is to make sure it comes with lining and tabular figures.

Fancy typography terms aside, lining just means that all the numbers are sitting on the baseline and aligned with the cap height, instead of going up and down (which is called “oldstyle”).

“A good number font should come with lining and tabular figures.”
Top: Libre Baskerville.  Bottom: Merriweather.

Top: Libre Baskerville. Bottom: Merriweather.

Tabular just means the numbers are monospaced — every number occupies the same horizontal space, instead of varying space according to their own shape (which is called “proportional” in typography terms).

Left: Lato. Right: Work Sans.

Left: Lato. Right: Work Sans.

Tabular figures offer better vertical alignment than proportional ones. Though it’s not necessary for all use cases, it’s nice to use tabular numbers as a default.

2. Good number symbols

The second step is to check that any given number font has good number symbols. With free fonts, it’s sometimes unpredictable how good those symbols are.

Some examples of “$” and “%” symbols that might surprise you if you don’t check ahead:

numbers-3

We always make sure to check “%” and “$,” so we use “$123,456,789.00%” as the testing string. If your data set requires other symbols, it’s a good idea to include them as well.

3. Check each individual figure design

Lastly, before settling on a font, double-check all its individual figure designs—make sure the number one doesn’t look like 7, 5 doesn’t look like 6, etc.

Similarly, here are some examples of confusing and weirdly designed figures:

Those are special cases, and those fonts probably aren’t made to be number fonts, but they’re good examples to emphasize the importance of checking each individual digit.

Google Font recommendations

With these 3 principles in mind, we went through the entire Google Font library and picked the 5 best number fonts in each category.

Serif fonts
We start the recommendations with serif fonts. There are a number of different styles of serif fonts in general, and we tried to pick the best from each style.

1. Droid Serif

numbers-5

Droid Serif is a no-brainer. A typical, good, contemporary serif font with well-designed numbers. It doesn’t add too much flare to your project, but it’s universal and it’s extremely easy to read on any screen.

If you happened to use PT Sans or Source Sans Pro, PT Serif and Source Serif Pro are two other generic serif fonts with good number design.

2. Crimson Text

Semibold and bold are slightly shrunk in font size here, otherwise they would be too long.

Semibold and bold are slightly shrunk in font size here, otherwise they would be too long.

Next, for the Garamond-style serif fonts, Crimson Text is the way to go. It’s a widely used serif font and it ships with lining and tabular figures. The numbers are nicely designed and fit nicely into that style.

3. Old Standard TT

numbers-7

If you’re looking for a classic, elegant style, Old Standard TT is your font. With the double vertical line of the dollar sign and the beautiful squiggle of the bolded “2” and “7,” it brings out that old school feeling.

4. Kameron

numbers-8

Kameron might not be as well-known as the fonts listed before, but it has nice slab serif numbers and wider figures than most serif fonts. A good number font to keep in the toolbox for sure.

5. Copse

numbers-9

Then, there’s Copse. Again, a lesser known serif font with some unique features. The low-contrast design give it a sturdy posture. It has that classical feeling but is also very readable even in small font sizes.

San-serif fonts

Moving onto sans-serif fonts, there are many great system UI fonts with good figures in this category. We featured the best 2 here, with 3 other fonts in their distinctive styles.

Open Sans

It has more font weight variations than the 3 shown here.

It has more font weight variations than the 3 shown here.

Being the most popular Google Font, Open Sans is all over the internet. Many may argue it’s boring and will become a cliché like Helvetica, but Open Sans is a good universal sans-serif font with nice figures. If you’re using Open Sans already, use the numbers.

2. Lato

It has more font weight variations than the 3 shown here.

It has more font weight variations than the 3 shown here.

Another widely-adopted sans-serif font, it provides a very different style from Open Sans, with lower contrast and the slab of the number “1,” but still very transparent and works in all cases.

3. Roboto Condensed

It has more font weight variations than the 3 shown here.

It has more font weight variations than the 3 shown here.

When thinking about sans-serif number fonts, some of you might want to use Oswald for that strong, condensed style. Sadly, Oswald comes with proportional numbers—and it won’t work when you need vertical alignments. Roboto Condensed is the best tabular alternative we found.

4. Titillium Web

It has more font weight variations than the 3 shown here.

It has more font weight variations than the 3 shown here.

Titillium Web has a very unique style. It’s squarish and has a rigorous feeling. If you want a style to deliver the cold, hard truth, Titillium might be a good pick.

5. Varela Round

numbers-14

Varela Round is the exact opposite. It’s very round and cute. If you want to make your numbers more friendly, or it fits your industry, Varela Round is a nice choice.

Also, it’s worth mentioning that Varela Round is often used as a lighter version of Montserrat, the very popular sans-serif title font. Since Montserrat doesn’t have tabular numbers, Varela Round (or Varela) could make a good pairing for a tabular number font.

Display fonts

While those generic serif and sans-serif fonts come in handy when you’re making a data table or dashboard, sometimes you also need fonts with a strong presence and personality when you’re making an infographic or a poster with huge numbers on it. Here comes the display fonts recommendation list.

1. Graduate

numbers-15

Graduate features some handsome college block style numbers. It’s ideal for an education-related infographic, college football data, and just any strong, rigorous number display in general.

2. Changa One

numbers-16

Changa One gives you strong, bolded tabular numbers. It’s less formal than bolded sans-serif fonts, and can come in handy when designing entertainment infographics and posters.

3. Special Elite

numbers-17

This handwritten-style font actually comes with tabular numbers. It’s perfect for nostalgic designs or even listing out something more cryptic, like the number of committed murders for a given criminal. It’s a very unique font that can be utilized in a number of ways.

4. Stardos Stencil

numbers-18

A nice stencil font for anything that you’d describe as being “hipster.”

5. Iceland

numbers-19

Iceland is a square-based modern geometric font that’s great for technology and mechanical data. If you want a slightly taller alternative, Iceberg is another good choice from the same designer.

Proportional fonts

Lastly, there are some great fonts with beautifully designed numbers. The only issue with these is they aren’t tabular. If you aren’t overly concerned with vertical number alignment, they could be great choices as well.

1. Montserrat

numbers-20

We can’t have a Google Font recommendation list without Montserrat. It comes with elegantly designed numbers. (If only they were tabular!)

2. Poppins

It has more font weight variations than the 3 shown here.

It has more font weight variations than the 3 shown here.

Another great widely-used sans-serif, Poppins also has great figure design. The number “9” is slightly awkward, but it’s a great font in general and it has more weight variations than Montserrat.

3. Bitter

numbers-22

Bitter’s a great title font with nice numbers. Like Montserrat and Poppins, Bitter is widely used, and you should definitely consider using its numbers if you’re using it as the title font.

4. Ultra

numbers-23

Ultra is the bolded number font you want. If it featured tabular figures, Changa One might not stand a chance. If you’re looking for a font to use for huge numbers like the title of a poster, Ultra is a solid pick.

5. Fjalla One

numbers-24

We struggled a lot with whether we should include Oswald because many use it as the condensed bolded number font, and maybe a free alternative of FF Din. However, Oswald’s dollar sign and number “4” looks inconsistent at times. So we’re listing Fjalla One as a close alternative here with better balanced numbers.

More resources and discussions

What’s your process for choosing fonts for numbers? Tell us on Twitter: @InVisionApp.

This post was originally published on Medium.

More posts about typography

Author

Samantha Zhang
Samantha is the Design Lead at Graphiq, where she’s responsible for designing the medium in which the company delivers the world’s knowledge. When she's not buried in the codebase, she can be found daydreaming in a hammock, traveling around the world, and working on interesting side projects.

Join over 2 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 2 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 2 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 2 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 2 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.