We use Nunito Sans for all font styles, in all parts of the product. The typography tokens are divided in three groups (Heading, UI Text, and Body Text), some of them with subcategories (Regular, Bold, Label).

Usage

The following text styles are available as ready classes as well as mixins in your project. The classes and mixins are named as follows:

usln-[item type in hyphen case]-[size].

So for example to get a label text in size L, add this class to you HTML tag:

                                                        
                                                        
                                                            class="usln-ui-text-label-l"
                                                        
                                                            

If you want to use the styles in an SCSS stylesheet use the according mixin:

                                                        
                                                        
                                                            @include usln-ui-text-label-l;
                                                        
                                                            

Styles

Heading

Used for headlines and titles. The default size used for Portal main headlines is Heading M. For Modals, the default size is Heading S.

UI Text

Regular

Used in various UI elements and components. The most used size is L, present in the Dropdown buttons, Text input, and others.

Bold

Used in many UI elements, especially when the text needs to be highlighted.

Label

This font style is all caps, and used mainly in the button component. It's also used for links, and section titles. The most used size for the buttons is S.

Body Text

Regular

Used for long texts, such as info boxes and messages. For info boxes we use the size M.

Bold

Used to highlight parts of long texts. Always use the size that matches the rest of the text.