mirror of
https://github.com/thangisme/notes.git
synced 2024-12-22 19:26:34 -05:00
3.3 KiB
3.3 KiB
layout | title | parent |
---|---|---|
default | Typography | Utilities |
Typography Utilities
{: .no_toc }
Table of contents
{: .no_toc .text-delta }
- 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 |
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 }
```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) |
No Line height
No Line height
{: .lh-0 }
```markdown
In Markdown, use the `{: }` wrapper to apply custom classes:
Tight line height Tight line height {: .lh-tight }
Default line height Default line height {: .fh-default }
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` |