GitHub
Typography
Typography is vital for creating a clear and distinct hierarchy on our interfaces. It helps users understand digital products in a better way. Shell font forms our primary typographic system. It is designed with appropriate styles, weights, and scales to represent the hierarchy of information across digital products and experiences.
Brand Typography
Primary typeface
We use our brand typeface, Shell Font, for almost everything brand and marketing — from banner ads to billboards.
In digital applications we use it primarily for headers and titles above 20px.
Secondary typeface
We use native typography for our secondary typeface. This ensures that the UI is optimised to be highly legible, perform well, and be frictionless as you move between Shell products and the rest of the system. We use the secondary typeface at 16px and below. For example, we use SF Pro in Figma because it's the Apple system font. However, sizing fonts below 16px on other platforms may cause them to render as Segoi UI, Arial, Helvetica or Sans Serif, depending on the operating system.
Weights
Font weight is an important typographic variable that can add emphasis, and differentiate content hierarchy. Font weight and size pairings must be carefully balanced. At Shell we use Bold and Demi for section headers.
Accessibility
Type is accessible if it is legible and readable. Legible type ensures that users recognise and comprehend letters or words. Readability makes the reading experience comfortable.
Alignment
For LTR (Left to right) layouts, a consistent, left-aligned column of text is easier to read in most cases. For a RTL (right to left) site this would be inverted so the text layout would favour being aligned to the right hand side.
It has been said that astronomy is a humbling and character-building experience. There is perhaps no better demonstration of the folly of human conceits than this distant image of our tiny world. To me, it underscores our responsibility to deal more kindly with one another, and to preserve and cherish the pale blue dot, the only home we've ever known.
Resizable font
Text should be resizable without assistive technology up to 200%, without loss of content or functionality (excluding captions and images of text).
Uppercase
Uppercase should be used in moderation. Both types of styles modify a word's shape which can negatively impact readability.
Contrast
The visual presentation of text and images of text should have a contrast ratio of at least 4.5:1.
Line length
Set the reading environment to suit the reader. Wide lines of text are difficult to read and make it harder for people to focus. While there is no right way to measure the perfect width for text, a good goal is to aim for between 60 and 100 characters per line including spacing. Setting an optimal line length will break up content into easily digestible information.
Is this page useful for you?
Your feedback helps to improve our documentation.