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.”
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).
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:
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:
Read more from Samantha Zhang: Finding the right color palettes for data visualizations
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
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
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.
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
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
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.
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
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.
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.
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
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
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
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.
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.
A nice stencil font for anything that you’d describe as being “hipster.”
5. Iceland
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
We can’t have a Google Font recommendation list without Montserrat. It comes with elegantly designed numbers. (If only they were tabular!)
2. Poppins
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
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
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
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
- Lining Figures by Fonts.com
- Proportional vs. Tabular Figures by Fonts.com
- Choosing Fonts for Annual Reports by H&CO.
- My 5 Favorite Fonts for Gorgeous Numerals by Mary Lester
- What is your favorite font for displaying numbers? on Designer News
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
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.
