mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
210 lines
8.8 KiB
Plaintext
210 lines
8.8 KiB
Plaintext
---
|
|
title: Typography
|
|
summary: How Tabler styles headings, paragraphs, semantic text elements, horizontal rules and the text utilities.
|
|
description: How Tabler styles headings, paragraphs and text elements to keep content readable.
|
|
related: [/ui/base/prose]
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
|
|
## Headings
|
|
|
|
Use the `h1` to `h6` tags for headings. `h1` is the top level and `h6` the lowest, and the size follows the level.
|
|
|
|
Below are examples of headings with different levels:
|
|
|
|
<Example>
|
|
<h1>H1 Heading</h1>
|
|
<h2>H2 Heading</h2>
|
|
<h3>H3 Heading</h3>
|
|
<h4>H4 Heading</h4>
|
|
<h5>H5 Heading</h5>
|
|
<h6>H6 Heading</h6>
|
|
</Example>
|
|
|
|
## Paragraphs
|
|
|
|
Organize longer pieces of text into paragraphs using the `p` tag. It is the most common element for text content.
|
|
|
|
```html
|
|
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
|
|
```
|
|
|
|
If you use a second paragraph, it will be separated from the first one by a blank line.
|
|
|
|
<Example vertical>
|
|
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
|
|
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
|
|
</Example>
|
|
|
|
|
|
Add the `lead` class to the opening paragraph of a section. In Tabler it does not enlarge the text the way Bootstrap does - it prints the paragraph in the secondary color, so the intro reads as a subtitle under the heading.
|
|
|
|
<Example vertical>
|
|
<h2>Installation</h2>
|
|
<p class="lead">Everything you need to get Tabler running in your project.</p>
|
|
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</p>
|
|
</Example>
|
|
|
|
## Selected text
|
|
|
|
`text-selected` paints a run of text with the same highlight the browser uses for a selection. Use it to point at a fragment in a tutorial or a changelog, where a real selection cannot be shown.
|
|
|
|
<Example>
|
|
<p>To select text using your mouse, click and drag the cursor over the text <span class="text-selected">you want to highlight</span>.</p>
|
|
</Example>
|
|
|
|
## Semantic text elements
|
|
|
|
HTML has elements for different kinds of inline text: emphasis, deleted or inserted text, abbreviations, code and more. Tabler styles all of them.
|
|
|
|
Here are examples of semantic text elements:
|
|
|
|
<Example>
|
|
<div><abbr title="Internationalization">I18N</abbr></div>
|
|
<div><strong>Bold</strong></div>
|
|
<div><cite>Citation</cite></div>
|
|
<div><code>Hello World!</code></div>
|
|
<div><del>Deleted</del></div>
|
|
<div><em>Emphasis</em></div>
|
|
<div><i>Italic</i></div>
|
|
<div><ins>Inserted</ins></div>
|
|
<div><kbd>Ctrl + S</kbd></div>
|
|
<div><mark>Highlighted</mark></div>
|
|
<div><s>Strikethrough</s></div>
|
|
<div><samp>Sample</samp></div>
|
|
<div>Text <sub>Subscript</sub></div>
|
|
<div>Text <sup>Superscript</sup></div>
|
|
<div><time>20:00</time></div>
|
|
<div><u>Underline</u></div>
|
|
<div><var>x</var> = <var>y</var> + 2</div>
|
|
</Example>
|
|
|
|
## Horizontal rules
|
|
|
|
Use the `hr` tag to represent a thematic break between paragraphs within one section.
|
|
|
|
<Example>
|
|
<div>
|
|
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita quibusdam veniam? </p>
|
|
<hr />
|
|
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita quibusdam veniam? </p>
|
|
</div>
|
|
</Example>
|
|
|
|
## Horizontal rules with label
|
|
|
|
The `hr-text` element draws a rule with a label. The label is centered by default; `hr-text-start` and `hr-text-end` move it to either end.
|
|
|
|
<Example>
|
|
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
|
|
<div class="hr-text"><span>Rule text</span></div>
|
|
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
|
<div class="hr-text"><span>Rule text</span></div>
|
|
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
|
|
<div class="hr-text hr-text-start"><span>Rule text</span></div>
|
|
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
|
<div class="hr-text hr-text-end"><span>Rule text</span></div>
|
|
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
|
|
</Example>
|
|
|
|
## Optimized for different alphabets
|
|
|
|
Tabler doesn't restrict the character set. Text in Asian, African and Middle Eastern scripts renders with the system fonts, as the examples below show.
|
|
|
|
<Example>
|
|
<p>汉字</p>
|
|
<p>日本語の表記体系</p>
|
|
<p>Кириллица</p>
|
|
<p>Eλληνική</p>
|
|
<p>ქართული დამწერლობა</p>
|
|
<p>Հայերենի այբուբեն</p>
|
|
<p>الحروف العربية</p>
|
|
<p>אלפבית עברי</p>
|
|
<p>อักษรไทย</p>
|
|
</Example>
|
|
|
|
## Text transform
|
|
|
|
Transform the content of components with text capitalization classes.
|
|
|
|
<Example>
|
|
<p class="text-lowercase">Lowercased text.</p>
|
|
<p class="text-uppercase">Uppercased text.</p>
|
|
<p class="text-capitalize">Capitalized text.</p>
|
|
</Example>
|
|
|
|
## Letter spacing
|
|
|
|
Control the tracking (letter spacing) of an element and make it tight, wide or normal.
|
|
|
|
<Example>
|
|
<p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
|
|
<p class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</p>
|
|
<p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
|
|
</Example>
|
|
|
|
## Line height
|
|
|
|
Control the leading (line height) of an element using the `.lh-*` classes. The line height is the vertical space between lines of text.
|
|
|
|
<Example>
|
|
<p class="lh-1">This is the long text with line height 1.<br />Lorem ipsum dolor sit amet.<br />Dolor sit amet.</p>
|
|
<p class="lh-sm">This is the long text with small line height.<br />Lorem ipsum dolor sit amet.<br />Dolor sit amet.</p>
|
|
<p class="lh-base">This is the long text with base line height.<br />Lorem ipsum dolor sit amet.<br />Dolor sit amet.</p>
|
|
<p class="lh-lg">This is the long text with large line height.<br />Lorem ipsum dolor sit amet.<br />Dolor sit amet.</p>
|
|
</Example>
|
|
|
|
## Antialiasing
|
|
|
|
Control the font smoothing of an element.
|
|
|
|
Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` utility to remove antialiasing.
|
|
|
|
<Example>
|
|
<div class="antialiased">Text with antialiasing</div>
|
|
<div class="subpixel-antialiased">Text without antialiasing</div>
|
|
</Example>
|
|
|
|
## Keyboard input
|
|
|
|
Use the `<kbd>` element to show a key the user presses. The `.kbd` class gives the same look to any other element.
|
|
|
|
<Example>
|
|
To edit settings, press <kbd>Ctrl</kbd> + <kbd>,</kbd> or <kbd>Ctrl</kbd> + <kbd>C</kbd>.
|
|
</Example>
|
|
|
|
### Key group
|
|
|
|
Wrap the keys of one shortcut in `.kbd-group` to keep them together on one line with an even gap.
|
|
|
|
<Example>
|
|
<kbd class="kbd-group"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>⌥</kbd><kbd>⌃</kbd></kbd>
|
|
<kbd class="kbd-group ms-3"><kbd>Ctrl</kbd><span>+</span><kbd>B</kbd></kbd>
|
|
</Example>
|
|
|
|
### Key in a button
|
|
|
|
Inside a button, a badge or a tooltip the key takes the colour of the text around it.
|
|
|
|
<Example>
|
|
<div class="btn-list">
|
|
<button type="button" class="btn">Accept <kbd>⏎</kbd></button>
|
|
<button type="button" class="btn btn-primary">Save <kbd class="kbd-group"><kbd>⌘</kbd><kbd>S</kbd></kbd></button>
|
|
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true" title="Print <kbd class='kbd-group'><kbd>Ctrl</kbd><kbd>P</kbd></kbd>">Print</button>
|
|
</div>
|
|
</Example>
|
|
|
|
## Prose
|
|
|
|
If you can't use the CSS classes you want, or you just want to use HTML tags, wrap the content in the `.prose` class and it picks up the default styles for markdown elements. See the [Prose page](/ui/base/prose) for the full set of examples.
|
|
|
|
## Accessibility
|
|
|
|
- Headings carry the structure of the page. Use `h1` to `h6` in order, and the `.h1` to `.h6` classes when you need the look of a heading on something that is not one.
|
|
- One `h1` per page, naming that page.
|
|
- Do not use a heading to make text big, and do not use `strong` in place of a heading. A screen reader user navigates by heading, so a fake one is a missing landmark.
|
|
- Body text should not go below 0.875rem, and it has to stay readable at 200% zoom without horizontal scrolling.
|
|
- Keep line length around 60 to 80 characters. Longer lines are hard to track, especially with dyslexia or low vision.
|
|
- `text-uppercase` changes the look, not the text, but some screen readers read an already-uppercase word letter by letter. Write the word normally and let CSS transform it.
|
|
- Do not use `letter-spacing` or `line-height` utilities to squeeze text below the browser default. Users need that space.
|