Fonts! Fonts! Fonts!
Continuing with the design system talk, I wanted to show you my selection for my system’s font.
Ta dah! INTER
The Inter font family is no stranger to UI. It is currently featured in a few OS gaining prominence in the mobile space for its direct and sharp style.
I have been through a few fonts and while users can decide to change this in our settings, it’s also very important to have a good selection by default. I imagine many users choose Plasma but are not the kind to tinker with the system too much. For them, selecting a strong, very readable font, is very important.
If you want to know more about this font, you can find some good articles here:
I have been designing with this font for some time and I am very happy with the results. Now, I should say that this a personal preference that as good backing with industry use. However, it is not the “best” font there could ever be. That’s a subjective opinion and we all have one. It is also not a race, more like a phase.
Below you will see a spread of how this font is used in my design system. There are combinations that work really well between the Display and Text areas.
For an in-depth explanation of how apply fonts to your system from a design system, we can use the Material Type System.
https://m2.material.io/design/typography/the-type-system.html#applying-the-type-scale
As you can see the measurements are placed on the right of each row for a better explanation of how they should work. In a design application like Figma or Penpot, these fonts styles are easier to pick and apply, leading to faster designing.
I have included a PDF version in case the PNG is too small. Please note that the font sizes may be small in the graphic, but this does not mean they will be small when applied in a system.
I have included some screenshots of experimental mockups I am working on for you to see these fonts in action.
