Typography

Explore typography to present your design and content the most clear and efficient way possible.

Font Family

Plus UI uses Inter as the default typeface. It’s 100% free to use in all kinds of projects — both personal and commercial.

Inter is an free, open-source 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.

Typography

Plus UI's design system present a meticulous approach to text styling through our Text Style Tokens. Our Font Size and Line Height tokens allow you to finely craft the appearance of text elements in your user interface.

Font Size & Line Height

Tailor the size and spacing of text elements to create a harmonious and polished typographic hierarchy.

Example

Font Weight

Choose from a variety of weights to convey emphasis and establish a clear hierarchy within your design which leads the flexibility and customization available for creating compelling typography in your application.

Text Styles

Plus UI's predefined text tokens offer a systematic approach to managing text properties, allowing you to maintain uniformity and streamline the styling of text elements throughout your user interface.

How to Edit Text Styles

All text styles are pre-defined, ready to use, created as local styles specific to your project. To use, edit text styles,

  1. In the "Local Styles" section of the right sidebar, click on the "+" icon


  2. Click one of the text styles under Local Styles and you will see each pre-defined text styles. You can edit each of them by clicking ‘Edit Styles’.

Text Style List

Get help

If you're new to Figma, the platform may initially seem overwhelming, but exploring the interface can be a fun and rewarding experience. Before you can use the Keep Design System in Figma, it's essential to learn the basic tools and functionalities of the platform.

Last updated