typography.md 8.1 KB
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. bootstrapLink: content/typography/
description: Role of typography in interface design.
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:
{% capture html -%}
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
{%- endcapture %} {% include "docs/example.html" html=html %}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.
{% capture 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.
{%- endcapture %} {% include "docs/example.html" html=html vertical %}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:
{% capture html -%}
<strong>Bold</strong>
Hello World!
Text <sub>Subscript</sub>
Text <sup>Superscript</sup>
<var>x</var> = <var>y</var> + 2
Horizontal rules
Use the hr tag to represent a thematic break between paragraphs within one section.
{% capture html -%}
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?
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.
{% capture 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. 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.
{%- endcapture %} {% include "docs/example.html" html=html %}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 html -%}
汉字
日本語の表記体系
Кириллица
Eλληνική
ქართული დამწერლობა
Հայերենի այբուբեն
الحروف العربية
אלפבית עברי
อักษรไทย
{%- endcapture %} {% include "docs/example.html" html=html %}Text transform
Transform the content of components with text capitalization classes.
{% capture html -%}
Lowercased text.
Uppercased text.
Capitalized text.
{%- endcapture %} {% include "docs/example.html" html=html %}Letter spacing
Control the tracking (letter spacing) of an element and make it tight, wide or normal.
{% capture 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.
{%- endcapture %} {% include "docs/example.html" html=html %}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.
{% capture html -%}
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.
{%- endcapture %} {% include "docs/example.html" html=html %}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 html -%}
Keyboard input
Use the <kbd> to indicate input that is typically entered via keyboard.
{% capture html -%} To edit settings, press ctrl + , or ctrl + C. {%- endcapture %} {% include "docs/example.html" html=html %}
Markdown elements
If you can't use the CSS classes you want, or you just want to use HTML tags, use the .markdown class in a container. It will apply the default styles for markdown elements.
{% capture html -%}
Hello World
Lorem ipsum<sup>[1]</sup> 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<sub
>script</sub
>
works as well!
Second level
Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> 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.
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
<li>Ut non enim metus.</li>