CSSkel provides a robust typography system, with styles for headings, paragraphs, and a special system font class for user interfaces. All measurements use rem units, making it easy to scale typography by adjusting the html font size.
Headings (h1 to h6) have distinct sizes, line heights, and letter spacing, with adjustments for larger screens (min-width: 600px). The default font is Montserrat, with a light weight of 300.
| Element | Font Size (Default) | Font Size (600px+) | Line Height | Letter Spacing |
|---|---|---|---|---|
h1 |
4.0rem (40px) | 5.0rem (50px) | 1 | -0.3rem |
h2 |
3.6rem (36px) | 4.2rem (42px) | 1.05 | -0.2rem |
h3 |
3.0rem (30px) | 3.6rem (36px) | 1.1 | -0.15rem |
h4 |
2.4rem (24px) | 3.0rem (30px) | 1.15 | -0.12rem |
h5 |
1.8rem (18px) | 2.4rem (24px) | 1.2 | -0.12rem |
h6 |
1.5rem (15px) | 1.5rem (15px) | 1.25 | -0.01em |
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Paragraphs (p) have a default font size of 1.6rem (16px), a line height of 1.6, and no top margin. The last paragraph in a block has a reduced bottom margin of 1rem.
Use the .system-font class for user interfaces or technical documentation. It uses a system font stack optimized for readability on the user's device, with a lighter weight of 300 and a tighter line height of 1.3.
<p class="system-font">This text uses the system font.</p>This text uses the system font.
Use b or strong to apply a bold weight of 600 to text.
<p>This is <strong>bold</strong> text.</p>This is bold text.