Typography
This page describes typography styles and rules adopted in Platform of Trust websites and materials
Platform of Trust - typography style in Figma
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;
/* H2 */
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
font-size: 64px;
line-height: 78px;
/* identical to box height */
letter-spacing: -0.005em;
/* H3 */
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 48px;
line-height: 59px;
/* identical to box height */
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 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 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;
/* subtitle1 */
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 20px;
/* identical to box height */
letter-spacing: 0.0015em;
/* subtitle2 */
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
/* identical to box height */
letter-spacing: 0.001em;
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;
/* 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;
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 */
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.004em;
/* caption */
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.004em;
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;
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 */
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'
Last modified 1yr ago