Best number fonts: free and paid

Victor Conesa
UX Paradise
Published in
13 min readApr 8, 2020

Everything you’ve ever wanted to know about number fonts including where to get the absolute best ones!

When it comes to choosing the perfect typeface, there’s a multitude of fonts available to designers. Whether you’re aiming for complete legibility or simply want to add personality and flair to a design, it’s no easy task to find a font that ticks all your boxes.

Prototype the perfect number font for your design. Download Justinmind.

But there’s another conundrum that UI designers have to grapple with: displaying numbers.

There are many reasons you might want to display numbers. From data visualizations and statistics to pricing and contact information, numbers play an important role in the way we understand data and the world around us.

With that in mind, which number fonts are great for displaying numbers and where can you get your hands on some free ones? Once you get the right font for your design, it’s just a matter of opening your favorite prototyping tool and get to creating!

What’s a number font?

Usually, a well-made, comprehensive font will include numbers and other symbols in its design. You do have the occasional creative font that is mainly focused on numbers, but those are few when compared to most common fonts, that include both numbers and letters.

There are some fonts which are less extensive and have fewer supported languages — these tend to be the free ones.

When it comes to getting your hands on a font, it’s worth checking how many symbols, letters and numbers it includes. We’ve seen instances of fonts with random characters missing. Keeping an eye on the languages supported is important too, especially for large companies that intend to make global products.

There are some typefaces which only have the standard alphabet, for example. If you’re buying a font from an established foundry, such as Hoefler and Co, check the features section — it’ll give you all the information you need.

Designing with numbers

We mentioned in the intro that designers can have a tough time with numbers. Why? The reason is that numerals have different conventions than letters.

Numerals have more curves and some numerals have ample white space to contend with. Take the letter O. Depending on the font used, some people may have difficulty discerning the letter from the number zero.

To deal with this peculiarity, designers can change the stroke of the number to give emphasis or take away attention from the number.

By Raul Taciu.

When it comes to infographic design, headlines and lists, you’ll need to use numbers to convey the information in a clear and understandable way. That means choosing the right font and displaying the numbers in the right way.

How designers can display numerals

If you’ve ever spent much time looking at numbers or fonts, you’ll come to learn there are subtle differences in the way numbers can be displayed.

Lining numerals

First is lining numerals. Lining numerals is somewhat self-explanatory. It is when the numbers of a typeface sit on the baseline and are aligned with the cap height.

Text figures

This is different from text figures, which is when the numbers are typeset with varying heights, as seen in the comparison below:

Text figures are useful when you have numbers in a large block of text. Their purpose is not to distract the reader and they help the visual rhythm of the text by blending instead of sticking out.

Proportional spacing

Then we come to proportional spacing, an alternative to tabular spacing. Proportional spacing is where the numbers are close together, helping reduce empty space in a document.

Just like letters, numbers are proportional. They vary in width according to their shape. A number 1 is much thinner than the number 0, for example.

Proportional spacing blends letters and numerals together more effectively. This variation wouldn’t work well when it comes to displaying numbers in a table because of the varying widths that result from proportional spacing.

Tabular figures

Tabular figures mean the characters or numbers in the font occupy the same amount of horizontal space, also known as monospaced figures.

Tabular figures are useful when you have to display:

  • Sums
  • Price lists
  • Stock listings
  • Code

Here we can clearly see the difference between proportional figures and tabular figures:

Typewriters commonly use monospaced fonts as well as text editors — monospaced fonts are used when writing code. With tabular figures, the numbers are built on a fixed width to ensure that columns of data align correctly.

Best number fonts for awesome designs: free

Let’s take a look at some great number fonts that can have a real impact on your design. All of these are free and offered by Google. Check out our post for more details on Google Fonts.

1. Crimson Text

This Google Font is all about simplicity and elegance. Crimson Text rings of other classic fonts that we’re used to seeing all around the internet, and sticks with classic shapes and clean lines. It has an old-style sense to it, and would do well for both serious and casual numbers and products.

The readability of Crimson Text is great, working for both large and small sizes. This gives you ample margin to stick with this font throughout the entire product, without having to worry about the readability of it all.

2. Lato

Lato was first brought to us by Łukasz Dziedzic in 2010, and it’s enjoyed lots of popularity since. It was meant to be simple and elegant, while still showing some unique traits when displayed in larger sizes.

One of the main reasons we love Lato so much is that it’s got personality, but its simplicity allows for all but unlimited practicality. The font is casual but elegant, full of life but also discreet. This basically means you can get away with using Lato to display just about any number and any content in any size!

3. Roboto Condensed

Roboto Condensed is another highly practical number font. It consists of mostly geometric forms, but still enjoys open curves that make it feel casual as opposed to formal. This font also allows numbers to keep their natural widths, which makes for a natural reading experience.

Roboto Condensed also delivers awesome readability. In fact, the font works well and makes the most of the space it has, making it a wonderful option for small sized numbers. Other great uses for this font include long pieces of content, forms, or displaying prices. Very handy!

4. Valera Round

Valera Round is a great example of a round typeface that still manages to deliver a good experience to users — even in small size. Its rounded shapes allow for a friendly and casual feel.

The one thing with Valera Round is that while it makes for great readability in small font size, it may not deliver a wow-factor in a bigger size. This means its use for an important figure or number you want to place in evidence in the design is rather limited, as you may wish to go for a font that has a bigger visual impact.

5. Bitter

Bitter is a serif typeface that shows a lot of personality. It’s slightly thicker than most other regular fonts, but that only adds to its charm! Precisely because of its thickness, this font does wonders when it comes to displaying numbers in very small size.

The added thickness improves the readability, and has the potential to add a lot of color to any design. Consider this font when displaying numbers within a paragraph, with an overall small size. Your users will appreciate it!

6. Fjalla One

Fjalla One is another number font that is all about personality. It makes for a simple font that still delivers a unique experience. The fact that it’s thick allows for great readability in small sizes, while its rounded curves allows for visual impact in larger sizes.

It makes for a very practical font you can apply to both numbers that come accompanied by other content, or to bigger numbers that take the center-stage. Fjalla is a great free number font that makes for convenient and thoughtful design, that minds both the visual and the usability of it all.

7. Oswald

Oswald is a classic font that also enjoys quite a bit of popularity. The sans serif typeface was made and updated constantly to perfectly suit the screens of any device out there, minding the usability.

The number font is massively practical, as its family comes with many options as to the weight of the body, from 200px all the way to 700px! Oswald is a good option for both small numbers that blend in with the rest of the design, or attention-grabbing numbers that stand out from the page.

8. Nanum Gothic

Nanum Gothic is a special typeface. It was originally made for korean that also supports latin letters — and it works wonderfully as a number font!

This font delivers some great readability, especially when it comes to offering users numbers that come in a small size, surrounded by other content like text. It doesn’t do so well when it comes to numbers that are to be highlighted or displayed in larger size on the screen, though.

9. DM Serif

DM Seriff makes for a truly powerful typeface. Made with high contrast, it’s perfect if you want to highlight a number or make the number the main component of the screen. It’s got both a delicate and energetic feel, which makes it perfect for titles and headers

On the other hand, that impact DM Serif has can also be very dominant. This means that the DM Serif is better for limited use in the same page, in order to respect visual hierarchy. The good news is that it has a sister font that follows similar lines, but it’s perfect for small sizes and content-heavy pages: DM Seriff Text.

10. Lora

Lora is a serif number font that is all about balance and readability. It’s got classic shapes that are both simple and beautiful, making it a great option for a font you can apply to just about any number out there. It suits both formal, serious and more casual, friendly interfaces.

Another great characteristic about Lora is that it makes for a great reading experience, regardless of the size you display the number in. The cherry on top is that it comes with many options regarding weight, going from regular 400 all the way to 700 bold.

Best number fonts for awesome designs: paid

1. FF Din

FF Din is all about smooth curves and well-balanced verticals. The font is a member of a massive font family, bringing us many — and we mean many — alternatives when it comes body weight, italics and bolds.

We love that this font makes for easy reading of numbers, while also giving us ample margin to customize the font according to the style of the product. Some aspects in which you can customize the number fonts include choosing between tabular or proportional widths, classic or slashed zeros, default lining or old style — right down to how to display proportions.

  • Price: Starting from €59

2. Didone Room

Didone Room is a number font that doesn’t deal in letters. Made specifically for displaying beautiful and eye-grabbing numbers, it makes for the perfect font to highlight any figure you wish.

The number font was made with big and powerful numbers in mind, so this isn’t a font to use when displaying many figures at once. Cool side note: the designer behind it was inspired by the numbers on a hotel room door!

  • Price: Subscription to Envato Elements

3. BoldPrice

BoldPrice is another number font that doesn’t offer letters. It’s made for that wow-factor, putting creativity first. The regular weight is simply black numbers while the bold version resembles a wood effect!

It’s a great option if you’re going for a casual, friendly design that is all about personality. It’s better suited for stand-alone numbers, such as price listings.

  • Price: Starting from $12.10 for the web version

4. Klinic Slab

Klinic Slab is a serif font that enjoys a contemporary feel to it, making it a wonderful way to add flare to your product. When it comes to Klinic as a number font, we love that this font allows you to customize it to your liking.

For example, designers can choose between classic lining and no lining of the numbers. This opens the door to forgo the lining in stand-alone numbers for more personality, or classic lining for numbers that come accompanied by more content or for displaying several figures at once.

  • Price: Starting from $45 for commercial use

5. Neue Helvetica

What’s there to say about such a classic when it comes to typefaces? We all know and love Helvetica, a font that has enjoyed massive popularity since first being brought into the digital world back in the early 80s.

Neue Helvetica keeps all the great things about the classic Helvetica, while adding a flare of contemporary style to the product. It’s an elegant and casual sans serif font that can be used for just about any number out there!

  • Price: €39 for a single style

6. Brandon Grotesque

Brandon Grotesque is a number font for those crucial numbers you want to highlight in your design. The font is full of personality, making for a sans serif font that does wonders for headers and highlights!

The font itself comes with 12 styles, making it versatile and adaptable to suit your style. With that said, this font shines bright for a big and dominating display of numbers! For small displays that come with other important content, perhaps this isn’t the one for you.

  • Price: €37.99 for a single style

7. Optima

Optima is an old-school font, brought to us at first way back in 1958 by Hermann Zapf. Today, it’s still a wonderful font for products that want a vintage feel, or just seek to keep it elegant and timeless.

This sans serif font can make a big impact in large displays, but maintains its readability in smaller displays too — especially when we account for the 12 styles this font enjoys. It’s both stylish and practical!

  • Price: €39 for a single format

8. Futura PT

Futura PT makes for a sober and rather serious font. It’s simplicity and clean lines make for good readability, especially when it comes to displaying many numbers in a small size. This number font is perfect for more serious products, such as banking apps.

Another cool thing about this number font is that while it does very well in small sizes, it also adds value in larger displays. Its design can add an elegant feel to any product, without any concerns over usability.

  • Price: €27.99 for a single style

9. Rotis Sans Serif

Rotis Sans Serif is a number font that uses a more condensed style, giving it plenty of personality. We love this font because of its great readability, even though this readability is somewhat compromised when it comes to small displays of figures.

Rotis supports over 100 languages, making it a versatile font if your product needs to be translated into many different languages. We think it makes for a wonderful and simplistic font!

  • Price: €39 for a single style

10. Freight Sans

Freight Sans is another number font that works very well to highlight important figures, adding flare to any page. We love that this font allows designers to customize it, offering options on lining, tabular or proportional numbers, and even how to display fractions.

Another impressive thing about Freight Sans is that it offers designers an impressive 26 styles, making this font highly adaptable to any type of screen and content!

Number fonts — the takeaway

Numbers are an essential part of any good font. Typographers who care about building strong fonts will undoubtedly design the numbers just as well as the letters.

Getting your hands on some free fonts means scouring the wilderness of the internet — there are a few here that will get you started. Use them wisely and, remember, always respect your type. If you enjoy a more generous budget, it might be worth investing in some of the truly unique paid number fonts on this list!

Originally published at https://www.justinmind.com on April 8, 2020.

--

--

Victor Conesa
UX Paradise

Im a Product Manager who loves well-planned design and solving puzzles. Prototyping is my game and writing about it is my thing.