Typography defines how our messages and content are delivered. Follow our guidelines to ensure that copy is presented with readability and consistency.
Our main typeface is Adelle Sans – a grotesque sans that is clean and geometric, but with enough character and versatility to work well across branding, print, and web interfaces. For long articles or blog posts, we use Adelle. The serifs improve readability over extended bodies of text, and it naturally pairs well with Adelle Sans.
If Adelle is not available (for presentations or documentation) our fallback font is Lato, which can be used in Google Docs or downloaded from Goolge Fonts
Colors and Contrast
Good contrast is essential for legible text, but make sure you don't overdo it – too much contrast hurts readability and is jarring to look at. Try to avoid 100% black on a white background or pure white on a black backgound.
For best legibility and accessibility, maintain a minimum contrast ratio of 4.5:1 between the text and background colours. You can use this contrast ratio tool to check that your text meets the minimium contrast requirements for accessibility.
Consider hierarchy, vertical rhythm, and using a baseline grid if there are multiple columns. Every design should have a typographic grid system and stick to it. Gridlover is a great tool to use when defining your typographic styles.
For responsive designs consider how font size will change on smaller devices – body text should remain large enough to read on a phone, and heading may need to be reduced in size to avoid excessive line breaks. The example below is the typographic system used for this design guide.
Hello I'm a headlineH2: Adelle Sans 36px (2.249em)
Second Heading textH3: Adelle Sans 25px (1.591em)
Third Heading textParagraph: Adelle Sans 18px (1.125em)
Hashtag lo-fi squid, Etsy Vice umami slow-carb. Banksy fingerstache, keffiyeh Kickstarter +1 semiotics cornhole tilde. Letterpress bicycle rights seitan four loko. Dreamcatcher vegan Odd Future, church-key try-hard crucifix 3 wolf moon. Swag pickled Schlitz health goth.Longform: Adelle 18px (1.125em)
Hashtag lo-fi squid, Etsy Vice umami slow-carb. Banksy fingerstache, keffiyeh Kickstarter +1 semiotics cornhole tilde. Letterpress bicycle rights seitan four loko. Dreamcatcher vegan Odd Future, church-key try-hard crucifix 3 wolf moon. Swag pickled Schlitz health goth.