Typography

On this page

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 diferent 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 spruce.font-size() function that allows you also to create responsive font sizing. The font-size() function utilizes the clamp() CSS function, which gives us the possibility to set a value based on any relative unit (in this case: 5vw + 1rem).

For example you can get the the h2 size like so:

scss
font-size: spruce.font-size(h2);

Which will generate the value of:

scss
font-size: clamp(1.7647460938rem, 5vw + 1rem, 2.076171875rem);

For the detailed function, please see the font-size.scss file.

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

“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

PreviousGeneratorsNextTables