Typography

A type scale on a 4px grid. A heading takes one class from the title family and nothing else.

Scale

Sizes and line heights in pixels. Every line height is a multiple of four.

Class	Size / line	Weight	Role
`title-intro`	56 / 64	600	the hero h1, one per site
`title-intro-sub`	20 / 32	400	the line under the hero h1
`title-page`	38 / 48	600	h1 of an inner page, set by Page
`title-section`	30 / 40	600	a section heading
`title`	24 / 32	600	a heading inside text
`title-lead`	20 / 32	400	a lead paragraph
`title-sub`	20 / 28	600	a subheading
`title-card`	16 / 24	600	a card or list heading
`title-mini`	14 / 20	600	a label at small size
`title-label`	12 / 20	600	an uppercase label above a heading

Samples

title-label

title-section

title

title-sub

title-lead, a lead paragraph that introduces a section.

title-card

title-mini

Body text, 16 / 24, from $text and $line.

On small screens

Sizes in px

              desktop   md    sm    xs
title-intro        56   48    40    32
title-page         38         30
title-section      30         24
title-lead         20         18

Rules

One class from the family per heading. The class owns size, weight, line height and the gap below.
Alignment and width go on the element around the heading, not on the heading.
title-intro belongs to the hero. Below it the largest heading is title-section.
No title sets a font: the face comes from $basic, and ff-intro switches to $intro.