Tipografía

Si no especificas ningún estilo para el texto, los navegadores aplicarán sus propios estilos predeterminados. Estos se denominan hojas de estilo del agente de usuario y pueden variar de un navegador a otro. Los usuarios también pueden establecer sus propias preferencias para mostrar texto.

Si no especificas una longitud de línea, los navegadores ajustarán las líneas de texto en el borde de la pantalla. Por lo tanto, el texto en la Web es responsivo de forma predeterminada: fluye para adaptarse al viewport del usuario.

Sin embargo, el hecho de que el texto quepa en una pantalla no significa que sea cómodo de leer. La buena tipografía consiste en presentar el texto de una manera adecuada. La tipografía es mucho más que elegir las fuentes adecuadas para usar. Debes tener en cuenta las preferencias del usuario, el tamaño del texto, la longitud de la línea y la distancia entre las líneas de texto.

Tamaño del texto

Es difícil saber qué tamaño debe tener el texto en la Web.

Si alguien usa una pantalla pequeña, es posible que esté bastante cerca de sus ojos, a la distancia de una mano.

Sin embargo, a medida que las pantallas se hacen más grandes, es más difícil establecer esa conexión. Es probable que una pantalla del tamaño de una laptop esté bastante cerca del usuario, pero un monitor de escritorio de pantalla ancha tiene aproximadamente el mismo tamaño que una pantalla de televisión. Las personas se sientan a la distancia de un brazo de una pantalla de escritorio, pero se sientan mucho más lejos de una televisión.

Aun así, si bien no puedes saber con certeza a qué distancia está alguien de una pantalla, puedes intentar usar tamaños de texto que, con suerte, resulten adecuados. Usa tamaños de texto más pequeños para pantallas más pequeñas y tamaños de texto más grandes para pantallas más grandes.

Puedes usar consultas de medios para cambiar la propiedad font-size a medida que el tamaño de la pantalla se hace más ancho.

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

Escalamiento de texto

Cambiar entre tamaños de texto fijos en puntos de interrupción específicos es bastante brusco. Un enfoque más responsivo es permitir que el ancho del dispositivo del usuario influya en el tamaño del texto.

La unidad vw en CSS significa "ancho del viewport". Conectar los tamaños de fuente con el ancho del viewport significa que el texto aumentará y disminuirá en proporción al ancho del navegador. Esto dificulta predecir cuál será el tamaño del texto en un ancho específico, pero sabes que el tamaño del texto será adecuado para el ancho del navegador del usuario.

Es importante que no uses vw por sí solo en una declaración de tamaño de fuente.

html {
  font-size: 2.5vw;
}

Si lo haces, el usuario no podrá cambiar el tamaño del texto. El texto se podrá cambiar de tamaño si incluyes una unidad relativa, como em, rem o ch. La función calc() de CSS es perfecta para esto.

html {
  font-size: calc(0.75rem + 1.5vw);
}

Deja que el navegador haga los cálculos. Esto dificulta predecir exactamente cuál será el tamaño del texto en un ancho específico, pero sabes que el tamaño del texto estará en el rango correcto. El navegador del usuario se encarga de determinar los cálculos exactos del tamaño del texto.

Sin embargo, ahora existe la posibilidad de que el texto se vuelva demasiado pequeño en pantallas estrechas y demasiado grande en pantallas anchas.

Ajuste de texto

Es probable que no quieras que el texto se reduzca y aumente hasta extremos. Puedes controlar dónde comienza y termina el escalamiento con la función clamp() de CSS. Esto "ajusta" el escalamiento a un rango específico.

La función clamp() es como la función calc(), pero toma tres valores. El valor medio es el mismo que el que pasas a calc(). El valor de apertura especifica el tamaño mínimo, en este caso 1 rem para no bajar del tamaño de fuente preferido del usuario. El valor de cierre especifica el tamaño máximo.

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

Ahora, el tamaño del texto se reduce y aumenta en proporción a la pantalla del usuario, pero nunca será inferior a 1rem ni superior a 2rem.

Longitud de la línea

La Web no es impresa, pero podemos aprender lecciones del mundo de la impresión y aplicarlas en la Web.

En su libro clásico The Elements of Typographic Style, Robert Bringhurst dijo lo siguiente sobre la longitud de la línea (o medida):

Cualquier valor entre 45 y 75 caracteres se considera una longitud de línea satisfactoria para una página de una sola columna establecida en una fuente con serifas en un tamaño de texto. La línea de 66 caracteres (que cuenta tanto letras como espacios) se considera ideal. Para el trabajo de varias columnas, un promedio mejor es de 40 a 50 caracteres.

No puedes establecer una longitud de línea directamente en CSS. No hay ninguna propiedad line-length. Sin embargo, puedes evitar que el texto se vuelva demasiado ancho limitando el ancho del contenedor. La max-inline-size propiedad es perfecta para esto.

No establezcas las longitudes de línea con una unidad fija como px. Los usuarios pueden aumentar y disminuir el tamaño de la fuente, y las longitudes de línea deben ajustarse en consecuencia. Usa una unidad relativa como rem o ch.

article {
  max-inline-size: 700px;
}

article {
  max-inline-size: 66ch;
}

Si usas unidades ch para el ancho, las líneas nuevas se ajustarán en el carácter 66 con ese tamaño de fuente.

Altura de línea

Si bien no hay ninguna propiedad line-length en CSS, sí hay una propiedad line-height.

Las líneas de texto más cortas pueden tener valores line-height más grandes. Sin embargo, si usas valores line-height grandes para líneas de texto largas, es difícil que el ojo del lector se mueva desde el final de una línea hasta el comienzo de la siguiente.

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

Usa valores sin unidades para tus declaraciones line-height. Esto garantiza que la altura de la línea sea relativa a font-size.

line-height: 24px;

line-height: 1.5;

Combinaciones y escala

Recuerda priorizar la jerarquía a medida que compilas tus interfaces de usuario para mejorar la claridad y el flujo de la página. Una excelente manera de hacerlo es con una escala tipográfica integrada en tu sistema de diseño.

Fuentes para sitios web

Un tipo de letra es como una voz para tus palabras. Durante mucho tiempo en la Web, había muy pocas opciones de fuentes. Las fuentes del sistema eran las únicas opciones. Sin embargo, ahora puedes elegir una fuente para sitios web que coincida con el estilo de tu contenido.

Usa @font-face para indicarle a los navegadores dónde encontrar tus archivos de fuentes para sitios web. Usa woff2 como formato de fuente para sitios web. Es compatible y tiene las mejores ganancias de rendimiento.

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

Sin embargo, cada archivo de fuente para sitios web que agregues podría degradar la experiencia del usuario, ya que aumenta el tiempo de carga de la página. Recuerda que el diseño no se trata solo de cómo se ven los píxeles finales. La velocidad con la que se pintan esos píxeles es una parte fundamental de la experiencia del usuario. Una experiencia que se siente rápida es una buena experiencia del usuario.

Carga de fuentes

Puedes solicitar que los navegadores comiencen a descargar un archivo de fuente lo antes posible. Agrega un elemento link al head de tu documento que haga referencia a tu archivo de fuente para sitios web. Un atributo rel con un valor de preload le indica al navegador que priorice ese archivo. Un atributo as con un valor de font le indica al navegador qué tipo de archivo es. El atributo type te permite ser aún más específico.

<link href="/fonts/roboto-regular.woff2" type="font/woff2"
  rel="preload" as="font" crossorigin>

Debes incluir el atributo crossorigin incluso si alojas los archivos de fuentes por tu cuenta.

Usa la propiedad font-display de CSS para indicarle al navegador cómo administrar el cambio de una fuente del sistema a una fuente para sitios web. Puedes elegir no mostrar ningún texto hasta que se cargue la fuente para sitios web. Puedes elegir mostrar la fuente del sistema de inmediato y, luego, cambiar a la fuente para sitios web una vez que se cargue. Ambas estrategias tienen sus desventajas. Si esperas hasta que se descargue la fuente para sitios web antes de mostrar cualquier texto, es posible que los usuarios se queden mirando una página en blanco durante un tiempo frustrantemente largo. Si primero muestras el texto en una fuente del sistema y, luego, cambias a la fuente para sitios web, es posible que los usuarios experimenten un cambio brusco de contenido en la página.

Una buena solución es esperar un poco antes de mostrar cualquier texto. Si la fuente para sitios web se carga antes de que termine ese tiempo, el texto se muestra con la fuente para sitios web sin cambios de contenido. Si la fuente para sitios web aún no se cargó después de que finalizó el tiempo, el texto se muestra con la fuente del sistema, de modo que, al menos, el usuario pueda leer el contenido.

Usa un valor font-display de swap si aún quieres que la fuente para sitios web reemplace la fuente del sistema cuando finalmente se cargue.

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

Usa un valor font-display de fallback si deseas mantener la fuente del sistema una vez que se renderice el texto.

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

Fuentes variables

Si usas muchos pesos o estilos diferentes del mismo tipo de letra, es posible que termines usando muchos archivos de fuentes separados, un archivo de fuente separado para cada peso o estilo.

Las fuentes variables resuelven este problema con un solo archivo. En lugar de tener archivos separados para regular, negrita, negrita extra y otras variantes, un archivo de fuente variable es responsivo. Contiene toda la información que necesita para mostrarse en un espectro de pesos o estilos.

Esto significa que un solo archivo de fuente variable es más grande que un solo archivo de fuente normal, pero es probable que un solo archivo de fuente variable sea más pequeño que varios archivos de fuente normales. Si usas muchos pesos diferentes, una fuente variable podría brindarte una gran mejora en el rendimiento.

Una buena tipografía en la Web no se trata solo de las opciones de tipo que eliges como diseñador. La tipografía responsiva también se trata de respetar el dispositivo del usuario y la conexión de red. El resultado final es un diseño que se siente bien sin importar cómo se vea.

Ahora que dominas el texto responsivo, es hora de profundizar en las imágenes responsivas.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre tipografía