Typographic styles
—

Point to Pixel conversion
Mobile
Tablet
Small desktop
Medium desktop
Large desktop
Text hierarchy

In order for the website to perform at its highest capacity, the language must be clear and organized so that users access and process information effortlessly. The following sections detail styling and hierarchy guidelines.

Point to Pixel conversion

—

This table shows a conversion reference for common point and pixel sizes, using the formula to the right.

You can use this formula to convert any other sizes.
10pt = 13.33333333px

typographic styles.jpg

Mobile (<576px)
—

Typographical hierarchy is essential in displaying text in a clear and digestible manner for the user.

Please refer to the type styles below for each breakpoint sizes.

Tablet (<768px)
—

Typographical hierarchy is essential in displaying text in a clear and digestible manner for the user.

Please refer to the type styles below for each breakpoint sizes.

Small desktop (<992px)
—

Typographical hierarchy is essential in displaying text in a clear and digestible manner for the user.

Please refer to the type styles below for each breakpoint sizes.

Medium desktop (<1280px)
—

Typographical hierarchy is essential in displaying text in a clear and digestible manner for the user.

Please refer to the type styles below for each breakpoint sizes.

Large desktop (<1600px)
—

Typographical hierarchy is essential in displaying text in a clear and digestible manner for the user.

Please refer to the type styles below for each breakpoint sizes.

Text hierarchy
—

Below is an example of how text can be displayed using the typographical hierarchy found in the previous section.

Elements

Buttons and form fields