Heading sizes are set according to a modular typographic scale, based on musical intervals, as described in Composing the New Canon: Music, Harmony, Proportion. There’s no need to set heading sizes, just define the $root-size
and $scale
and Embrace’s complex Voodoo Majic* ensures a consistent vertical rhythym.
Main page headings, like the one above, are <h1>
elements, so further headings within this document scope should start with <h2>
, as shown below.
Second-level heading
More than one <h2>
may be used per page. Consider using an <h2>
unless you need a header level of less importance, or as a sub-header to an existing <h2>
element. Lorem markdownum, oris enim occupat pudorem arabat, spatium tua pinus. Icarus lacrimabile illa adversas profugus alae: cetera, non quaerens. Est et parentis, et sponte poplite corpora, comas, et spretor frondibus utroque ingeniis iacet prosunt mihi sed.
Third-level heading
The header above is an <h3>
element, it should be used for any page-level header which falls below the <h2>
header in the document hierarchy. Praerupit quidem robora silvis mittit capitum recondiderat terga arma quoque dictis dimittite bicorni oscula. Seductus et inde nec. Pennatis opposita. Coniuge idemque felix me fuit penates ab haeret spatium ne fluctus relecto.
Erebi qui: levare ille undas Mulciber talia Thisbe memoratis fugant; post sex magistra senior, tandem; de. Gratamque tibi. Non possem agmenque fugias ait sepulcrum his et tibi scopulum. Tumentibus ille, aure refert, enim offensaque oscula.
Fourth-level heading
The header above is an <h4>
element, it should be used for any page-level header which falls below the <h3>
header in the document hierarchy. Continet numen natas agresti, incumbit ipso uritur nulloque mersae ab iussa non amatam: terras. Deos detectique iuvenes me atque inplevit, quo, boves claudere et curru, praesagaque! Ambit Delphis retinere Phrygiae manu. Nepotis rurisque aper, iunctisque mecum Tectaphon Gorgone erat agmen!
Fifth-level heading.
The header above is an <h5>
element, it should be used for any page-level header which falls below the <h4>
header in the document hierarchy. Et iubas rectumque dictis: orbes renoventur reposco. Amplexans grave, orbes, o moverat, volvitur ad molles intellecta! Spumis innixus capillos hic esse luxque sit, spectans modo pars sospes deus deduxisse volubile. Cum adsuetudine ferro negaretur ambagibus gratia decrescunt nigrique tamen, cur gestit anus poteras.
Sixth-level heading (Nothing to see here).
The header above is an <h6>
element, it should be used for any page-level header which falls below the <h5>
header in the document hierarchy. Ossaque perque me tibi pete caedis comitate ilice est sortes timide nati ponat tantae, ab.
* Actually, it’s just a Sass mixin and a couple of functions.