mirror of https://github.com/thangisme/notes.git
157 lines
3.3 KiB
Markdown
157 lines
3.3 KiB
Markdown
---
|
|
layout: default
|
|
title: Typography
|
|
parent: Utilities
|
|
---
|
|
|
|
# Typography Utilities
|
|
{: .no_toc }
|
|
|
|
## Table of contents
|
|
{: .no_toc .text-delta }
|
|
|
|
1. TOC
|
|
{:toc}
|
|
|
|
---
|
|
|
|
## Font size
|
|
|
|
Use the `.fs-1` - `.fs-10` to set an explicit font-size.
|
|
|
|
| Class | Small screen size `font-size` | Large screen size `font-size` |
|
|
|:--------|:-------------------------------|:------------------------------|
|
|
| `.fs-1` | 9px | 10px |
|
|
| `.fs-2` | 11px | 12px |
|
|
| `.fs-3` | 12px | 14px |
|
|
| `.fs-4` | 14px | 16px |
|
|
| `.fs-5` | 16px | 18px |
|
|
| `.fs-6` | 18px | 24px |
|
|
| `.fs-7` | 24px | 32px |
|
|
| `.fs-8` | 32px | 38px |
|
|
| `.fs-9` | 38px | 42px |
|
|
| `.fs-10`| 42px | 48px |
|
|
|
|
<div class="code-example" markdown="1">
|
|
Font size 1
|
|
{: .fs-1 }
|
|
Font size 2
|
|
{: .fs-2 }
|
|
Font size 3
|
|
{: .fs-3 }
|
|
Font size 4
|
|
{: .fs-4 }
|
|
Font size 5
|
|
{: .fs-5 }
|
|
Font size 6
|
|
{: .fs-6 }
|
|
Font size 7
|
|
{: .fs-7 }
|
|
Font size 8
|
|
{: .fs-8 }
|
|
Font size 9
|
|
{: .fs-9 }
|
|
Font size 10
|
|
{: .fs-10 }
|
|
</div>
|
|
```markdown
|
|
In Markdown, use the `{: }` wrapper to apply custom classes:
|
|
|
|
Font size 1
|
|
{: .fs-1 }
|
|
Font size 2
|
|
{: .fs-2 }
|
|
Font size 3
|
|
{: .fs-3 }
|
|
Font size 4
|
|
{: .fs-4 }
|
|
Font size 5
|
|
{: .fs-5 }
|
|
Font size 6
|
|
{: .fs-6 }
|
|
Font size 7
|
|
{: .fs-7 }
|
|
Font size 8
|
|
{: .fs-8 }
|
|
Font size 9
|
|
{: .fs-9 }
|
|
Font size 10
|
|
{: .fs-10 }
|
|
```
|
|
|
|
## Font weight
|
|
|
|
Use the `.fw-300` - `.fw-700` to set an explicit font-size.
|
|
|
|
<div class="code-example" markdown="1">
|
|
Font weight 300
|
|
{: .fw-300 }
|
|
Font weight 400
|
|
{: .fw-400 }
|
|
Font weight 500
|
|
{: .fw-500 }
|
|
Font weight 700
|
|
{: .fw-700 }
|
|
</div>
|
|
```markdown
|
|
In Markdown, use the `{: }` wrapper to apply custom classes:
|
|
|
|
Font weight 300
|
|
{: .fw-300 }
|
|
Font weight 400
|
|
{: .fw-400 }
|
|
Font weight 500
|
|
{: .fw-500 }
|
|
Font weight 700
|
|
{: .fw-700 }
|
|
```
|
|
|
|
## Line height
|
|
|
|
Use the `lh-` classes to explicitly apply line height to text.
|
|
|
|
| Class | `line-height` value | Notes |
|
|
|:--------------|:---------------------|:------------------------------|
|
|
| `.lh-0` | 0 | |
|
|
| `.lh-tight` | 1.1 | Default for headings |
|
|
| `.lh-default` | 1.4 | Default for body (paragraphs) |
|
|
|
|
<div class="code-example" markdown="1">
|
|
No Line height
|
|
No Line height
|
|
{: .lh-0 }
|
|
|
|
Tight line height
|
|
Tight line height
|
|
{: .lh-tight }
|
|
|
|
Default line height
|
|
Default line height
|
|
{: .fh-default }
|
|
</div>
|
|
```markdown
|
|
In Markdown, use the `{: }` wrapper to apply custom classes:
|
|
|
|
No Line height
|
|
No Line height
|
|
{: .lh-0 }
|
|
|
|
Tight line height
|
|
Tight line height
|
|
{: .lh-tight }
|
|
|
|
Default line height
|
|
Default line height
|
|
{: .fh-default }
|
|
```
|
|
|
|
## Text justification
|
|
|
|
By default text is justified left. Use these `text-` classes to override settings:
|
|
|
|
| Class | What it does |
|
|
|:---------------|:---------------------|
|
|
| `.text-left` | `text-align: left` |
|
|
| `.text-right` | `text-align: right` |
|
|
| `.text-center` | `text-align: center` |
|