Typography

Buffy has two typefaces, Cooper and Inter. Cooper Black is used mainly for headlines and "big" text, while Inter is used for body copy or smaller headlines. The Inter font is represented in Regular, Semi Bold and Bold.

Large

big

<h1 className="big large type-sp-m">big</h1>

Copy

header 1

<h1 className="large type-sp-s">header 1</h1>

Copy

header 2

<h2 className="large type-sp-s">header 2</h2>

Copy

header 3

<h3 className="large type-sp-s">header 3</h3>

Copy

header 4

<h4 className="large type-sp-s">header 4</h4>

Copy

header 5

<h5 className="large type-sp-s">header 5</h5>

Copy

small headline

<h5 className="shead large type-sp-s">small headline</h5>

Copy

xsmall headline

<h5 className="xshead large type-sp-s">xsmall headline</h5>

Copy

xxsmall headline

<h5 className="xxshead large type-sp-s">xxsmall headline</h5>

Copy

header 6

<h6 className="large type-sp-xs">header 6</h6>

Copy

Paragraph 1

<p className="p1 large type-sp-s">Paragraph 1</p>

Copy

Paragraph 2

<p className="p2 large type-sp-s">Paragraph 2</p>

Copy

Paragraph 3

<p className="p3 large type-sp-xs">Paragraph 3</p>

Copy

Paragraph 4

<p className="p4 large type-sp-xs">Paragraph 4</p>

Copy

microtext

<span className="microtext large">microtext</span>

Copy

labeltext

<span className="labeltext large">labeltext</span>

Copy

Medium

big

<h1 className="big medium type-sp-s">big</h1>

Copy

header 1

<h1 className="medium type-sp-s">header 1</h1>

Copy

header 2

<h2 className="medium type-sp-s">header 2</h2>

Copy

header 3

<h3 className="medium type-sp-s">header 3</h3>

Copy

header 4

<h4 className="medium type-sp-s">header 4</h4>

Copy

header 5

<h5 className="medium type-sp-xs">header 5</h5>

Copy

small headline

<h5 className="shead medium type-sp-s">small headline</h5>

Copy

xsmall headline

<h5 className="xshead lmedium type-sp-s">xsmall headline</h5>

Copy

xxsmall headline

<h5 className="xxshead medium type-sp-s">xxsmall headline</h5>

Copy

header 6

<h6 className="medium type-sp-xs">header 6</h6>

Copy

Paragraph 1

<p className="p1 medium type-sp-s">Paragraph 1</p>

Copy

Paragraph 2

<p className="p2 medium type-sp-s">Paragraph 2</p>

Copy

Paragraph 3

<p className="p3 medium type-sp-s">Paragraph 3</p>

Copy

Paragraph 4

<p className="p4 medium type-sp-s">Paragraph 4</p>

Copy

microtext

<span className="microtext medium">microtext</span>

Copy

labeltext

<span className="labeltext medium">labeltext</span>

Copy

Small

big

<h1 className="big small type-sp-xs">big</h1>

Copy

header 1

<h1 className="small type-sp-xs">header 1</h1>

Copy

header 2

<h2 className="small type-sp-xs">header 2</h2>

Copy

header 3

<h3 className="small type-sp-xs">header 3</h3>

Copy

header 4

<h4 className="small type-sp-xs">header 4</h4>

Copy

header 5

<h5 className="small type-sp-xs">header 5</h5>

Copy

small headline

<h5 className="shead small type-sp-s">small headline</h5>

Copy

xsmall headline

<h5 className="xshead small type-sp-s">xsmall headline</h5>

Copy

xxsmall headline

<h5 className="xxshead small type-sp-s">xxsmall headline</h5>

Copy

header 6

<h6 className="small type-sp-xs">header 6</h6>

Copy

Paragraph 1

<p className="p1 small type-sp-xs">Paragraph 1</p>

Copy

Paragraph 2

<p className="p2 small type-sp-xs">Paragraph 2</p>

Copy

Paragraph 3

<p className="p3 small type-sp-xs">Paragraph 3</p>

Copy

Paragraph 4

<p className="p4 small type-sp-xs">Paragraph 4</p>

Copy

microtext

<span className="microtext small">microtext</span>

Copy

labeltext

<span className="labeltext small">labeltext</span>

Copy

Customizing Bold Type

By default, all paragraph type displays as Inter Regular, but this can be customized by using a little sass magic:

@include typography-styles("p3", map-get($spacing, xs), "semi");

Copy

This displays Paragraph 3 text with Inter Semi Bold type.

@include typography-styles("p1", map-get($spacing, xs), "bold");

Copy

The above displays Paragraph 1 text with Inter Bold type.