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 theconfig('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) andconfig('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
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>— 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 elementdel
strikethrough elements
- 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
- Alpha
- Beta
- Gamma
- 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>