Our brand font is Rise and comes in two weights, 400 and 700. We have five “title” variations used for headings and three “body” sizes used for body copy.
Type values
Component
Responsive
Font Size
Line Height
Font Weight
<Title size={1} />
28px/40px
32px/44px
700
<Title size={2} />
24px/32px
28px/40px
700
<Title size={3} />
22px/24px
28px/32px
700
<Title size={4} />
20px
28px
700
<Title size={5} />
18px
24px
700
<Title size={6} />
16px
24px
700
<Title size={7} />
14px
20px
700
<Title size={8} />
12px
18px
700
<Text size={1} />
16px
24px
400
<Text size={2} />
14px
20px
400
<Text size={3} />
12px
18px
400
HTML headings
Though numbered 1 though 8, our Title components are independent of the HTML heading elementsh1-h6. Use the size required by the design with the appropriateheadlingLevel prop for SEO and semantics.
Type examples
<Title size={1} /> is used for page headlines. It will be the largest text on the page.
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for free.
<Titlesize={1}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Title>
<Title size={2} />
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for free.
<Titlesize={2}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Title>
<Title size={3} />
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for free.
<Titlesize={3}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Title>
<Title size={4} />
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for free.
<Titlesize={4}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Title>
<Title size={5} />
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for free.
<Titlesize={5}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Title>
<Title size={6} />
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for free.
<Titlesize={6}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Title>
<Title size={7} />
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for free.
<Titlesize={7}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Title>
<Title size={8} />
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for free.
<Titlesize={8}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Title>
<Text size={1} /> is for body text.
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for free.
<Textsize={1}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Text>
<Text size={2} />
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for free.
<Textsize={2}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Text>
<Text size={3} />
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for free.
<Textsize={3}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
