Font sizes for heading levels 1 through 6 are based on the modular scale. Heading font sizes are also available as SASS variables and CSS classes.

Spacing

Tyfy headings are positioned closer to the text following the heading than the text preceding. Adjacent sibling selectors are used to define the margins for headings in context of other elements. If the element preceding a heading is not also a heading, the top margin for the heading will be larger than the standard margin. In CSS, this is accomplished as follows:

* + * {
  margin-top: tyspacing(md);
}
:not(h1) + h2 {
  margin-top: tyspacing(lg);
}

Classes

.tyfont-size-h[x]

Display an element using the font size and line height of heading level x.

Size Variables

A SASS map is used to set heading font sizes based on the modular scale. Map values are integers indicating a number of steps up or down the scale from the base font size. The default map values (which include sizes for headings and other elements) are shown below.

$tyfont-size: (
"sm":         -1,
"h6":         0,
"h5":         1,
"h4":         2,
"h3":         3,
"h2":         4,
"h1":         6,
"quote":      2,
"lede":       2
) !default;

Font size variables for headings are calculated using the values in the SASS map and the tyscale function. The tyfont-size function is provided as shorthand to writing font sizes using scale values.

Other Variables

$tyspacing

(sm:1, md:2, lg:3, indent:3) !default;

SASS map of values indicating the number of grid units for each spacing variable value; the large size spacing is used to separate headings from other non-heading block eleemnts.

$tyfont-heading

$tyfont-serif !default

Font family for headings.

Examples

Headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Anakin was a good friend. When I first knew him, your father was already a great pilot. But I was amazed how strongly the Force was with him. I took it upon myself to train him as a Jedi. I thought that I could instruct him just as well as Yoda. I was wrong. There's still good in him. He is more machine now than man. Twisted and evil.</p>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>I can't do it, Ben. You cannot escape your destiny. I can't kill my own father. Then the Emperor has already won. You were our only hope. Yoda spoke of another. The other he spoke of is your twin sister. But I have no sister. To protect you both from the Emperor, you were hidden from your father when you were born.</p>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Well, they're on their way. Artoo, are you sure this was a good idea? Freeze! Don't move! We surrender. Ohhh! Stand back, Artoo. The code's changed. We need Artoo! Here's the terminal. Artoo, where are you? We need you at the bunker right away.</p>

Heading Size Classes

<div class="tyfont-size-h1">Div at Heading 1 Size</div>
<div class="tyfont-size-h2">Div at Heading 2 Size</div>
<div class="tyfont-size-h3">Div at Heading 3 Size</div>
<div class="tyfont-size-h4">Div at Heading 4 Size</div>
<div class="tyfont-size-h5">Div at Heading 5 Size</div>
<div class="tyfont-size-h6">Div at Heading 6 Size</div>
<h1 class="tyfont-size-h6">Heading 1 at Heading 6 Size</h1>
<h2 class="tyfont-size-h5">Heading 2 at Heading 5 Size</h2>
<h3 class="tyfont-size-h4">Heading 3 at Heading 4 Size</h3>
<h4 class="tyfont-size-h3">Heading 4 at Heading 3 Size</h4>
<h5 class="tyfont-size-h2">Heading 5 at Heading 2 Size</h5>
<h6 class="tyfont-size-h1">Heading 6 at Heading 1 Size</h6>