Typography

This page describes typography styles and rules adopted in Platform of Trust websites and materials

Figma link

Platform of Trust - typography style in Figma

Title / Header 1

This style can be used on top of a page or view to define the title.

font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
font-size: 96px;
line-height: 117px;
/* identical to box height */

letter-spacing: -0.015em;

Header 2

/* H2 */

font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
font-size: 64px;
line-height: 78px;
/* identical to box height */

letter-spacing: -0.005em;

Header 3

/* H3 */

font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 48px;
line-height: 59px;
/* identical to box height */

Header 4

Header 4 style. Depending on the context, this can also be used to write down brief description after the title text.

/* H4 */

font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 44px;
/* identical to box height */

letter-spacing: 0.0025em;

Header 5

Header 5 style. Depending on the context, this can also be used to write down brief description after the title text.

/* H5 */

font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 29px;

Header 6

Header 6 style. Depending on the context, this can also be used to write down brief description after the title text.

/* H6 */

font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 24px;
letter-spacing: 0.0015em;

Subtitle 1

/* subtitle1 */

font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 20px;
/* identical to box height */

letter-spacing: 0.0015em;

Subtitle 2

/* subtitle2 */

font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
/* identical to box height */

letter-spacing: 0.001em;

Body 1

This can be used to add description body or paragraph. This is also used to inline texts within text fields and text areas. For Bold and Italic style of the texts, simply use related weight for this font-family

/* body1 */

font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
/* identical to box height, or 24px */

letter-spacing: 0.005em;

Body 2

/* body2 */

font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 150%;
/* identical to box height, or 21px */

letter-spacing: 0.0025em;

Button text

This is an all-caps style. Use this to add texts on top of buttons.

/* button-text */

font-family: 'Lato';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.0125em;
text-transform: uppercase;

Caption

/* caption */

font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.004em;

Overline

/* caption */

font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.004em;

UI label text

Use this style when you are adding UI components (e.g. text fields, radio buttons, etc.) in a form and you need to name each component. This can be used either on top side or on the left side of an UI element

Usage of UI label text. UI label can be placed either on top or left side of an UI element depending on the design.

/* UI label text */

font-family: 'Lato';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 19px;

Error

Use this style to display error or alert underneath an UI element or in a popup box.

//* error */

font-family: 'Lato';
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 150%;
/* identical to box height, or 18px */

letter-spacing: 0.004em;

color:  #D594A8;

Clicked link

/* Clicked link */

font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
/* identical to box height, or 24px */

letter-spacing: 0.005em;
text-decoration-line: underline;
color: 'PoT brand'