Bootstrap pone a disposición una serie de variables globales y clases para el manejo de la tipografía. En la documentación oficial podrá revisar las principales herramientas disponibles. A continuación mencionaremos algunas de ellas y comentaremos las utilidades extra que añade este kit.

Bootstrap ofrece un set de clases para los estilos tipográficos de los títulos, del h1 al h6, necesarios para cuando se requiera que visualmente un texto se vea como uno de los títulos pero que no se pueda utilizar el tag correspondiente. Por ejemplo, el correcto uso de la semántica en una página web ayuda a mantener un sitio accesible por otros sistemas y con buen posicionamiento en buscadores (SEO), por lo tanto, el uso de los tags de títulos debiese estar restringido sólo al texto que tenga esa función en la jerarquía correspondiente.

A continuación, una lista de ejemplo:

Otro set de clases disponibles, añadidas en este kit, corresponden a los font-level, .font-level-1 a .font-level-8, las cuales implementan sólo el tamaño de la fuente y el alto de la línea de los estilos tipográficos de títulos, más el body default y párrafos. Además está la clase .font-base, que implementa el estilo de la tipografía por defecto Body Default.

A continuación, una lista de ejemplo:

El framework kit de gobierno personaliza estos estilos en el archivo _typography.scss con los valores disponibles en las variables globales en _variables.scss. Debe recordar siempre definir los tamaños en rem.

Bootstrap ofrece una serie de clases de utilidad para personalizar propiedades del texto específicas tales como la alineación, ajuste (wrap), mayúsculas, minúsculas, estilo en negrita, decoraciones, entre otros.

Este kit agrega clases para aquellas ocasiones en las que se necesita fijar el altoheight de un elemento que contiene texto. Para ello se utiliza como referencia el alto de línealine-height de la tipografía a utilizar. Estas clases tienen la forma.text-lines-X-Y, donde X corresponde a un número del 1 al 8 que representa la tipografía , e Y corresponde a un número del 0 al 20 e indica la cantidad de líneas a fijar. Si el elemento que utiliza esta clase utiliza menos líneas, quedará espacio en blanco. Si se pasa, no aparecerán las líneas extras.

A modo de ejemplo, para cada nivel de texto, se fija el alto en 3 líneas .text-lines-X-3 y se escriben solamente 2: