PIE typography works with our layouts to present content in a clear hierarchy and in a way that's easy to read.
We use three different font families for our products and communications.
This is our primary font family.
Used only as a fallback font.
Used only for snippets of code.
Our type scale uses multiples of 4 for type sizes and line heights to align with our 4px vertical grid.
We assign different values to some of our typographic styles depending on the size of users’ screens. Wider screens use bigger type sizes and more generous spacing, while narrow screens use tighter and smaller type settings.
Here’s an example of how our $heading-L looks on wide and narrow screens.
Screen size: >768px Text size: 28px • Line size: 36px
Screen size: <768px Text size: 24px • Line size: 32px
Only our heading and subheading typographic styles are responsive. Our body styles are the same for all screens.
Font weight refers to how bold or light your text will appear; the higher the font weight, the bolder the text. We use three types of font weight.
Font weights are important when adding emphasis and hierarchy to your designs. A bold font weight will always draw the user’s attention more than a lighter weight. When using both weights in your paragraphs be mindful of this guidance to ensure you create the correct balance.
To keep the hierarchy and make things a bit simpler we use bold weights on all our headings and button styles on all themes. Body copy, subheadings and captions use our regular weight by default, although our body and caption styles also allow fonts to be bolded to add emphasis to a word or small phrase.
Font styles refer to the text decorations used to emphasise different features of our typographic styles.
We use underlines for interactive elements such as links, especially when they are placed inside a block of text.
We use this style when indicating something is no longer valid, but can still be read by users so they can understand the context.
This property defines the horizontal alignment of the text. It includes three types of alignment.
This is the preferred way to align text within our products because it makes it easier to identify the start of a new line (for left-to-right languages).
This alignment should be used sparingly, and should never be considered as the primary way to align text in our designs unless there is a specific need for it to be used.
This alignment should also be used sparingly. This approach is usually found in chunks of complex numeric data, where alignment of the decimals is key to assist readability.
Setting the right line length is key to the readability of the text in our products. A good practice is to have a maximum line length of between 80 and 100 characters, with a minimum of 60.
This is the space between two successive paragraphs of text. Keeping consistent paragraph spacing throughout your products will help the user understand the hierarchy of the information and will be easier to read. We use three measures.
This is the most common paragraph spacing measure. It uses 16px between paragraphs.
A paragraph spacing measure used for longer bits of text where spacing is key. It uses 14px between paragraphs.
An exceptional measure used only where the other options pose a problem to the overall layout. It uses 12px between paragraphs.
Letter spacing is used to determine the horizontal spacing between text characters. In digital applications this has been kept to 0px (standard spacing) for all typographic styles.