Typography is an essential part of any system. With Spruce, you get basic styles for the most related HTML elements.

The type scale is REM (root-relative EM) based. The base size is set to 1rem by default through $font-size-base, which will usually be 16px (depending on the browser's defaults). You can also change the ratio with the $font-size-ratio variable.
You can use four different font sizing variables: $font-size-base (1rem), $font-size-sm (0.9rem), $font-size-lg (1.1rem) and $font-size-lead (math.pow($font-size-ratio, 1) * $font-size-base).
You can access the heading font sizes under the $font-sizes with the spruce.font-size() function.

View More Typography Variables on GitHub

Headings

The font sizes for the heading tags are located in the $font-sizes map. We use the math.pow() Sass function to generate the scale which looks like the following:

scss$font-sizes: (
  h1: math.pow($font-size-ratio, 4) * $font-size-base,
  h2: math.pow($font-size-ratio, 3) * $font-size-base,
  h3: math.pow($font-size-ratio, 2) * $font-size-base,
  h4: math.pow($font-size-ratio, 1) * $font-size-base,
  h5: $font-size-base,
  h6: $font-size-base
);

h1: The quick brown fox jumps over the lazy dog

h2: The quick brown fox jumps over the lazy dog

h3: The quick brown fox jumps over the lazy dog

h4: The quick brown fox jumps over the lazy dog

h5: The quick brown fox jumps over the lazy dog

h6: The quick brown fox jumps over the lazy dog

html<h1>h1: The quick brown fox jumps over the lazy dog</h1>
<h2>h2: The quick brown fox jumps over the lazy dog</h2>
<h3>h3: The quick brown fox jumps over the lazy dog</h3>
<h4>h4: The quick brown fox jumps over the lazy dog</h4>
<h5>h5: The quick brown fox jumps over the lazy dog</h5>
<h6>h6: The quick brown fox jumps over the lazy dog</h6>

Get Heading Size

To access any of the $font-sizes map sizes, you can use the font-size() function that allows you also to create responsive font sizing. The function utilizes the clamp() CSS function to set a minimum, optimal and maximum value.

Paragraphs and Lead

Mauris sit amet ipsum eget orci congue egestas a eu ipsum. Mauris porttitor tincidunt ligula at finibus. Vestibulum feugiat semper aliquet.

html<p>Mauris sit amet ipsum eget orci congue egestas a eu ipsum. Mauris porttitor tincidunt ligula at finibus. Vestibulum feugiat semper aliquet.</p>

You can create paragraphs with bigger font-size using the lead class.

Mauris sit amet ipsum eget orci congue egestas a eu ipsum. Mauris porttitor tincidunt ligula at finibus. Vestibulum feugiat semper aliquet.

html<p class="lead">Mauris sit amet ipsum eget orci congue egestas a eu ipsum. Mauris porttitor tincidunt ligula at finibus. Vestibulum feugiat semper aliquet.</p>

Blockquote

You can use a blockquote element with citation:

“Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.”

— Albert Einstein, Quote Investigator

html<figure class="quote">
  <blockquote>“Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.”</blockquote>
  <figcaption>&mdash; Albert Einstein,
    <cite><a href="https://quoteinvestigator.com/2010/05/04/universe-einstein/">Quote Investigator</a></cite>
  </figcaption>
</figure>

or without citation: