Tipografía

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

😎 Esta traducción es parte del proyecto esdocu.com.

En esta página

Configuración global

Bootstrap establece estilos básicos de visualización global, tipografía y enlaces. Cuando necesites más control, consulta las clases de utilidades textuales.

Usa una pila de fuentes nativas que seleccione el mejor font-family para cada sistema operativo y dispositivo.
Para una escala de tipografía más inclusiva y accesible, utilizamos la raíz predeterminada del navegador font-size (normalmente 16 píxeles) para que los visitantes puedan personalizar los valores predeterminados de su navegador según sea necesario.
Usa los atributos $font-family-base, $font-size-base y $line-height-base como nuestra base tipográfica aplicada al <body>.
Establece el color del enlace global mediante $link-color.
Usa $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 están definidas en _variables.scss. Asegúrate de configurar $font-size-base en rem.

Títulos

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

Título	Ejemplo
`<h1></h1>`	h1. Título de Bootstrap
`<h2></h2>`	h2. Título de Bootstrap
`<h3></h3>`	h3. Título de Bootstrap
`<h4></h4>`	h4. Título de Bootstrap
`<h5></h5>`	h5. Título de Bootstrap
`<h6></h6>`	h6. Título de Bootstrap

<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>

.h1 a .h6 también están disponibles, para cuando quieras hacer coincidir el estilo de fuente de un encabezado pero no puedas utiliza el elemento HTML asociado.

h1. Título de Bootstrap

h2. Título de Bootstrap

h3. Título de Bootstrap

h4. Título de Bootstrap

h5. Título de Bootstrap

h6. Título de Bootstrap

html

<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>

Personalizar encabezados

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

Título de pantalla elegante Con texto secundario descolorido

html

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

Mostrar encabezados

Los elementos de encabezado tradicionales están diseñados para funcionar mejor en el contenido principal de tu página. Cuando necesites que un título destaque, considera la posibilidad de utilizar un título de visualización: un estilo de título más grande y un poco más obstinado.

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 visualización se configuran mediante el mapa Sass $display-font-sizes y dos variables, $display-font-weight y $display-line-height.

Los encabezados de visualización se pueden personalizar mediante dos variables, $display-font-family y $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;

Lead

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

Este es un párrafo inicial. Se destaca de los párrafos habituales.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Elementos de texto en línea

Estilo para elementos HTML5 en línea comunes.

Puedes usar la etiqueta de mark para resaltar texto.

~~Esta línea de texto debe tratarse como texto eliminado.~~

~~Esta línea de texto debe tratarse como si ya no fuera precisa.~~

Esta línea de texto debe tratarse como una adición al documento.

Esta línea de texto se mostrará subrayada.

Esta línea de texto debe tratarse como letra pequeña.

Esta línea aparece como texto en negrita.

Esta línea se muestra como texto en cursiva.

html

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

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

 representa texto que está marcado o resaltado con fines de referencia o notació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 tramo de texto en línea que debe representarse de una manera que indique que tiene una anotación no textual.

Si quieres darle 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  y  en HTML5.  está destinado a resaltar palabras o frases sin transmitir importancia adicional, mientras que  está destinado principalmente a voz, términos técnicos, etc.

Utilidades de texto

Cambia la alineación del texto, la transformación, el estilo, el peso, la altura de la 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 mouse. Las abreviaturas tienen un subrayado predeterminado y obtienen un cursor de ayuda para proporcionar contexto adicional al pasar el mouse y a los usuarios de tecnologías de asistencia.

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

attr

HTML

html

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

Blockquotes

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

Una cita muy conocida, contenida en un elemento blockquote.

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Nombrar una fuente

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

Una cita muy conocida, contenida en un elemento blockquote.

html

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Alineación

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

Una cita muy conocida, contenida en un elemento blockquote.

html

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Una cita muy conocida, contenida en un elemento blockquote.

html

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Listas

Sin estilo

Eliminar el list-style predeterminado y el margen izquierdo en los elementos de la lista (solo children inmediatos). Esto solo se aplica a los elementos de la lista secundaria inmediata, lo que significa que también deberás agregar la clase para cualquier lista anidada.

Esta es una lista.
Parece completamente sin estilo.
Estructuralmente, sigue siendo una lista.
Sin embargo, este estilo solo se aplica a elementos secundarios inmediatos.
Listas anidadas:
- no se ven afectados por este estilo
- seguirá mostrando una viñeta
- y tener un margen izquierdo apropiado
Esto aún puede resultar útil en algunas situaciones.

html

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

Inline

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

Este es un elemento de la lista.
Y otro más.
Pero se muestran en línea.

html

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</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 descripciones

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

Listas de descripción

Una lista de descripciones es perfecta para definir términos.

Término

Definición del término.

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

Otro término

Esta definición es corta, así que no hay párrafos adicionales ni nada por el estilo.

Término truncado se trunca

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

Anidamiento

Lista de definiciones anidadas: 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">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Tamaños de fuente responsive

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

CSS

Variables Sass

Los títulos 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 diversos que se tratan 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;

$vr-border-width:             var(--#{$prefix}border-width);

$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;

Sass mixins

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