--- title: Typography description: 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. bootstrapLink: content/typography/ --- ## Headings Use HTML headings to organize content on your website and make the structure clear and user-friendly. ```html example vertical

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading
``` ```html

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading
``` ## Paragraphs Organize longer pieces of text into paragraphs using the `p` tag. ```html example vertical centered columns={2}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum.

``` ```html

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum.

``` ## Semantic text elements Use a variety of semantic text elements, depending of how you want to display particular fragments of content. ```html example vertical separated columns={1}
I1f8N
Bold
Citation
Hello World!
Deleted
Emphasis
Italic
Inserted
Ctrl + S
Highlighted
Strikethrough
Sample
Text Subscripted
Text Superscripted
Underline
x = y + 2
``` ```html I18N Bold Citation Hello World! Deleted Emphasis Italic Inserted Ctrl + S Highlighted Strikethrough Sample Text Subscripted Text Superscripted Underline x = y + 2 ``` ## Horizontal rules Use the `hr` tag to represent a thematic break between paragraphs within one section. ```html example vertical centered columns={2}

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?


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?

``` ```html
``` ## Horizontal rules with label You can also add a label to a horizontal rule and align it as you see fit. ```html code example vertical centered columns={2}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Rule text

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.

Rule text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Rule text

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.

``` ## Optimized for different alphabets Tabler has been optimized to correctly display content in any language. It supports most Asian, African and Middle Eastern languages. ```html example vertical centered columns={2}

汉字

日本語の表記体系

Кириллица

Eλληνική

ქართული დამწერლობა

Հայերենի այբուբեն

الحروف العربية

אלפבית עברי

อักษรไทย

``` ```html
Chinese

汉字

Japanese

日本語の表記体系

Cyrillic

Кириллица

Greek

Eλληνική

Georgian

ქართული დამწერლობა

Armenian

Հայերենի այբուբեն

Arabic

الحروف العربية

Hebrew

אלפבית עברי

Thai

อักษรไทย

``` ## Text transform Transform the content of components with text capitalization classes. ```html example vertical
Lowercased text.
Uppercased text.
Capitalized text.
``` ```html

Lowercased text.

Uppercased text.

Capitalized text.

``` ## Letter spacing Control the tracking (letter spacing) of an element and make it tight, wide or normal. ```html example vertical
Lorem ipsum dolor sit amet. Tight letter spacing.
Lorem ipsum dolor sit amet. Normal letter spacing.
Lorem ipsum dolor sit amet. Wide letter spacing.
``` ```html

Lorem ipsum dolor sit amet. Tight letter spacing.

Lorem ipsum dolor sit amet. Normal letter spacing.

Lorem ipsum dolor sit amet. Wide letter spacing.

``` ## Line height Control the leading (line height) of an element. ```html example
Lorem ipsum dolor sit amet. Dolor sit amet.
Lorem ipsum dolor sit amet. Dolor sit amet.
Lorem ipsum dolor sit amet. Dolor sit amet.
Lorem ipsum dolor sit amet. Dolor sit amet.
``` ```html

Lorem ipsum dolor sit amet. Dolor sit amet.

Lorem ipsum dolor sit amet. Dolor sit amet.

Lorem ipsum dolor sit amet. Dolor sit amet.

Lorem ipsum dolor sit amet. Dolor sit amet.

``` ## 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 code example
Text with antialiasing
Text without antialiasing
``` ## Keyboard input Use the `` to indicate input that is typically entered via keyboard. ```html example centered
To edit settings, press ctrl + , or ctrl + C.
``` ```html To edit settings, press ctrl + , or ctrl + C. ``` ## Markdown elements If you can't use the CSS classes you want or if you just want to use HTML tags, use the `.markdown` class in a container. It can handle almost any HTML tag. ```html code example centered background="white" columns={2} height="30rem"

Hello World

Lorem ipsum[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Subscript works as well!

Second level

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

```