Platform of Trust Platform Design Guide
Developer PortalAPI DocsOntology
  • Purpose and scope
  • Developer eXperience Strategy
  • Suggest changes
  • API Requests
    • Request validation
    • Response codes used
    • Error handling
  • General API guidelines
    • Performance
    • Documentation
    • Data models used
    • Use HATEOAS
    • Use HTTP Methods
    • Dates and time
    • Naming conventions
    • Pagination, partial response and sorting
    • API Testing
  • API Headers
    • Mandatory elements & behaviour
    • Rate limiting information
  • API Security
    • Authentication and authorization
    • SSL everywhere - all the time
  • API versioning guidelines
    • Versioning Rules
    • Breaking changes
    • Non-breaking changes example
    • Retirement process
    • Add new API to documentation
    • Add new endpoint
  • API Migration Policies
    • Deprecating API
    • Sunsetting API
    • Blackout Testing
    • Migration Email Template
    • API Blackout Test Email Template
    • API Deprecation Email
    • Deprecating an older API
  • Ontologies
    • About ontologies
    • Web Ontology Language, OWL
    • Ontology editor
    • Edit ontology
    • Add new subclass
    • Naming convention logic
    • Extending the ontology
  • Design Guideline
    • Colors
    • Typography
    • Grids and Space
    • Input forms - Text field
    • Input forms - Text area
    • Buttons
    • Checkbox
    • Radio buttons
    • Date picker
    • Form control - Single select
    • Toggle
    • Pagination
    • Status pills
    • Tables
    • Effects
    • Dialogues
Powered by GitBook
On this page
  • Figma link
  • Title / Header 1
  • Header 2
  • Header 3
  • Header 4
  • Header 5
  • Header 6
  • Subtitle 1
  • Subtitle 2
  • Body 1
  • Body 2
  • Button text
  • Caption
  • Overline
  • UI label text
  • Error
  • Clicked link

Was this helpful?

  1. Design Guideline

Typography

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

PreviousColorsNextGrids and Space

Last updated 3 years ago

Was this helpful?

Figma link

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

/* 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'
Platform of Trust - typography style in Figma
Usage of UI label text. UI label can be placed either on top or left side of an UI element depending on the design.