Conceptos básicos de tipografía web

La tipografía es cómo se ve y se siente el texto en una página.

Una buena tipografía hace que el contenido sea más fácil de leer. También ayuda a que títulos, párrafos, botones y etiquetas se sientan organizados.

En CSS, la tipografía se controla con propiedades como font-family, font-size, line-height, text-align y reglas simples de formato.

Qué significa tipografía web

Tipografía web significa elegir y dar estilo al texto de un sitio web.

No se trata solo de hacer el texto más grande o más pequeño. También incluye:

• qué fuente se usa
• qué tamaño tiene el texto
• cuánto espacio hay entre líneas
• si el texto está alineado a la izquierda, al centro o a la derecha
• si el texto está en negrita, cursiva, mayúsculas o subrayado

El objetivo es simple: hacer que el texto sea claro y cómodo de leer.

Font family

La propiedad font-family le dice al navegador qué fuente usar.

Normalmente escribes más de un nombre de fuente. Esta lista se llama font stack. El navegador intenta usar la primera fuente. Si esa fuente no está disponible, intenta con la siguiente.

El último valor debería ser una familia genérica, como sans-serif, serif o monospace.

Si el nombre de una fuente tiene espacios, escríbelo entre comillas:

Usa una o dos familias de fuentes en una página. Demasiadas fuentes pueden hacer que el diseño se vea desordenado.

Font size

La propiedad font-size controla qué tan grande se ve el texto.

Dos unidades útiles para principiantes son px y rem.

• px da un tamaño fijo.
• rem escala desde el tamaño de fuente raíz de la página.

En muchos navegadores, 1rem suele ser 16px, así que 2rem suele ser 32px.

Prefiere rem para tamaños de texto. Si una persona aumenta el tamaño de fuente predeterminado del navegador para leer mejor, el texto con rem escala con ese ajuste, pero el texto con px queda fijo.

Usa tamaños de texto legibles. El texto muy pequeño es difícil de leer, especialmente en teléfonos.

Line height

La propiedad line-height controla el espacio vertical entre las líneas de texto.

Piensa en ella como aire dentro de un párrafo.

Un valor sin unidad como 1.6 es común. Significa que la altura de línea es 1.6 veces el tamaño actual de la fuente.

Un line-height bajo puede hacer que los párrafos se vean apretados. Un valor alrededor de 1.5 o 1.6 suele ser más fácil de leer para texto normal.

Text alignment

La propiedad text-align controla cómo se alinea el texto horizontalmente.

Valores comunes:

• left: alinea el texto a la izquierda
• center: centra el texto
• right: alinea el texto a la derecha
• justify: estira las líneas para que ambos bordes queden alineados

La alineación centrada funciona bien para títulos cortos.

Para párrafos largos, la alineación izquierda suele ser más fácil de leer. Los párrafos centrados hacen que sea más difícil encontrar el inicio de la siguiente línea.

Formato simple de texto

CSS también tiene propiedades para formato simple de texto.

Propiedades útiles de formato:

• font-weight: controla el grosor, como normal o bold
• font-style: controla la inclinación, como normal o italic
• text-transform: cambia las mayúsculas y minúsculas, como uppercase, lowercase o capitalize
• text-decoration: agrega o quita líneas, como underline o none

Ten cuidado con los subrayados. En la web, el texto subrayado normalmente significa que es un enlace.

Ejemplo ejecutable: tipografía en una tarjeta de artículo

Este ejemplo combina familia de fuente, tamaño de fuente, altura de línea, alineación y formato de texto.

Prueba cambiar los valores de CSS y ejecuta el ejemplo otra vez.

<article class="article-card">
  <p class="category">Conceptos de CSS</p>
  <h2>Aprender tipografía web</h2>
  <p class="summary">
    El texto claro ayuda a las personas a leer tu página sin esfuerzo. Un buen tamaño de fuente y
    line-height pueden hacer que un artículo simple se vea más pulido.
  </p>
  <a href="#">Leer más</a>
</article>

<style>
  .article-card {
    max-width: 420px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: Arial, Helvetica, sans-serif;
  }

  .category {
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #666;
  }

  .article-card h2 {
    font-size: 1.8rem;
    line-height: 1.2;
  }

  .summary {
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
  }
</style>

La tarjeta usa una sola lista de fuentes, un título más grande, espacio cómodo en el párrafo y texto de categoría en mayúsculas.

Errores comunes de principiantes

• Usar demasiadas fuentes: una o dos familias de fuentes suele ser suficiente.
• Olvidar fuentes de respaldo: termina una lista de fuentes con una familia genérica como sans-serif.
• Hacer el texto demasiado pequeño: el texto normal debe ser cómodo de leer.
• Usar poca altura de línea: los párrafos necesitan suficiente espacio vertical.
• Centrar párrafos largos: la alineación centrada es mejor para textos cortos.
• Subrayar texto normal: los subrayados pueden hacer que el texto parezca clicable.

Mini tarea

Mira este CSS:

¿Qué propiedad deberías agregar si quieres más espacio vertical entre las líneas de texto?

Revisa las respuestas del cuestionario cuando estés listo.

Cuestionario corto con respuestas

1. ¿Qué propiedad de CSS elige la fuente?
2. Si el tamaño de fuente raíz es 16px, ¿qué tamaño tiene 2rem?
3. ¿Por qué "Times New Roman" debería ir entre comillas?

Respuestas:

1. font-family.
2. 32px.
3. Porque el nombre de la fuente contiene espacios.

Respuesta de la mini tarea: agrega line-height.

Pequeño reto

Da estilo al texto de perfil de abajo.

Tus objetivos:

• Define una lista de fuentes sans-serif en .profile.
• Haz que el nombre esté en mayúsculas.
• Haz que el nombre tenga grosor normal.
• Dale al párrafo una altura de línea cómoda.

<div class="profile">
  <h3 class="name">Jane Doe</h3>
  <p class="bio">
    Estoy aprendiendo cómo la tipografía hace que el texto sea más fácil de leer en la web.
  </p>
</div>

<style>
  .profile {
  }

  .name {
  }

  .bio {
  }
</style>

Una posible solución:

Summary

• font-family elige la fuente y debería incluir fuentes de respaldo.
• font-size controla qué tan grande se ve el texto.
• line-height controla el espacio vertical entre líneas.
• text-align controla la alineación horizontal del texto.
• font-weight cambia el grosor.
• font-style puede poner texto en cursiva.
• text-transform cambia las mayúsculas y minúsculas del texto.
• text-decoration agrega o quita líneas, como subrayados.