Tutorial Bootstrap: Tipografía y fuentes en Bootstrap

Fuentes predeterminadas en Bootstrap

Bootstrap utiliza una pila de fuentes nativas para garantizar que el texto en una página web se vea lo mejor posible en cada sistema operativo y dispositivo. La pila de fuentes se define en el archivo _reboot.scss y se configura mediante la variable Sass $font-family-base. Aquí está la pila de fuentes por defecto:

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue",
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Bootstrap hereda la configuración de fuentes del sistema operativo, utilizando una lista de fuentes que varía según el sistema para conseguir un alcance óptimo y visualmente consistente.

Para personalizar las fuentes en tu proyecto, ajusta la variable $font-family-base en tu archivo Sass antes de compilar Bootstrap. Por ejemplo:

$font-family-base: "Open Sans", sans-serif;

Además de la fuente principal, Bootstrap también usa otras variables de fuentes para configurar diferentes partes de la tipografía:

• $font-size-base: Define el tamaño base de la fuente, generalmente 1rem (16px).
• $font-weight-base: Define el peso de la fuente, por defecto 400.
• $line-height-base: Define la altura de la línea base, por defecto 1.5.

Estos valores pueden ser ajustados para lograr el estilo tipográfico deseado:

$font-size-base: 1.125rem;
$font-weight-base: 300;
$line-height-base: 1.6;

Recuerda que estos cambios afectan a toda la aplicación, por lo que deben ser configurados cuidadosamente para mantener la coherencia del diseño.

Para más detalles sobre la configuración global de las fuentes en Bootstrap, consulta el archivo _variables.scss y otros relacionados en la documentación oficial.

Clases CSS básicas de texto y de encabezados en Bootstrap

Bootstrap ofrece un conjunto extensivo de clases CSS para estilizar texto y encabezados que permite a los desarrolladores aplicar rápidamente estilos coherentes y estéticamente agradables. Las clases se pueden aplicar directamente a los elementos HTML relevantes o mediante clases utilitarias.

Clases para texto

• text-muted: Aplica un color gris suave al texto, ideal para texto secundario o menos importante.

<p class="text-muted">Texto en gris claro.</p>

• text-primary, text-secondary, text-success, text-danger, text-warning, text-info, text-light, text-dark, text-body, text-black-50, text-white-50: Aplica diferentes colores al texto según el contexto.

<p class="text-primary">Texto primario.</p>
<p class="text-warning">Texto de advertencia.</p>

• text-uppercase, text-lowercase, text-capitalize: Cambian la transformación del texto.

<p class="text-uppercase">Texto en mayúsculas.</p>
<p class="text-lowercase">TEXTO EN MINÚSCULAS.</p>
<p class="text-capitalize">texto Capitalizado.</p>

• fw-bold, fw-bolder, fw-normal, fw-light, fw-lighter: Ajusta el peso (grosor) del texto.

<p class="fw-bold">Texto en negrita.</p>

• fst-italic: Aplica estilo de cursiva al texto.

<p class="fst-italic">Texto en cursiva.</p>

Clases para encabezados

Bootstrap proporciona clases específicas para ajustar visualmente los estilos de los encabezados h1 a h6 sin usar las etiquetas HTML correspondientes.

• Clases .h1 a .h6: Imitan los estilos de los encabezados <h1> a <h6> pero pueden ser usadas en cualquier elemento HTML.

<p class="h1">Este es un encabezado h1.</p>
<p class="h2">Este es un encabezado h2.</p>

Las clases de encabezados también pueden ser personalizadas para alinearse con el diseño deseado utilizando las variables Sass incluidas en Bootstrap:

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

Ejemplos adicionales

Uso de clases de texto en párrafos para modificar el estilo y la apariencia:

<p class="text-muted">Texto menos importante en gris claro.</p>
<p class="text-primary">Texto importante en azul primario.</p>
<p class="text-uppercase font-weight-bold">Texto importante y en mayúsculas.</p>

Estos ajustes permiten a los desarrolladores manipular rápidamente la tipografía para lograr coherencia en el diseño, mejorando la claridad y accesibilidad del contenido web.

Clases CSS de cuerpo de texto y transformación de texto

Bootstrap proporciona diversas clases CSS para estilizar el cuerpo del texto y modificar su transformación de manera efectiva. Este conjunto de clases permite a los desarrolladores aplicar rápidamente cambios en la presentación del texto sin necesidad de escribir CSS personalizado.

Clases de alineación de texto

• text-start: Alinea el texto a la izquierda.

<p class="text-start">Texto alineado a la izquierda.</p>

• text-center: Centra el texto.

<p class="text-center">Texto centrado.</p>

• text-end: Alinea el texto a la derecha.

<p class="text-end">Texto alineado a la derecha.</p>

Estas clases son especialmente útiles para lograr diferentes presentaciones en función del diseño requerido.

Clases de transformación de texto

• text-lowercase: Convierte todo el texto a minúsculas.

<p class="text-lowercase">ESTE TEXTO SE MOSTRARÁ EN MINÚSCULAS.</p>

• text-uppercase: Convierte todo el texto a mayúsculas.

<p class="text-uppercase">este texto se mostrará en mayúsculas.</p>

• text-capitalize: Capitaliza la primera letra de cada palabra del texto.

<p class="text-capitalize">este texto estará capitalizado.</p>

Clases de espaciado y altura de línea

• line-height-1, line-height-sm, line-height-base, line-height-lg: Ajustan la altura de línea.

<p class="line-height-1">Texto con altura de línea 1.</p>

Clases de color de texto

• text-primary, text-secondary, text-success, text-danger, text-warning, text-info, text-light, text-dark, text-body, text-muted, text-white, text-black-50, text-white-50: Aplica diferentes colores de texto según el contexto.

<p class="text-success">Texto en color de éxito.</p>

Clases de decoración de texto

• text-decoration-none: Quita cualquier decoración del texto.

<p class="text-decoration-none">Texto sin decoración.</p>

• text-decoration-underline: Añade subrayado al texto.

<p class="text-decoration-underline">Texto subrayado.</p>

• text-decoration-line-through: Añade una línea a través del texto.

<p class="text-decoration-line-through">Texto con línea a través.</p>

Ejemplos de uso

<div>
  <p class="text-start text-uppercase">Texto alineado a la izquierda y en mayúsculas.</p>
  <p class="text-end text-lowercase">Texto alineado a la derecha y en minúsculas.</p>
  <p class="text-center text-capitalize">Texto centrado y capitalizado.</p>
  <p class="text-muted line-height-1">Texto en gris claro con altura de línea 1.</p>
  <p class="text-success text-decoration-underline">Texto verde con subrayado.</p>
</div>

Integración de Google Fonts con Bootstrap y fuentes personalizadas

Para integrar Google Fonts y fuentes personalizadas con Bootstrap, es fundamental seguir ciertos pasos que aseguran la correcta aplicación y consistencia del diseño a través de la aplicación web.

Inclusión de Google Fonts

• Selección e importación de la fuente: Accede a Google Fonts, selecciona las fuentes que deseas utilizar y copia el enlace de importación provisto. Este enlace se debe incluir en la sección <head> de tu documento HTML.

<head>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>

• Aplicación de la fuente: Después de incluir el enlace, ajusta las variables Sass en Bootstrap para utilizar la nueva fuente. Esto se puede realizar en el archivo de configuración de Bootstrap (_variables.scss) antes de compilarlo.

$font-family-base: 'Roboto', sans-serif;

Al ajustar $font-family-base, toda la tipografía de la aplicación utilizará la fuente Roboto por defecto.

Uso de fuentes personalizadas

• Incorporación de la fuente: Si estás trabajando con fuentes personalizadas, asegúrate de alojarlas en tu servidor o en un CDN. Usa @font-face en tu archivo CSS para incluirlas.

@font-face {
   font-family: 'MiFuentePersonalizada';
   src: url('fonts/MiFuentePersonalizada.woff2') format('woff2'),
         url('fonts/MiFuentePersonalizada.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

• Aplicación de la fuente personalizada: Luego, al igual que con Google Fonts, ajusta las variables Sass en Bootstrap para utilizar la fuente personalizada.

$font-family-base: 'MiFuentePersonalizada', sans-serif;

Ejemplo de configuración con múltiples fuentes

En proyectos donde se utilizan múltiples tipos de fuentes, puedes definir variables adicionales para administrar la tipografía de manera efectiva.

$font-family-base: 'Roboto', sans-serif;
$font-family-heading: 'Montserrat', sans-serif;
$font-family-monospace: 'Courier New', monospace;

body {
  font-family: $font-family-base;
}

h1, h2, h3, h4, h5, h6 {
  font-family: $font-family-heading;
}

code, pre {
  font-family: $font-family-monospace;
}

De esta manera, puedes diferenciar claramente entre tipos de contenido y aplicar las fuentes de manera coherente en tu diseño.

Optimización y buenas prácticas

• Preconectar y pre-cargar: Para mejorar los tiempos de carga, considera preconectar y pre-cargar las fuentes.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">

• Gestión de pesos y estilos: Al importar fuentes de Google Fonts, selecciona solamente los pesos y estilos necesarios para reducir el tamaño de descarga y mejorar la carga de la página.
• Fallback de fuentes: Siempre proporciona una lista de fuentes de respaldo en la pila de fuentes para asegurar que el contenido sea legible en caso de que las fuentes personalizadas no se carguen.

$font-family-base: 'Roboto', Arial, sans-serif;

Siguiendo estos pasos, puedes integrar Google Fonts y fuentes personalizadas con Bootstrap de manera efectiva, asegurando que tu aplicación web mantenga una tipografía coherente y visualmente atractiva.