Guidelines

Typography

A small number of text options.

Our brand font is Mark 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

ComponentResponsiveFont SizeLine HeightFont Weight
<Title size={1} />28px/40px32px/44px700
<Title size={2} />24px/32px28px/40px700
<Title size={3} />22px/24px28px/32px700
<Title size={4} />20px28px700
<Title size={5} />18px24px700
<Title size={6} />16px24px700
<Title size={7} />14px20px700
<Title size={8} />12px18px700
<Text size={1} />16px24px400
<Text size={2} />14px20px400
<Text size={3} />12px18px400

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.

<Title size={1}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Title>
<Title size={2} />
<Title size={2}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Title>
<Title size={3} />
<Title size={3}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Title>
<Title size={4} />
<Title size={4}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Title>
<Title size={5} />
<Title size={5}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Title>
<Title size={6} />
<Title size={6}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Title>
<Title size={7} />
<Title size={7}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Title>
<Title size={8} />
<Title size={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.
<Text size={1}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Text>
<Text size={2} />
<Text size={2}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Text>
<Text size={3} />
<Text size={3}>
When you need to hire someone – a landscaper, a DJ, anyone – Thumbtack finds them for you for
free.
</Text>