We’ve developed a set of typographic styles and sizes suitable for any type of design. Whether it is a website or an app design, our design system uses these typefaces and fonts that can be flawlessly implemented into your design products.
Typography is one of the fundamental parts of any design. Everywhere we look, from billboards on the tall buildings of our cities to our cereal boxes, the font is one of the first things we notice in any UI design. But choosing the best fonts is an art – arranging letters and bodies of text to create legible, aesthetically pleasing, and clear copies for the users.
The typography for a user interface can make or break the design. It represents the tone of our voice, and a text is never simply just a text. Just like a phrase would have different meanings in different tones, this is the case of fonts in user interface designs. You want to convey the intended tone and message. It should also be easily readable, aesthetically pleasing, and fit our brand. At the same time, you must also find a balance between text and other design elements.
That’s why good typography usually goes unnoticed. On the other hand, bad typography stands out immediately. Not only does this disrupt the visual harmony, but it also leads to a poor user experience even when users can’t precisely pinpoint the problem.
Too many fonts and typefaces integrated into the same design can overcomplicate it and make it look visually unappealing. It is essential to use the correct amount of typography elements. Remember – less is better!
The general guidelines suggest limiting the amount used to just one typeface. Multiple different fonts might lead to visual chaos and unnecessary clutter. However, never use more than two typefaces at a time.
When selecting a font for your design, choose a typeface with at least five font weights. Usually, a good font typically comes with a minimum of five weights – light, regular, medium, semibold, and bold variants, each of them having italic versions. This offers you a more extensive variety of fonts, which will be helpful in a lot more projects and screens, depending on your design needs.
When deciding our fonts and typefaces, we must be careful when pairing fonts. Typefaces must complement and support each other, as well as maintain a visible and distinguishable contrast between elements. There are so many trendy, creative, intricate fonts that are tempting to choose from. Unfortunately, they tend to lose some of their most important properties, such as legibility and scalability.
No matter what styles are integrated into typography and what artistic direction it takes, it must ensure readability. Unless the text on a page is accessible to users, then any other value of typography becomes redundant.
It is not surprising that fonts such as Times New Roman are among the most popular - they are easy to read regardless of the context they are placed in. If you are not sure whether the font you want for your UI design is legible enough, you can conduct usability tests for your app or website design that are focused on the fonts. But you can also simply research other websites that use the same or similar fonts.
We design websites and apps for different screens and devices. This is why the best font that is just readable is not enough - it also needs to be scalable. That means that no matter from what device your users are accessing your content, they need to be able to understand it easily. We should always strive to pick fonts that can be reduced or enlarged without getting distorted.
A good practice for scalability testing is to use copies similar to what we will upload to our projects rather than Lorem Ipsum placeholders. That way, we will have a closer to the wanted result.
The right typeface should be selected according to the audience, the mood, the purpose for which it is intended, and even its functionality. A good typography system is more than just about aesthetics. It’s about creating an effective communication and visual impact that will bring you or your company leads.
Every year, we see thousands of new typefaces that we might want to use someday in our design. But the reality is that you should ignore most of these new fonts. While they might look cool, most of them are low-quality and just similar versions to the popular font families that we already know.
These terms are often confused with one another, but they are very different.
A typeface refers to the overall design of a set of characters, including letters, numbers, punctuation, and symbols. For example, “Times New Roman”, “Helvetica”, “Arial”, and “Garamond” are all different typefaces, each with its unique design.
A font is a physical representation of a typeface. It includes the information necessary to include a typeface within a design. This includes aspects like the size of the characters, their weight (e.g., regular, bold, italic), and the spacing between characters.
To create a responsive design, you must determine your default font size. Our design system includes a base font size of 16px, as it is used in most modern UI designs. It allows users to read text when interacting with your content comfortably.
Our design system also offers larger and smaller font sizes to fit your design needs because readability and legibility are extremely important when determining our font size. A font size that is too small can strain the reader's eyes, while one that is too large may disrupt the flow of content.
So, test different font sizes to find the sweet spot that ensures effortless reading.
To ensure readability, choosing the right line size between your text is critical. The line height depends on the specific typeface and font used in your design. It is necessary to experiment and try different options until it is visually pleasing and just feels right.
Our design system follows a general guideline. The body text falls within the range of 1.5 to 2 times the text size, the value is influenced by the content’s width and length. For example, if you have a body text of 16px, a suitable line height could be 1.5, which equates to 24px.
We’ve developed a set of typographic sizes that are suitable for any type of design. Whether it is a website design or an app design, our design system uses these typefaces and fonts that can be flawlessly implemented into your design products.
Styles are used to make your work more efficient. A style can allow you to make several changes at the same time, defining paint and colors, the text, effects, and the layout grids.
Let’s say the primary color you have chosen for your style doesn’t fit in with the rest of the design. So you decide to change the color to a more suitable one. And, if you worry that you’ll need to redo the whole style, that’s not the case, as the primary color you have changed for your style will be applied to the whole UI/UX design.
Our uinkits design system already has pre-made, pre-designed, and ready-to-use typographic styles suitable for any type of design. Whether it is a website or an app design, our design system uses these typefaces and fonts that can be flawlessly implemented into your design products.
To change the text style, open the edit menu by selecting the edit style icon located next to the style. You also have the option of clicking on any text element within your design, where you can just find the “Type Styles” and click the edit style icon.
With this window open, you have the possibility to modify any of the text style attributes, such as the typeface, font size, and line height. These changes will impact all the components and designs where the type scale was used.
Let’s say you don’t want to use Lato as your primary typeface for your brand. Instead, you want to use Helvetica. This change can be done within seconds and with no manual work necessary. But remember to always explore the uinkits default font sizes and line heights as it will help you respect the design guidelines.
When you’re making a change to your design, we recommend updating all text styles at the same time. Instead of making the changes on an as-needed basis, you will maintain a consistent design, which will help you prevent any mistakes.
1. Lato
Lato is a Sans-Serif typeface family designed in the Summer of 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish).
Lato has nine weights (plus corresponding italics), including a beautiful Hairline style. When working on Lato, Łukasz carefully balanced some potentially conflicting priorities. He wanted to create a typeface that would seem quite “transparent” when used in body text but would display some original traits when used in larger sizes.
2. Mulish
Mulish is a minimalist Sans-Serif typeface designed for both display and text typography.
It was initially drawn in 2011 by Vernon Adams and then refined until 2014, adding more weights, support for more Latin languages, tightening the spacing and kerning, and making many glyph refinements throughout the family – all based on hundreds of users' feedback.
3. Inter
Inter is a Sans-Serif typeface designed by Swedish designer/programmer Rasmus Andersson. It was designed to work well on screens as a UI font and features a large x-height. The family is available in nine weights with matching italics, as well as a variable font version.
4. Poppins
Poppins is a geometric Sans-Serif typeface published by Indian Type Foundry in 2014. It was released as open-source and is available for free on Google Fonts. Indian Type Foundry describes Poppins as “an internationalist take on the geometric sans genre.” It supports both Latin and Devanagari languages and is available in nine weights with matching italics.
5. Open Sans
Open Sans is an open-source, humanist Sans-Serif typeface designed by Steve Matteson and released in 2011. The five weights with matching italics make Open Sans extremely versatile and useful for a wide range of applications. It is a ubiquitous font on the web, used by everyone from Google to WordPress. I’ve even heard it referred to as the “flat design” font. I like to think of Open Sans as the new Arial.
6. Roboto
Roboto is a classic neo-grotesque sans-serif font and definitely the best free font. Designers who are accustomed to Figma should be pretty familiar with this font. Due to its simple design and readability, Roboto is one of the most popular fonts for UI UX designers. Another reason for its great popularity is that it works both for larger bodies of texts as well as for title and heading sequences.
This sans-serif neo-grotesque font designed for Google in 2016 has a nerdy aesthetic that makes it suitable for projects involving tech-related topics. Space Grotesk has been rising in popularity because its style suits large text and bolder headlines.
8. Montserrat
Keeping to the list of fonts that enjoy a high grade of popularity among UI UX designers, Montserrat is a geometric sans-serif type. The name is reflective of its inspiration, which comes from an Argentinian neighborhood of the same name. Designers enjoy this font mainly because it mirrors the modernist style of the early 20th century.
9. Resist Sans
If this font feels oddly familiar, it might be because it is meant to be an updated version of Helvetica. Bold, powerful, and easily recognizable, Resist Sans is a great choice for those eye-catching headlines that push a user interface forward.
10. Great Sailor
This font mostly became well-known in the digital design community thanks to Figma. It is a pretty modern font if we are looking at its aesthetic, which is why we might notice that it has been used more in recent designs. Besides this, Great Sailor matches most of the serif fonts.
We at uinkits understand the importance of inputs in great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.
“You press the button, we do the rest,” – Kodak.
Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.
Our design system components, including variables, cards, buttons, and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!
Discover a handpicked selection of UI/UX articles that offer valuable insights, best practices, and the latest trends in digital design.
At uinkits, we're all about the awesome possibilities of design. Join us now and let's shape the future together!
