tabler/pages/_docs/typography.md

title, menu, description, bootstrap-link

title	menu	description	bootstrap-link
Typography	docs.typography	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.	content/typography/

Headings

Use HTML headings to organize content on your website and make the structure clear and user-friendly.

{% capture code %} {% for i in (1..6) %}<h{{ i }}>H{{ i }} Heading</h{{ i }}> {% endfor %} {% endcapture %} {% include example.html code=code %}

Paragraphs

Organize longer pieces of text into paragraphs using the p tag.

{% capture code %}

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.

{% endcapture %} {% include example.html code=code %}

Semantic text elements

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

{% capture code %} I18N{% hide %} abbr
{% endhide %} Bold{% hide %} strong b
{% endhide %} Citation{% hide %} cite
{% endhide %} Hello World!{% hide %} code
{% endhide %} Deleted{% hide %} del
{% endhide %} Emphasis{% hide %} em
{% endhide %} Italic{% hide %} i
{% endhide %} Inserted{% hide %} ins
{% endhide %} Ctrl + S{% hide %} kbd
{% endhide %} Highlighted{% hide %} mark
{% endhide %} Strikethrough</s{% hide %}> s
{% endhide %} Sample{% hide %} samp
{% endhide %} Text _Subscripted{% hide %} sub
{% endhide %} Text ^{Superscripted}{% hide %} sup
{% endhide %} 20:00{% hide %} time
{% endhide %} Underline{% hide %} u
{% endhide %} x = y + 2{% hide %} var
{% endhide %} {% endcapture %} {% include example.html code=code %}

Horizontal rules

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

{% capture code %}

---

{% endcapture %} {% include example.html code=code %}

Horizontal rules with label

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

{% capture code %}

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.

{% endcapture %} {% include example.html code=code %}

Optimized for different alphabets

Tabler has been optimized to correctly display content in any language. It supports most Asian, African and Middle Eastern languages.

{% capture code %}

Chinese

汉字

Japanese

日本語の表記体系

Korean

한글

Cyrillic

Кириллица

Greek

Eλληνική

Georgian

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

Armenian

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

Arabic

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

Hebrew

אלפבית עברי

Thai

อักษรไทย

{% endcapture %} {% include example.html code=code %}

Text transform

Transform the content of components with text capitalization classes.

{% capture code %}

Lowercased text.

Uppercased text.

Capitalized text.

{% endcapture %} {% include example.html code=code %}

Letter spacing

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

{% capture code %}

Lorem ipsum dolor sit amet. Tight letter spacing.

Lorem ipsum dolor sit amet. Normal letter spacing.

Lorem ipsum dolor sit amet. Wide letter spacing.

{% endcapture %} {% include example.html code=code %}

Line height

Control the leading (line height) of an element.

{% capture code %}

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.

{% endcapture %} {% include example.html code=code %}

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.

{% capture code %}

Text with antialiasing

Text without antialiasing

{% endcapture %} {% include example.html code=code %}

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.

{% capture code %}

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

• In fermentum leo eu lectus mollis, quis dictum mi aliquet.
• Morbi eu nulla lobortis, lobortis est in, fringilla felis.
• Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
• Ut non enim metus.

{% endcapture %} {% include example.html code=code %}