35 - Tipografía

Bootstrap 4 usa por defecto un font-size de 16px para el elemento "html".

Muchas etiquetas utilizan como medida relativa el rem que es proporcional al font-size definido en la etiqueta "html".

La fuente por defecto que define Bootstrap 4 para la propiedad "font-family" de la marca "body" es:

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Bootstrap 4 usa una "lista de fuentes nativas" (fuentes del sistema operativo del usuario), con una reserva para Helvetica Neue, Arial y sans-serif.

Los tamaños de las etiquetas h1, h2, h3 etc. se dimensionan de acuerdo a medidas relativos (rem), si abrimos el código fuente del archivo bootstrap.css tenemos las siguientes reglas:

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

h1, .h1 {
  font-size: 2.5rem;
}

h2, .h2 {
  font-size: 2rem;
}

h3, .h3 {
  font-size: 1.75rem;
}

h4, .h4 {
  font-size: 1.5rem;
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

Como vemos los tamaños para las etiquetas son proporcionales al font-size de la etiqueta "html" al utilizar rem como medida.

Es decir que la etiqueta h6 tiene tamaño de fuente de 1rem que es igual a 16px. Luego h5 tiene un tamaño de 20px que resulta de multiplicar 1.25 * 16px etc.

Problema

Mostrar una serie de títulos empleando primero las etiquetas h1 al h6, luego hacer lo mismo con las clases "h1" a "h6".

<!doctype html>
<html>
<head>
  <title>Prueba de Bootstrap 4</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <h1>Titulo de nivel 1</h1> 
    <h2>Titulo de nivel 2</h2>
    <h3>Titulo de nivel 3</h3>
    <h4>Titulo de nivel 4</h4>
    <h5>Titulo de nivel 5</h5>
    <h6>Titulo de nivel 6</h6>
    <hr>
    <p class="h1">Texto con la clase h1</p> 
    <p class="h2">Texto con la clase h2</p> 
    <p class="h3">Texto con la clase h3</p> 
    <p class="h4">Texto con la clase h4</p> 
    <p class="h5">Texto con la clase h5</p> 
    <p class="h6">Texto con la clase h6</p>                 
  </div>
</body>
</html>

En pantalla tenemos como resultado:

bootstrap 4 h1 h2 h3 h4 h5 h6 .h1 .h2 .h3 .h4 .h5 .h6

Si tenemos que mostrar títulos debemos utilizar las etiquetas h1, h2, h3 etc., en el caso que necesitemos mostrar texto dentro del navegador que coincida en tamaño y fuente con respecto a los títulos pero que no sean títulos utilizaremos las clases "h1", "h2" etc.

Clases display-1, display-2, display-3 y display-4

Si necesitamos destacar alguna etiqueta h1, h2, h3 etc. podemos agregarle alguna de estas cuatro clases definidas en Bootstrap 4:

.display-1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-2 {
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-3 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

Una página que los emplea es:

<!doctype html>
<html>
<head>
  <title>Prueba de Bootstrap 4</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <h1 class="display-1">Titulo 1 con display-1</h1> 
    <h1 class="display-2">Titulo 1 con display-2</h1> 
    <h1 class="display-3">Titulo 1 con display-3</h1> 
    <h1 class="display-4">Titulo 1 con display-4</h1>             
  </div>
</body>
</html>

En el navegador tenemos como resultado:

bootstrap 4 h1 h2 h3 h4 h5 h6 .display-1 .display-2 .display-3 .display-4

Etiqueta o clase small dentro de los títulos

Si dentro de un título utilizamos la etiqueta small luego dicho contenido aparece con un tamaño de 80% del título que lo contiene, si vemos el código fuente de "bootstrap.css" podemos encontrar la siguiente definición:

small,
.small {
  font-size: 80%;
  font-weight: 400;
}

Aplicando a una página:

<!doctype html>
<html>
<head>
  <title>Prueba de Bootstrap 4</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <h1>Titulo de nivel 1<small>(acotación)</small></h1> 
    <h2>Titulo de nivel 2<small>(acotación)</small></h2>
    <h3>Titulo de nivel 3<small>(acotación)</small></h3>
    <h4>Titulo de nivel 4<small>(acotación)</small></h4>
    <h5>Titulo de nivel 5<small>(acotación)</small></h5>
    <h6>Titulo de nivel 6<small>(acotación)</small></h6>
  </div>
</body>
</html>

Y tenemos como resultado en el navegador:

bootstrap 4 h1 h2 h3 h4 h5 h6 small

Ejecutar Ejemplo

Retornar