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:
scssfont-size: spruce.font-size(h2);
Which will generate the value of:
scssfont-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 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>