Tipografía

Documentación y ejemplos para la tipografía de Bootstrap, incluyendo configuraciones globales, encabezados, texto del cuerpo, listas y más.

En esta página

Configuraciones globales

Bootstrap establece estilos básicos globales de visualización, tipografía y enlaces. Cuando se necesite más control, consulta las clases de utilidad de texto (textual utility classes).

Utiliza una pila de fuentes nativas que selecciona la mejor font-family para cada sistema operativo y dispositivo.
Para una escala de tipo más inclusiva y accesible, utilizamos el font-size raíz predeterminado del navegador (normalmente 16px) para que los visitantes puedan personalizar los valores predeterminados de su navegador según sea necesario.
Utiliza los atributos $font-family-base, $font-size-base y $line-height-base como nuestra base tipográfica aplicada al <body>.
Establece el color de enlace global a través de $link-color.
Utiliza $body-bg para establecer un background-color en el <body> (#fff por defecto).

Estos estilos se pueden encontrar dentro de _reboot.scss, y las variables globales se definen en _variables.scss. Asegúrate de establecer $font-size-base en rem.

Encabezados

Todos los encabezados HTML, desde <h1> hasta <h6>, están disponibles.

Encabezado	Ejemplo
`<h1></h1>`	h1. Encabezado de Bootstrap
`<h2></h2>`	h2. Encabezado de Bootstrap
`<h3></h3>`	h3. Encabezado de Bootstrap
`<h4></h4>`	h4. Encabezado de Bootstrap
`<h5></h5>`	h5. Encabezado de Bootstrap
`<h6></h6>`	h6. Encabezado de Bootstrap

<h1>h1. Encabezado de Bootstrap</h1>
<h2>h2. Encabezado de Bootstrap</h2>
<h3>h3. Encabezado de Bootstrap</h3>
<h4>h4. Encabezado de Bootstrap</h4>
<h5>h5. Encabezado de Bootstrap</h5>
<h6>h6. Encabezado de Bootstrap</h6>

Las clases .h1 a .h6 también están disponibles para cuando desees que coincida con el estilo de fuente de un encabezado pero no puedas usar el elemento HTML asociado.

h1. Encabezado de Bootstrap

h2. Encabezado de Bootstrap

h3. Encabezado de Bootstrap

h4. Encabezado de Bootstrap

h5. Encabezado de Bootstrap

h6. Encabezado de Bootstrap

html

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

Personalización de encabezados

Utiliza las clases de utilidad incluidas para recrear el pequeño texto de encabezado secundario de Bootstrap 3.

Encabezado de visualización elegante Con texto secundario atenuado

html

<h3>
  Encabezado de visualización elegante
  <small class="text-body-secondary">Con texto secundario atenuado</small>
</h3>

Encabezados de pantalla

Los elementos de encabezado tradicionales están diseñados para funcionar mejor en el contenido principal de tu página. Cuando necesites que un encabezado se destaque, considera usar un encabezado de pantalla (display heading), un estilo de encabezado más grande y con más personalidad.

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Los encabezados de pantalla se configuran a través del mapa Sass $display-font-sizes y dos variables, $display-font-weight y $display-line-height.

Los encabezados de pantalla son personalizables a través de dos variables, $display-font-family and $display-font-style.

scss/_variables.scss

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Destacado

Haz que un párrafo se destaque agregando .lead.

Este es un párrafo destacado (lead). Se destaca de los párrafos normales.

html

<p class="lead">
  Este es un párrafo destacado (lead). Se destaca de los párrafos normales.
</p>

Elementos de texto en línea

Estilos para elementos HTML5 en línea comunes.

Puedes usar la etiqueta mark para resaltar texto.

~~Esta línea de texto está destinada a ser tratada como texto eliminado.~~

~~Esta línea de texto está destinada a ser tratada como ya no precisa.~~

Esta línea de texto está destinada a ser tratada como una adición al documento.

Esta línea de texto se representará como subrayada.

Esta línea de texto está destinada a ser tratada como letra pequeña.

Esta línea se representa como texto en negrita.

Esta línea se representa como texto en cursiva.

html

<p>Puedes usar la etiqueta mark para <mark>resaltar</mark> texto.</p>
<p><del>Esta línea de texto está destinada a ser tratada como texto eliminado.</del></p>
<p><s>Esta línea de texto está destinada a ser tratada como ya no precisa.</s></p>
<p><ins>Esta línea de texto está destinada a ser tratada como una adición al documento.</ins></p>
<p><u>Esta línea de texto se representará como subrayada.</u></p>
<p><small>Esta línea de texto está destinada a ser tratada como letra pequeña.</small></p>
<p><strong>Esta línea se representa como texto en negrita.</strong></p>
<p><em>Esta línea se representa como texto en cursiva.</em></p>

Ten en cuenta que esas etiquetas deben usarse con fines semánticos:

 representa texto que está marcado o resaltado para fines de referencia o anotación.
 representa comentarios secundarios y letra pequeña, como derechos de autor y texto legal.
<s> representa elementos que ya no son relevantes o que ya no son precisos.
 representa un lapso de texto en línea que debe renderizarse de una manera que indique que tiene una anotación no textual.

Si deseas dar estilo a tu texto, debes usar las siguientes clases en su lugar:

.mark aplicará los mismos estilos que .
.small aplicará los mismos estilos que .
.text-decoration-underline aplicará los mismos estilos que .
.text-decoration-line-through aplicará los mismos estilos que <s>.

Aunque no se muestra arriba, siéntete libre de usar  e  en HTML5.  está destinado a resaltar palabras o frases sin transmitir importancia adicional, mientras que  es principalmente para voz, términos técnicos, etc.

Utilidades de texto

Cambia la alineación del texto, la transformación, el estilo, el grosor, la altura de línea, la decoración y el color con nuestras utilidades de texto y utilidades de color.

Abreviaturas

Implementación estilizada del elemento <abbr> de HTML para abreviaturas y acrónimos para mostrar la versión ampliada al pasar el cursor. Las abreviaturas tienen un subrayado predeterminado y obtienen un cursor de ayuda para proporcionar contexto adicional al pasar el cursor y a los usuarios de tecnologías de asistencia.

Agrega .initialism a una abreviatura para obtener un tamaño de fuente ligeramente más pequeño.

attr

HTML

html

<p><abbr title="atributo">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Citas en bloque

Para citar bloques de contenido de otra fuente dentro de tu documento. Envuelve <blockquote class="blockquote"> alrededor de cualquier HTML como la cita.

Una cita conocida, contenida en un elemento blockquote.

html

<blockquote class="blockquote">
  <p>Una cita conocida, contenida en un elemento blockquote.</p>
</blockquote>

Nombrar una fuente

La especificación HTML requiere que la atribución de la cita en bloque se coloque fuera del <blockquote>. Al proporcionar la atribución, envuelve tu <blockquote> en un <figure> y usa un <figcaption> o un elemento a nivel de bloque (por ejemplo, ) con la clase .blockquote-footer. Asegúrate de envolver también el nombre de la obra fuente en <cite>.

Una cita conocida, contenida en un elemento blockquote.

html

<figure>
  <blockquote class="blockquote">
    <p>Una cita conocida, contenida en un elemento blockquote.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Alguien famoso en <cite title="Título de la fuente">Título de la fuente</cite>
  </figcaption>
</figure>

Alineación

Usa utilidades de texto según sea necesario para cambiar la alineación de tu cita en bloque.

Una cita conocida, contenida en un elemento blockquote.

html

<figure class="text-center">
  <blockquote class="blockquote">
    <p>Una cita conocida, contenida en un elemento blockquote.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Alguien famoso en <cite title="Título de la fuente">Título de la fuente</cite>
  </figcaption>
</figure>

Una cita conocida, contenida en un elemento blockquote.

html

<figure class="text-end">
  <blockquote class="blockquote">
    <p>Una cita conocida, contenida en un elemento blockquote.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Alguien famoso en <cite title="Título de la fuente">Título de la fuente</cite>
  </figcaption>
</figure>

Listas

Sin estilo

Elimina el estilo de lista (list-style) predeterminado y el margen izquierdo en los elementos de la lista (solo hijos inmediatos). Esto solo se aplica a los elementos de lista hijos inmediatos, lo que significa que deberás agregar la clase también para las listas anidadas.

Esta es una lista.
Aparece completamente sin estilo.
Estructuralmente, sigue siendo una lista.
Sin embargo, este estilo solo se aplica a los elementos secundarios inmediatos.
Listas anidadas:
- no se ven afectadas por este estilo
- seguirán mostrando una viñeta
- y tienen el margen izquierdo adecuado
Esto todavía puede resultar útil en algunas situaciones.

html

<ul class="list-unstyled">
  <li>Esta es una lista.</li>
  <li>Aparece completamente sin estilo.</li>
  <li>Estructuralmente, sigue siendo una lista.</li>
  <li>Sin embargo, este estilo solo se aplica a los elementos secundarios inmediatos.</li>
  <li>Listas anidadas:
    <ul>
      <li>no se ven afectadas por este estilo</li>
      <li>seguirán mostrando una viñeta</li>
      <li>y tienen el margen izquierdo adecuado</li>
    </ul>
  </li>
  <li>Esto todavía puede resultar útil en algunas situaciones.</li>
</ul>

En línea

Elimina las viñetas de una lista y aplica un margen (margin) ligero con una combinación de dos clases, .list-inline y .list-inline-item.

Este es un elemento de lista.
And another one.
But they’re displayed inline.

html

<ul class="list-inline">
  <li class="list-inline-item">Este es un elemento de lista.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they’re displayed inline.</li>
</ul>

Alineación de la lista de descripción

Alinea términos y descripciones horizontalmente utilizando las clases predefinidas de nuestro sistema de cuadrícula (o mixins semánticos). Para términos más largos, opcionalmente puedes agregar una clase .text-truncate para truncar el texto con puntos suspensivos.

Listas de descripción

Una lista de descripción es perfecta para definir términos.

Término

Definición para el término.

Y un poco más de texto de definición de marcador de posición.

Otro término

Esta definición es corta, por lo que no hay párrafos adicionales ni nada.

El término truncado está truncado

Esto puede ser útil cuando el espacio es reducido. Agrega puntos suspensivos al final.

Anidación

Lista de definición anidada: Escuché que te gustan las listas de definiciones. Déjame poner una lista de definiciones dentro de tu lista de definiciones.

html

<dl class="row">
  <dt class="col-sm-3">Listas de descripción</dt>
  <dd class="col-sm-9">Una lista de descripción es perfecta para definir términos.</dd>

  <dt class="col-sm-3">Término</dt>
  <dd class="col-sm-9">
    <p>Definición para el término.</p>
    <p>Y un poco más de texto de definición de marcador de posición.</p>
  </dd>

  <dt class="col-sm-3">Otro término</dt>
  <dd class="col-sm-9">Esta definición es corta, por lo que no hay párrafos adicionales ni nada.</dd>

  <dt class="col-sm-3 text-truncate">El término truncado está truncado</dt>
  <dd class="col-sm-9">Esto puede ser útil cuando el espacio es reducido. Agrega puntos suspensivos al final.</dd>

  <dt class="col-sm-3">Anidación</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Lista de definición anidada</dt>
      <dd class="col-sm-8">Escuché que te gustan las listas de definiciones. Déjame poner una lista de definiciones dentro de tu lista de definiciones.</dd>
    </dl>
  </dd>
</dl>

Tamaños de fuente responsivos

En Bootstrap 5, hemos habilitado tamaños de fuente responsivos por defecto, lo que permite que el texto se escale de forma más natural en todos los tamaños de dispositivos y viewports. Echa un vistazo a la página de RFS para descubrir cómo funciona esto.

CSS

Variables de Sass

Los encabezados tienen algunas variables dedicadas para el tamaño y el espaciado.

scss/_variables.scss

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              inherit;

Los elementos tipográficos varios cubiertos aquí y en Reboot también tienen variables dedicadas.

scss/_variables.scss

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

// fusv-disable
$text-muted:                  var(--#{$prefix}secondary-color); // Deprecated in 5.3.0
// fusv-enable

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             var(--#{$prefix}border-width);
$hr-opacity:                  .25;

// scss-docs-start vr-variables
$vr-border-width:             var(--#{$prefix}border-width);
// scss-docs-end vr-variables

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-color:                  $body-color;
$mark-bg:                     $yellow-100;

Mixins de Sass

No hay mixins dedicados para tipografía, pero Bootstrap utiliza Tamaño de fuente responsivo (RFS).

Tipografía

¿Te gustó esta traducción?

Configuraciones globales

Encabezados

Personalización de encabezados

Encabezado de visualización elegante Con texto secundario atenuado

Encabezados de pantalla

Destacado

Elementos de texto en línea

Utilidades de texto

Abreviaturas

Citas en bloque

Nombrar una fuente

Alineación

Listas

Sin estilo

En línea

Alineación de la lista de descripción

Tamaños de fuente responsivos

CSS

Variables de Sass

Mixins de Sass