Typography

Guidelines

Good typography is at the heart of our interface. It helps to guide our design decisions, from font sizes to font weights used. We can look at it with three basic principles:

1. Efficient - quick to load and easy to scan with the human eye
2. Accessible - easy to understand and perceive
3. Flexible - can be used anywhere, at almost any size

Font families

Standard fonts

We use system fonts in the Portal UI. System fonts a quick loading and give a more native feel to the application. The following fonts is used for each operation system:

In code, our standard font stack is expressed as:

                                                        
                                                        
                                                            font-family: BlinkMacSystemFont, -apple-system, "Segoe UI","Oxygen Sans",Ubuntu,sans-serif,Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
                                                        
                                                            

Monospace fonts

The following fonts is used for each operation system:

In code, our monospace font stack is expressed as:

                                                        
                                                        
                                                            font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Oxygen Mono", "Ubuntu Mono", monospace;
                                                        
                                                            

Scale

The selection of type scales for our token library has been carefully considered to render comfortably on most screens and devices.

Our base font size uses 16px or 1rem, which mathematically works well in scaling up or down, while allowing us to create clear distinctions between each size for hierarchal identification onscreen.

Spacing

Line height has also been carefully considered in conjunction with our font scales. Each line height has been selected to optimally suit the font at scale (i.e. larger font sizes requires a decrease in line height ratio).

This scaling allows easy dissemination of information from text block to text block. If lines of text are too close together, it can be hard to read them. If they are too far apart it can make it difficult to sense a clear hierarchy and group related text blocks.

Accessibility and hierarchy

Follow a logical and accessible hierarchy by using headings based on a numerical order, not on font size. This makes our content more accessible for screen readers.

Contrast

When using the three main text colour tokens - primary, secondary and tertiary - on primary background, all text will pass the minimum AA WCAG 2.0 accessibility standards for normal and large text.

Line length

For long-form, multi-line paragraphs set at the default font size (16px), use a maximum width of 640 to allow for a max of about 90-100 characters. This allows for a comfortable reading experience and scan-ability.