tabler/docs/content/ui/base/typography.mdx

---
title: Typography
summary: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
description: Learn how Tabler styles headings, paragraphs, and text elements to keep content readable and interfaces clear and easy to follow.
related: [/ui/base/prose]
---
import Example from '@components/Example.astro';

## Headings

Use HTML headings to organize content on your website and make the structure clear and user-friendly. The `h1` to `h6` tags are used to define HTML headings.
The `h1` tag is the highest level and the `h6` tag is the lowest 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

Use a variety of semantic text elements, depending on how you want to display particular fragments of content.

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

You can also add a label to a horizontal rule and align it as you see fit. Centered label is the default.

<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 has been optimized to correctly display content in any language. It supports most Asian, African and Middle Eastern languages.

<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>` to indicate input that is typically entered via keyboard.

<Example>
To edit settings, press
<kbd>ctrl</kbd> +
<kbd>,</kbd> or
<kbd>ctrl</kbd> +
<kbd>C</kbd> .
</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.