Font Friday

Belarius

Belarius shifts from sans-serif to slab serif. The condensed typefamily Belarius sans and serif shown on a mobile phone in a headline, body text, a pull quote and the labels of a button and navigation. The quote says: “Using a serif typeface for a UI would move designers away from their comfort zone. But looking for new solutions can be very rewarding.”— José Scaglione by TypeTogether

Slab serif & sans-serif type family

by José Scaglione & Veronika Burian from TypeTogether

Variable Font

3 axes (weight, width, serif)

90 styles (instances)

5 Weights: Light to ExtraBold
3 Widths: Narrow to Wide
3 Serif Styles: Sans, Serif, Poster
+ Matching Obliques

License for web & app usage

Single: from € 27 (web), € 83 (app)
Family: from € 599 (web), € 1,797 (app)
6 Free fonts available 🥳

Best for

  • Headings (display text)
  • Long reading text (body text)
  • User Interfaces (functional text)

Specialty

A striking type family with a vintage vibe, that can shift seamlessly from sans to slab serif, coming with a couple of free fonts.

My thoughts on Belarius

Hooray, Figma finally supports Variable Fonts! This gives me the opportunity to showcase the cool abilities of this week’s pick, Belarius, by the wonderful people of TypeTogether. There are a lot of things I find really cool about this extended type family. It has very narrow proportions, a rational, square feel to it, is compact even in the regular width, and can shift from Sans to Serif to Poster (which has very long serifs).

Belarius Sans is more restrained and Sans Narrow is even narrower SANS AND WIDE IS NICE Belarius Serif looks stable & confident also in the wider styles But the cooles style is Belarius Poster IN A ALL CAPS. LOVE IT!
The different styles of Belarius: from Sans to Serif to Poster. Especially in all caps, this style just shines 🤩!

Belarius is so simple, linear and almost goofy with its square serifs, but it has a lot of character. The small x-height ex-heights me, too 😜. Actually, it’s the cap-height, that makes the x-height seem relatively small. Ascenders and capital letters have the same length, which gives the typefaces an even narrower look. And I love the simplicity of the long rectangular dot on the i.

xHeight set in Belarius Sans and in Roboto Condensed
The capital letters have the same height as the ascenders. This gives Belarius such a square, narrow, and determined appearance. Compared to Roboto Condensed, the closest free font I found, you see it very clearly.

Digging into the possibilities that Belarius provides as a variable font, is simply a joy! The seamless adjustment of the serif axis is something I could vividly imagine in a heading or maybe for some subtle text emphasis. Also, the narrow styles can be super handy for a mobile design, especially for longer titles.

Showing the serif, the widht and the weight axis
The different axes of Belarius: Serif, Width and Weight. All these can be interchanged to create a myriad of possible styles.

For user interfaces, you could decide to use Serif or even the Poster style to make things more striking, while still being super compact. José Scaglione, co-designer of the typefaces, recently guested on Pimp my Type, and we also mentioned that. However, since the shapes are rather closed and in sans-serif not that easy to distinguish, I would not it in a project where legibility is super critical. The same goes for super text heavy applications.


What do you think? Is Belarius something for an upcoming project? Tell me in the comments below!

    Online Course Special Offer

    Get a special offer once Pairing Typefaces Like a Pro 🤘 launches in a few weeks. I won’t use your email for anything else, or I shall be doomed to set text in Papyrus only for the rest of my life 😜.

    Typographic power to your inbox!

    • Font Friday: I personally recommend one typeface per week and for what use case it’s best. Every second week I recommend a free font.
    • Pimp my Type: Articles or videos from the YouTube channel that will help you to pimp up the type of your next design project.
    • No Comic Sans, Open Sans 😅 or any other BS, like annoying ads. Your email will only be used for the newsletters, unsubscribe anytime.

    4 Comments

    1. I have opinions on that. The parametric axes are a cool idea, but right now it screams misuse to me. Since this is super complex and complicated and requires a lot of visual awareness. I’m split. On the one hand I love new technologies and pushing the limits, on the other I think it’s not ready yet … however, I’ll definitely do something with this in the future. What do you think about it?

      1. As a web designer I see a lot of potential. All the axes are available as simple CSS code, so I could use it everywhere on a website without any restrictions. When you think about Design System it’s a game changer. Just figuring out the fonts for a quote in article with a footnote, links etc is getting so much easier and faster! Especially when you combine it with Optical Size that makes alone font section of a Design System so much smaller!

        As a graphic designer, it’s not a big deal actually and finding a case where ascenders can be regulated is almost impossible. Grade is probably the most useful parameter in regular Graphic Design.

        Overall I think it’s a good trend for any font in the future. I don’t think we should be scared of possibilities. Nothing ventured, nothing gained.

        1. I agree. What irritated me with Roboto Flex is mostly that compared to other Variable Fonts where you can combine any axis with any, it does not work with the parametric axes. If you know that, then it’s fine. Big fan of the optical sizing!

    Leave a Reply

    Your email address will not be published. Required fields are marked *