Typography
INTER family is the system font on all our UI System to present our products with an optimal legibility across sizes a clean as possible to ensure that the UI is optimized to be highly legible.
Keeping just one font family and the right hierarchies proportionate clarity and a consistent UI.
SPARTAN
SPARTAN
SPARTAN
SPARTAN
Inter Regular
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
1 2 3 4 5 6 7 8 9 0 # + - @ = % / ? !
Inter Medium
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
1 2 3 4 5 6 7 8 9 0 # + - @ = % / ? !
Inter Semibold
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
1 2 3 4 5 6 7 8 9 0 # + - @ = % / ? !
Inter Bold
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
1 2 3 4 5 6 7 8 9 0 # + - @ = % / ? !
Headings
H1
Commonly used for large H1 headlines to put a strong emphasis on bold typeface.
Type Inter | 24 px | Bold
<h1 class="font-bold text-2xl text-gray-800 p-0 m-0">Merchants</h1>
H2
Used for the main buttons in the menu
Type Inter | 16 px | Medium
<h2 class="font-medium text-base text-gray-700 p-0 m-0">Dashboard</h2>
H3
Used for secondary buttons in the menu
Type Inter | 16 px | Regular
<h3 class="font-normal text-base text-gray-400 p-0 m-0">Sites</h3>
H4
Commonly used for captions and table fields
Type Inter | 14 px | Regular
<h4 class="font-normal text-sm text-gray-400 p-0 m-0">Configuration | Merchants</h4>
H5
Used for secondary buttons in the menu
Type Inter | 12 px | Bold
<h5 class="font-bold text-xs text-gray-800 p-0 m-0">NAME</h5>
H6
Used for fill the tables
Type Inter | 14 px | Regular
<h6 class="font-normal text-sm text-gray-500 p-0 m-0">Evertec Medellín</h6>
Paragraphs
P1
Used for long text
Type Inter | 14 px | Regular
<p class="font-normal text-sm text-gray-500 p-0 m-0 text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, amet et elementum, egestas diam ut convallis facilisis. Fringilla ac tempus tristique lorem felis. Eu gravida mattis ut pellentesque risus ac sed.</p>