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

Component	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.

<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>