typography.mdx 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. ---
  2. title: Typography
  3. 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.
  4. bootstrapLink: content/typography/
  5. ---
  6. ## Headings
  7. Use HTML headings to organize content on your website and make the structure clear and user-friendly.
  8. ```html example vertical
  9. <h1>H1 Heading</h1>
  10. <h2>H2 Heading</h2>
  11. <h3>H3 Heading</h3>
  12. <h4>H4 Heading</h4>
  13. <h5>H5 Heading</h5>
  14. <h6>H6 Heading</h6>
  15. ```
  16. ```html
  17. <h1>H1 Heading</h1>
  18. <h2>H2 Heading</h2>
  19. <h3>H3 Heading</h3>
  20. <h4>H4 Heading</h4>
  21. <h5>H5 Heading</h5>
  22. <h6>H6 Heading</h6>
  23. ```
  24. ## Paragraphs
  25. Organize longer pieces of text into paragraphs using the `p` tag.
  26. ```html example vertical centered columns={2}
  27. <div>
  28. <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>
  29. <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
  30. </div>
  31. ```
  32. ```html
  33. <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>
  34. <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
  35. ```
  36. ## Semantic text elements
  37. Use a variety of semantic text elements, depending of how you want to display particular fragments of content.
  38. ```html example vertical separated columns={1}
  39. <div><abbr title="Internationalization">I1f8N</abbr></div>
  40. <div><strong>Bold</strong></div>
  41. <div><cite>Citation</cite></div>
  42. <div><code>Hello World!</code></div>
  43. <div><del>Deleted</del></div>
  44. <div><em>Emphasis</em></div>
  45. <div><i>Italic</i></div>
  46. <div><ins>Inserted</ins></div>
  47. <div><kbd>Ctrl + S</kbd></div>
  48. <div><mark>Highlighted</mark></div>
  49. <div><s>Strikethrough</s></div>
  50. <div><samp>Sample</samp></div>
  51. <div>Text <sub>Subscripted</sub></div>
  52. <div>Text <sup>Superscripted</sup></div>
  53. <div><time>20:00</time></div>
  54. <div><u>Underline</u></div>
  55. <div><var>x</var> = <var>y</var> + 2</div>
  56. ```
  57. ```html
  58. <abbr title="Internationalization">I18N</abbr>
  59. <strong>Bold</strong>
  60. <cite>Citation</cite>
  61. <code>Hello World!</code>
  62. <del>Deleted</del>
  63. <em>Emphasis</em>
  64. <i>Italic</i>
  65. <ins>Inserted</ins>
  66. <kbd>Ctrl + S</kbd>
  67. <mark>Highlighted</mark>
  68. <s>Strikethrough</s>
  69. <samp>Sample</samp>
  70. Text <sub>Subscripted</sub>
  71. Text <sup>Superscripted</sup>
  72. <time>20:00</time>
  73. <u>Underline</u>
  74. <var>x</var> = <var>y</var> + 2
  75. ```
  76. ## Horizontal rules
  77. Use the `hr` tag to represent a thematic break between paragraphs within one section.
  78. ```html example vertical centered columns={2}
  79. <div>
  80. <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>
  81. <hr />
  82. <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>
  83. </div>
  84. ```
  85. ```html
  86. <hr />
  87. ```
  88. ## Horizontal rules with label
  89. You can also add a label to a horizontal rule and align it as you see fit.
  90. ```html code example vertical centered columns={2}
  91. <p>
  92. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  93. </p>
  94. <div class="hr-text">
  95. <span>Rule text</span>
  96. </div>
  97. <p>
  98. 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.
  99. </p>
  100. <div class="hr-text hr-text-center">
  101. <span>Rule text</span>
  102. </div>
  103. <p>
  104. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  105. </p>
  106. <div class="hr-text hr-text-end">
  107. <span>Rule text</span>
  108. </div>
  109. <p>
  110. 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.
  111. </p>
  112. ```
  113. ## Optimized for different alphabets
  114. Tabler has been optimized to correctly display content in any language. It supports most Asian, African and Middle Eastern languages.
  115. ```html example vertical centered columns={2}
  116. <p>汉字</p>
  117. <p>日本語の表記体系</p>
  118. <p>Кириллица</p>
  119. <p>Eλληνική</p>
  120. <p>ქართული დამწერლობა</p>
  121. <p>Հայերենի այբուբեն</p>
  122. <p>الحروف العربية</p>
  123. <p>אלפבית עברי</p>
  124. <p>อักษรไทย</p>
  125. ```
  126. ```html
  127. <h5>Chinese</h5>
  128. <p>汉字</p>
  129. <h5>Japanese</h5>
  130. <p>日本語の表記体系</p>
  131. <h5>Cyrillic</h5>
  132. <p>Кириллица</p>
  133. <h5>Greek</h5>
  134. <p>Eλληνική</p>
  135. <h5>Georgian</h5>
  136. <p>ქართული დამწერლობა</p>
  137. <h5>Armenian</h5>
  138. <p>Հայերենի այբուբեն</p>
  139. <h5>Arabic</h5>
  140. <p>الحروف العربية</p>
  141. <h5>Hebrew</h5>
  142. <p>אלפבית עברי</p>
  143. <h5>Thai</h5>
  144. <p>อักษรไทย</p>
  145. ```
  146. ## Text transform
  147. Transform the content of components with text capitalization classes.
  148. ```html example vertical
  149. <div class="text-lowercase">Lowercased text.</div>
  150. <div class="text-uppercase">Uppercased text.</div>
  151. <div class="text-capitalize">Capitalized text.</div>
  152. ```
  153. ```html
  154. <p class="text-lowercase">Lowercased text.</p>
  155. <p class="text-uppercase">Uppercased text.</p>
  156. <p class="text-capitalize">Capitalized text.</p>
  157. ```
  158. ## Letter spacing
  159. Control the tracking (letter spacing) of an element and make it tight, wide or normal.
  160. ```html example vertical
  161. <div class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</div>
  162. <div class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</div>
  163. <div class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</div>
  164. ```
  165. ```html
  166. <p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
  167. <p class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</p>
  168. <p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
  169. ```
  170. ## Line height
  171. Control the leading (line height) of an element.
  172. ```html example
  173. <div class="row">
  174. <div class="col">
  175. <div class="card">
  176. <div class="card-body">
  177. <div class="lh-1">Lorem ipsum dolor sit amet. Dolor sit amet.</div>
  178. </div>
  179. </div>
  180. </div>
  181. <div class="col">
  182. <div class="card">
  183. <div class="card-body">
  184. <div class="lh-sm">Lorem ipsum dolor sit amet. Dolor sit amet.</div>
  185. </div>
  186. </div>
  187. </div>
  188. <div class="col">
  189. <div class="card">
  190. <div class="card-body">
  191. <div class="lh-base">Lorem ipsum dolor sit amet. Dolor sit amet.</div>
  192. </div>
  193. </div>
  194. </div>
  195. <div class="col">
  196. <div class="card">
  197. <div class="card-body">
  198. <div class="lh-lg">Lorem ipsum dolor sit amet. Dolor sit amet.</div>
  199. </div>
  200. </div>
  201. </div>
  202. </div>
  203. ```
  204. ```html
  205. <p class="lh-1">Lorem ipsum dolor sit amet. Dolor sit amet.</p>
  206. <p class="lh-sm">Lorem ipsum dolor sit amet. Dolor sit amet.</p>
  207. <p class="lh-base">Lorem ipsum dolor sit amet. Dolor sit amet.</p>
  208. <p class="lh-lg">Lorem ipsum dolor sit amet. Dolor sit amet.</p>
  209. ```
  210. ## Antialiasing
  211. Control the font smoothing of an element.
  212. Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` utility to remove antialiasing.
  213. ```html code example
  214. <div class="antialiased">Text with antialiasing</div>
  215. <div class="subpixel-antialiased">Text without antialiasing</div>
  216. ```
  217. ## Keyboard input
  218. Use the `<kbd>` to indicate input that is typically entered via keyboard.
  219. ```html example centered
  220. <div>
  221. To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.
  222. </div>
  223. ```
  224. ```html
  225. To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.
  226. ```
  227. ## Markdown elements
  228. 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.
  229. ```html code example centered background="white" columns={2} height="30rem"
  230. <div class="markdown">
  231. <h1>Hello World</h1>
  232. <p>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!</p>
  233. <h2>Second level</h2>
  234. <p>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.</p>
  235. <ul>
  236. <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
  237. <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
  238. <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
  239. <li>Ut non enim metus.</li>
  240. </ul>
  241. </div>
  242. ```