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 sizes: config('font-size-base', $typography) (1rem), config('font-size-sm', $typography) (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.

• Headings are balanced (text-wrap: balance) by default, so a long title doesn't leave a single word on its last line.

View on GitHub

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:

$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>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>

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.

<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.

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

You can use a blockquote element with citation:

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

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

The link style is configurable through the $typography map (new in v3):

@use 'sprucecss/scss/spruce' with (
  $typography: (
    'link-font-weight': 600,
    'link-text-decoration': underline,
    'link-text-decoration-hover': none,
    'link-text-decoration-thickness': 1px,
    'link-text-underline-offset': 0.2em,
  ),
);

<code>code element</code>
<kbd>Ctrl</kbd> + <kbd>K</kbd>
<samp>Build finished</samp>
<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>

Use pre with a code element inside. New in v3: code blocks get a background, padding, radius and horizontal scrolling, and the inner code loses the inline code style.

.card {
  border-radius: radius('lg');
  box-shadow: shadow('md');
  padding: spacer('m');
}

<pre><code>.card {
  border-radius: radius('lg');
}</code></pre>

Customize them with the pre-background and pre-foreground colors and the pre-padding, pre-border-radius, font-family-mono and font-size-code typography keys.

<!-- 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>

The typographic elements are configurable through the $typography map. The keys added in v3:

• Typography related variables
• font-size() function
• responsive-font-size() function