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 config('font-size-base', $typography), which will usually be 16px (depending on the browser's defaults). You can also change the ratio with the config('font-size-ratio', $typography) variable.
  • You can use four different font sizing variables: config('font-size-base', $typography) (1rem), $font-size-sm (0.875rem), config('font-size-lg', $typography) (1.125rem) and config('font-size-lead', $typography) (clamp(1.15rem, 2vw, 1.35rem)).
  • You can access the heading font sizes under the $font-sizes with the font-size() function.

View 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:

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

html
<blockquote>
  <p>“Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.”</p>
</blockquote>

Inline Text elements

  • code element code
  • A11Y abbr
  • mark element mark
  • del element del
  • strikethrough element s
  • ins element ins
  • u element u
  • small element small
  • strong element strong b
  • em element em
  • cite element cite
  • sup element sup
  • sub element sub
html
<code>code element</code>
<abbr title="Accessibility">A11Y</abbr>
<mark>mark element</mark>
<del>del element</del>
<s>strikethrough element</s>
<ins>ins element</ins>
<u>u element</u>
<small>small element</small>
<strong>strong element</strong>
<em>em element</em>
<cite>cite element</cite>
sup <sup>element</sup>
sub <sub>element</sub>

Lists

  • Milk
  • Cheese
    • Blue cheese
    • Feta
  1. Alpha
  2. Beta
  3. Gamma
  4. Delta
Chrome

Nulla accumsan elit ac libero mattis malesuada id sed lorem. Aliquam at commodo dui.

Firefox

Morbi fermentum varius arcu, in hendrerit turpis. Ut vestibulum nibh sed lorem blandit, ac ultrices arcu dictum.

html
<!-- Unordered list -->
<ul>
  <li>Milk</li>
  <li> Cheese
    <ul>
      <li>Blue cheese</li>
      <li>Feta</li>
    </ul>
  </li>
</ul>


<!-- Ordered list -->
<ol>
  <li>Alpha</li>
  <li>Beta</li>
  <li>Gamma</li>
  <li>Delta</li>
</ol>


<!-- Definition list -->
<dl>
  <dt>Chrome</dt>
  <dd>
    Nulla accumsan elit ac libero mattis malesuada id sed lorem. Aliquam at commodo dui.
  </dd>
  <dt>Firefox</dt>
  <dd>
    Morbi fermentum varius arcu, in hendrerit turpis. Ut vestibulum nibh sed lorem blandit, ac ultrices arcu dictum.
  </dd>
</dl>

Variables, Helpers