# Typography

> How Tabler styles headings, paragraphs, semantic text elements, horizontal rules and the text utilities.

How Tabler styles headings, paragraphs and text elements to keep content readable.

Source: https://docs.tabler.io/ui/base/typography

---

## 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:

```html
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
```

## 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.

```html
<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>
```

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.

```html
<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>
```

## 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.

```html
<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>
```

## 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:

```html
<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>
```

## Horizontal rules

Use the `hr` tag to represent a thematic break between paragraphs within one section.

```html
<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>
```

## 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.

```html
<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>
```

## 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.

```html
<p>汉字</p>
<p>日本語の表記体系</p>
<p>Кириллица</p>
<p>Eλληνική</p>
<p>ქართული დამწერლობა</p>
<p>Հայերենի այբուբեն</p>
<p>الحروف العربية</p>
<p>אלפבית עברי</p>
<p>อักษรไทย</p>
```

## Text transform

Transform the content of components with text capitalization classes.

```html
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
```

## Letter spacing

Control the tracking (letter spacing) of an element and make it tight, wide or normal.

```html
<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>
```

## 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.

```html
<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>
```

## 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.

```html
<div class="antialiased">Text with antialiasing</div>
<div class="subpixel-antialiased">Text without antialiasing</div>
```

## Keyboard input

Use the `<kbd>` to indicate input that is typically entered via keyboard.

```html
<p>To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd> .</p>
```

## 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.