Typography
Our typography is based on Bueno Aires font and changes based on two primary breakpoints between small and large displays.
Headings
Large devices above 600px
XL
Buying a car online? Just cinch it
- Size
- 100px
(6.25rem) - Line Height
- 104px
(1.04) - Font Weight
- Bold
(700)
Hero
Buying a car online? Just cinch it
- Size
- 62px
(3.875rem) - Line Height
- 80px
(1.30) - Font Weight
- Bold
(700)
Standard
Buying a car online? Just cinch it
- Size
- 42px
(2.625rem) - Line Height
- 56px
(1.34) - Font Weight
- Bold
(700)
Sub-headings
Large devices above 600px
Large
Buying a car online? Just cinch it
- Size
- 34px
(2.125rem) - Line Height
- 48px
(1.40) - Font Weight
- Bold
(700)
Buying a car online? Just cinch it
- Size
- 34px
(2.125rem) - Line Height
- 48px
(1.40) - Font Weight
- Regular
(400)
Medium
Buying a car online? Just cinch it
- Size
- 28px
(1.75rem) - Line Height
- 40px
(1.43) - Font Weight
- Bold
(700)
Buying a car online? Just cinch it
- Size
- 28px
(1.75rem) - Line Height
- 40px
(1.43) - Font Weight
- Regular
(400)
Small
Buying a car online? Just cinch it
- Size
- 22px
(1.375rem) - Line Height
- 32px
(1.45) - Font Weight
- Bold
(700)
Buying a car online? Just cinch it
- Size
- 22px
(1.375rem) - Line Height
- 32px
(1.45) - Font Weight
- Regular
(400)
Body copy
Large devices above 600px
Body large
Use our Help Me Choose tool to go from 1000s of cars to just a handful of recommendations — and cinch your search.
- Size
- 22px
(1.375rem) - Line Height
- 32px
(1.45) - Font Weight
- Regular
(400)
Body
Use our Help Me Choose tool to go from 1000s of cars to just a handful of recommendations — and cinch your search.
- Size
- 18px
(1.125rem) - Line Height
- 26px
(1.45) - Font Weight
- Bold
(700)
Use our Help Me Choose tool to go from 1000s of cars to just a handful of recommendations — and cinch your search.
- Size
- 18px
(1.125rem) - Line Height
- 26px
(1.45) - Font Weight
- Semi Bold
(600)
Use our Help Me Choose tool to go from 1000s of cars to just a handful of recommendations — and cinch your search.
- Size
- 18px
(1.125rem) - Line Height
- 26px
(1.45) - Font Weight
- Regular
(400)
Secondary
Use our Help Me Choose tool to go from 1000s of cars to just a handful of recommendations — and cinch your search.
- Size
- 16px
(1rem) - Line Height
- 24px
(1.50) - Font Weight
- Bold
(700)
Use our Help Me Choose tool to go from 1000s of cars to just a handful of recommendations — and cinch your search.
- Size
- 16px
(1rem) - Line Height
- 24px
(1.50) - Font Weight
- Regular
(400)
Fine print
Use our Help Me Choose tool to go from 1000s of cars to just a handful of recommendations — and cinch your search.
- Size
- 14px
(0.875rem) - Line Height
- 20px
(1.43) - Font Weight
- Bold
(700)
Use our Help Me Choose tool to go from 1000s of cars to just a handful of recommendations — and cinch your search.
- Size
- 14px
(0.875rem) - Line Height
- 20px
(1.43) - Font Weight
- Regular
(400)
Headings
Small device up to 599px
XL
Buying a car online? Just cinch it
- Size
- 68px
(4.25rem) - Line Height
- 72px
(1.06) - Font Weight
- Bold
(700)
Hero
Buying a car online? Just cinch it
- Size
- 42px
(2.625rem) - Line Height
- 56px
(1.34) - Font Weight
- Bold
(700)
Standard
Buying a car online? Just cinch it
- Size
- 32px
(2rem) - Line Height
- 40px
(1.25) - Font Weight
- Bold
(700)
Sub-heading
Small device up to 599px
Large
Buying a car online? Just cinch it
- Size
- 28px
(1.75rem) - Line Height
- 40px
(1.43) - Font Weight
- Bold
(700)
Buying a car online? Just cinch it
- Size
- 28px
(1.75rem) - Line Height
- 40px
(1.43) - Font Weight
- Regular
(400)
Medium
Buying a car online? Just cinch it
- Size
- 24px
(1.5rem) - Line Height
- 32px
(1.33) - Font Weight
- Bold
(700)
Buying a car online? Just cinch it
- Size
- 24px
(1.5rem) - Line Height
- 32px
(1.33) - Font Weight
- Regular
(400)
Small
Buying a car online? Just cinch it
- Size
- 20px
(1.25rem) - Line Height
- 28px
(1.40) - Font Weight
- Bold
(700)
Buying a car online? Just cinch it
- Size
- 20px
(1.25rem) - Line Height
- 28px
(1.40) - Font Weight
- Regular
(400)
Body copy
Small device up to 599px
Body large
Use our Help Me Choose tool to go from 1000s of cars to just a handful of recommendations — and cinch your search.
- Size
- 18px
(1.125rem) - Line Height
- 26px
(1.45) - Font Weight
- Regular
(400)
Body
Use our Help Me Choose tool to go from 1000s of cars to just a handful of recommendations — and cinch your search.
- Size
- 18px
(1.125rem) - Line Height
- 26px
(1.45) - Font Weight
- Bold
(700)
Use our Help Me Choose tool to go from 1000s of cars to just a handful of recommendations — and cinch your search.
- Size
- 18px
(1.125rem) - Line Height
- 26px
(1.45) - Font Weight
- Semi Bold
(600)
Use our Help Me Choose tool to go from 1000s of cars to just a handful of recommendations — and cinch your search.
- Size
- 18px
(1.125rem) - Line Height
- 26px
(1.45) - Font Weight
- Regular
(400)
Secondary
Use our Help Me Choose tool to go from 1000s of cars to just a handful of recommendations — and cinch your search.
- Size
- 16px
(1rem) - Line Height
- 24px
(1.50) - Font Weight
- Bold
(700)
Use our Help Me Choose tool to go from 1000s of cars to just a handful of recommendations — and cinch your search.
- Size
- 16px
(1rem) - Line Height
- 24px
(1.50) - Font Weight
- Regular
(400)
Fine print
Use our Help Me Choose tool to go from 1000s of cars to just a handful of recommendations — and cinch your search.
- Size
- 14px
(0.875rem) - Line Height
- 20px
(1.43) - Font Weight
- Bold
(700)
Use our Help Me Choose tool to go from 1000s of cars to just a handful of recommendations — and cinch your search.
- Size
- 14px
(0.875rem) - Line Height
- 20px
(1.43) - Font Weight
- Regular
(400)
How to use typography
Balancing typography and heirarchy on the page is critical to aiding a users understanding of the information presented
Aligning text
Text alignment is a small but significant part of the interface. Alignment affects how we scan the content on a screen.
Left is the most common and default text alignment. It’s best for readability and accessibility due to the way humans and assistive tech like screen magnifiers read.
When you centre align text, you force readers to make additional eye movements on both sides of content, causing eye fatigue and lower focus.
Left aligned
Left aligned text should be used for most content across the site, for improved readability and accessibility.
Centre aligned
Centre alignment should be used in special cases and no more than 2 lines of text.
Right aligned
Right alignment is the most uncommon alignment used, but can be used in small quantities, mainly in tables.
Do
- Align long pieces of content to the left for better readability. Left aligned text gives the user one point of reference, making the copy easier to follow.
Don't
- Align text to centre when text is longer than two lines. This negatively impacts readability.
Do
- Ensure any text links are also left aligned for consistency.
Don't
- Mix up left aligned content with centre aligned content - keep a consistent flow.
Do
- Align cards or imagery in columns to help create a well-balanced layout.
Don't
- Use centre aligned titles when the content below is left aligned. Keep the alignment consistent.
Do
- Pair left aligned content with imagery as it is a good way to ensure the page feels balanced.
