Typography
How Tabler styles headings, paragraphs, semantic text elements, horizontal rules and the text utilities.
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:
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
<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.
<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.
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.
<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.
Installation
Everything you need to get Tabler running in your project.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
<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.
To select text using your mouse, click and drag the cursor over the text you want to highlight.
<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:
Hello World!<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.
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?
<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.
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
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> 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.
汉字
日本語の表記体系
Кириллица
Eλληνική
ქართული დამწერლობა
Հայերենի այբուբեն
الحروف العربية
אלפבית עברי
อักษรไทย
<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.
Lowercased text.
Uppercased text.
Capitalized text.
<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.
Lorem ipsum dolor sit amet. Tight letter spacing.
Lorem ipsum dolor sit amet. Normal letter spacing.
Lorem ipsum dolor sit amet. Wide letter spacing.
<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.
This is the long text with line height 1.
Lorem ipsum dolor sit amet.
Dolor sit amet.
This is the long text with small line height.
Lorem ipsum dolor sit amet.
Dolor sit amet.
This is the long text with base line height.
Lorem ipsum dolor sit amet.
Dolor sit amet.
This is the long text with large line height.
Lorem ipsum dolor sit amet.
Dolor sit amet.
<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.
<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.
To edit settings, press ctrl + , or ctrl + C .
<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 for the full set of examples.
Accessibility
- Headings carry the structure of the page. Use
h1toh6in order, and the.h1to.h6classes when you need the look of a heading on something that is not one. - One
h1per page, naming that page. - Do not use a heading to make text big, and do not use
strongin 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-uppercasechanges 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-spacingorline-heightutilities to squeeze text below the browser default. Users need that space.
