Typography

This page need more contributions.
Login or register to contribute to the docs.

Documentation for SysaCSS typography, including headings, body text, and more.

Typography

The default font is Verdana,sans-serif;, which has a good letter spacing.
With font-size of 15px and a line-spacing 1.5

Font Family Classes

Variable Value
ss-sans sans-serif
ss-serif serif
ss-cursive cursive
ss-monospace monospace

Headings Font Size

Heading Value
H1 36px
H2 30px
H3 24px
H4 20px
H5 18px
H6 16px
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Font Size Classes

Variable Value
ss-tiny 10px
ss-small 12px
ss-medium 15px
ss-large 18px
ss-xlarge 24px
ss-xxlarge 36px
ss-xxxlarge 48px
ss-jumbo 64px
<div class="ss-tiny">
  ...
</div>
<div class="ss-small">
  ...
</div>
<div class="ss-medium">
  ...
</div>
<div class="ss-large">
  ...
</div>
<div class="ss-xlarge">
  ...
</div>
<div class="ss-xxlarge">
  ...
</div>
<div class="ss-xxxlarge">
  ...
</div>
<div class="ss-jumbo">
  ...
</div>