Typography
Typography creates clear visual hierarchy and conveys our brand’s personality across our products and experiences.
Product typography
Our product font Inter is optimized and highly legible for a number of different environments, platforms, and devices. Because Inter will be used throughout Redfin products, its flexibility is essential in order to cater to specific users, whether efficient for agents in the field or expressive for users browsing at home.
Font sizes
Pixels
rem
Token
Example
52
3.25
font-size-1300
There’s no place like home
46
2.875
font-size-1200
There’s no place like home
41
2.5625
font-size-1100
There’s no place like home
36
2.25
font-size-1000
There’s no place like home
32
2
font-size-900
There’s no place like home
29
1.8125
font-size-800
There’s no place like home
26
1.625
font-size-700
There’s no place like home
23
1.4375
font-size-600
There’s no place like home
20
1.25
font-size-500
There’s no place like home
18
1.125
font-size-400
There’s no place like home
16
1
font-size-300
There’s no place like home
14
0.875
font-size-200
There’s no place like home
12
0.75
font-size-100
There’s no place like home
Font weight
Font weight can be used to create hierarchy, emphasis, or provide enhanced legibility. The Blueprint system currently supports two font weights: regular and bold.
Line height
Designers are encouraged to choose between three supported line-heights: default, compact, or spacious depending on context and the amount of text. For our design tools, line-heights are applied to font sizes and adjusted to fit within our 4pt baseline grid for strong vertical rhythm.
Compact
Value: 1.25
Somewhere over the rainbow skies are blue, and the dreams that you dare to dream really do come true.
Default
Value: 1.5
Somewhere over the rainbow skies are blue, and the dreams that you dare to dream really do come true.
Spacious
Value: 1.75
Somewhere over the rainbow skies are blue, and the dreams that you dare to dream really do come true.
Per WCAG guidelines, our default line-heights are set at 1.5
Line length
To increase readability, it is recommended to size content blocks between 60-80 characters as a best practice. By applying this best practice, you will reduce reader fatigue and increase engagement.
Guidance based on Baymard Institute research article and Material Design.
