"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Tipografía en Bootstrap 4

La tipografía en Bootstrap 4 es un factor a tener muy en cuenta, ya que todo el diseño de la página y también la experiencia de usuario dependen bastante del uso que le demos.

Independientemente de la fuente escogida Bootstrap 4 nos permite trabajar con los textos de la página de forma sencilla, vamos a ver como.

Antes de continuar como suelo hacer os dejo el enlace a la documentación oficial, y si teneis curiosidad por conocer otras novedades de Bootstrap 4 podeis visitar este artículo.

En primer lugar el tamaño de la fuente está definida en rems, el rem (o root em) es una unidad de medida relativa en este caso basada en el tamaño de la fuente definido en el body.

Es decir que si nuestro body tiene un tamaño de fuente de 16px eso es lo que vale 1 rem, por tanto 2 rems valen 32px, 3 rem valen 48px, etc…

Gracias al uso de este tipo de unidades la página es más escalable y flexible para los desarrolladores.

Si te preguntas como cambiar el valor del rem, tienes una variable donde esta definido, se llama $font-size-base que está en el fichero _variables.scss.

Por supuesto si te bajas la librería ya construida no puedes alterar estos valores, de manera que si tu propósito es alterar los parámetros de Bootstrap 4 vas a necesitar descargar el código sass y usar despues un transpilador (puedes usar herramientas que permiten ejecutar tareas de  transpilación como grunt, gulp, webpack…)

Dentro de este fichero de variables tenemos otras también muy interesantes como $font-family-base y $line-height-base para  cambiar la fuente o el interlineado.

Encabezados

Los encabezados son fundamentales en una página web, pues estructuran la información tanto visualmente como a nivel sintáctico para los lectores de pantalla.

Tenemos disponibles estilos para los 6 tipos de encabezados h1 – h6, siendo como es lógico h1 el de más tamaño (2.5 rem) y h6 el más pequeño (1 rem).

También tenemos clases disponibles para simular los estilos de los encabezados, de manera que en pantalla este código:

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Es visualmente idéntico a este otro:

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Con respecto al uso de estas clases para simular los estilos de un encabezado en otros elementos, por ejemplo en un párrafo como en el caso anterior, debemos tener cuidado.

Si realmente la estructura del textos requiere de esa etiqueta pero queremos por lo que sea usar los estilos de encabezado esta bien.

Pero que se vean igual no quiere decir que sean el mismo elemento, aunque parece estúpido explicar esto, pudieramos cometer el error de usar indiferentemente las clases y las etiquetas.

Como mencionaba antes, si queremos garantizar la accesibilidad y que los lectores lean bien la página para crear un encabezado tenemos que emplear la etiqueta correspondiente.

(O usar el otra etiqueta, luego usar estas clases y por último usar los atributos role y aria-level, pero es dar un rodeo muy innecesario.)

También hay una clase para recrear la clásica cabecera secundaria que tenía Bootstrap 3, es la clase .text-muted y la podemos usar así.

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Por último tenemos estilos específicos para crear encabezados de gran tamaño, y tiene lógica, pues en ocasiones los 2.5 rems del h1 se nos pueden quedar cortos.

A estas clases especiales las llaman display headings y como su nombre indica son encabezados que van a ocupar gran parte de la pantalla, y que además tienen una fuente más estilizada y adaptada a las proporciones de un monitor.

Podemos usarlos así.

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

 

 

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)