Tipografía

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

On this page

Ajustes globales

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

Usa una pila de fuentes nativa que selecciona el mejor font-family para cada sistema operativo y dispositivo.
Para una escala tipográfica más inclusiva y accesible, usamos 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.
Usa los atributos $font-family-base, $font-size-base, y $line-height-base como nuestra base tipográfica aplicada al <body>.
Establece el color global de los enlaces 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 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. 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>

Las clases de .h1 a .h6 también están disponibles, para cuando quieres coincidir el estilo de fuente de un encabezado pero no puedes 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. 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>

Personalización de encabezados

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

Encabezado display elegante Con texto secundario desvanecido

html

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

Encabezados de visualización

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 destaque, considera usar un encabezado display—un estilo de encabezado más grande y ligeramente más opinado.

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

Los encabezados display son personalizables 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 destaque añadiendo .lead.

Este es un párrafo destacado. Resalta respecto a los párrafos regulares.

html

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

Elementos de texto en línea

Estilos para elementos HTML5 comunes en línea.

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 renderizará como subrayada.

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

This line rendered as bold text.

Esta línea se renderiza 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 un propósito semántico:

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

Si quieres 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 muestren arriba, siéntete libre de usar  y  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, transformación, estilo, peso, altura de línea, decoración y color del texto con nuestras utilidades de texto y utilidades de color.

Abreviaturas

Implementación estilizada del elemento <abbr> de HTML para abreviaturas y acrónimos que muestra la versión expandida 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.

Añade .initialism a una abreviatura para un font-size 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>

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>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Citar una fuente

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

Una cita 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 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 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 estilos

Elimina el list-style predeterminado y el margen izquierdo de los elementos de lista (solo hijos directos). Esto solo se aplica a los elementos de lista hijos directos, lo que significa que necesitarás añadir la clase también para cualquier lista anidada.

Esta es una lista.
Aparece completamente sin estilo.
Estructuralmente, sigue siendo una lista.
Sin embargo, este estilo solo se aplica a los elementos hijos directos.
Nested lists:
- no se ven afectados por este estilo
- seguirán mostrando una viñeta
- y tendrán el margen izquierdo apropiado
Esto puede seguir siendo ú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>

En línea

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

Este es un elemento de 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 listas de descripciones

Alinea términos y descripciones horizontalmente usando las clases predefinidas de nuestro sistema de grid (o mixins semánticos). Para términos más largos, puedes añadir opcionalmente 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 del término.

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

Otro término

Esta definición es corta, así que sin párrafos extra ni nada.

Término truncado está truncado

Esto puede ser útil cuando el espacio es limitado. Añade puntos suspensivos al final.

Anidamiento

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

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 los tamaños de fuente responsivos por defecto, permitiendo que el texto escale de forma más natural entre diferentes tamaños de dispositivo y viewport. Echa un vistazo a la página de RFS para descubrir cómo funciona.

CSS

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

No hay mixins dedicados para la tipografía, pero Bootstrap sí usa Responsive Font Sizing (RFS).