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.
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.
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
There is example of headings with different levels:
Paragraphs
Organize longer pieces of text into paragraphs using the p tag. It is the most common element for text content.
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
If you use second paragraph, it will be separated from the first one by a blank line.
Semantic text elements
Use a variety of semantic text elements, depending of how you want to display particular fragments of content.
<abbr title="Internationalization">I18N</abbr>
<strong>Bold</strong>
<cite>Citation</cite>
<code>Hello World!</code>
<del>Deleted</del>
<em>Emphasis</em>
<i>Italic</i>
<ins>Inserted</ins>
<kbd>Ctrl + S</kbd>
<mark>Highlighted</mark>
<s>Strikethrough</s>
<samp>Sample</samp>
Text <sub>Subscripted</sub>
Text <sup>Superscripted</sup>
<time>20:00</time>
<u>Underline</u>
<var>x</var> = <var>y</var> + 2
Here is an example of semantic text elements:
Horizontal rules
Use the hr tag to represent a thematic break between paragraphs within one section.
<hr />
Horizontal rules with label
You can also add a label to a horizontal rule and align it as you see fit.
Optimized for different alphabets
Tabler has been optimized to correctly display content in any language. It supports most Asian, African and Middle Eastern languages.
Text transform
Transform the content of components with text capitalization classes.
<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.
<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.
To control the line height of an element, use the following classes:
<p class="lh-1">...</p>
<p class="lh-sm">...</p>
<p class="lh-base">...</p>
<p class="lh-lg">...</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.
Keyboard input
Use the <kbd> to indicate input that is typically entered via keyboard.
To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.
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 will apply the default styles for markdown elements.
