Tipografía

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

Si no especificas una longitud de línea, los navegadores unirán líneas de texto en el borde de la pantalla. Para que el texto de la Web sea responsivo de forma predeterminada, se ajuste al viewport del usuario.

Pero que el texto quepa en una pantalla no significa que sea cómodo para leer. Una buena tipografía consiste en presentar el texto de una manera adecuada. La tipografía es más que elegir las fuentes adecuadas. 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 de qué tamaño debería ser el texto en la Web.

Si alguien está usando una pantalla pequeña, la pantalla debe estar bastante cerca de los ojos, a la distancia de una mano.

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

Aun así, si bien no puedes saber con certeza a qué distancia se encuentra una persona de una pantalla, puedes intentar usar tamaños de texto que probablemente resulten adecuados. Utiliza tamaños de texto reducidos en el caso de las pantallas más pequeñas y tamaños de texto más grandes en el caso de las pantallas más grandes.

Puedes usar consultas de medios para cambiar la propiedad font-size a medida que se amplía el tamaño de la pantalla.

@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 del texto

Cambiar entre tamaños de texto fijos en puntos de interrupción específicos es bastante complicado. 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 de viewport". Conectar los tamaños de fuente al ancho de la vista del puerto significa que el texto se ampliará y se reducirá en proporción al ancho del navegador. Esto hace que sea difícil predecir el tamaño del texto en cualquier ancho específico, pero sabes que el tamaño del texto será apropiado 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.

Qué no debes hacer
html {
  font-size: 2.5vw;
}

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

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

Deja que el navegador haga los cálculos. Esto hace que sea difícil predecir con exactitud cuál será el tamaño del texto en cualquier ancho específico, pero sabes que el tamaño del texto estará en el rango correcto. El navegador del usuario se encarga de calcular los cálculos exactos del tamaño del texto.

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

Sujeta el texto

Probablemente no quieras que tu texto se reduzca y se reduzca a extremos. Puedes controlar dónde comienza y termina el escalamiento con la función clamp() de CSS. Esto “anclaje” 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 pasas a calc(). El valor de apertura especifica el tamaño mínimo; en este caso, 1rem para no ser inferior al tamaño de fuente que prefiere el 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 el tamaño del texto nunca será inferior a 1rem ni superior a 2rem.

Longitudes de línea

La Web no es impresa, pero podemos aprender lecciones del mundo impreso y aplicarlas en la Web.

En su libro clásico Los elementos del estilo tipográfico, Robert Bringhurst dijo lo siguiente sobre la longitud de la línea (o medida):

Cualquier texto de 45 a 75 caracteres se considera ampliamente una longitud de línea satisfactoria para una página de una sola columna configurada en una cara de texto con serif en un tamaño de texto. La línea de 66 caracteres (que cuenta tanto letras como espacios) se considera generalmente como ideal. Para un trabajo de varias columnas, un mejor promedio 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 vea demasiado ancho limitando el ancho del contenedor. La propiedad max-inline-size es perfecta para esto.

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

Qué no debes hacer
article {
  max-inline-size: 700px;
}
Qué debes hacer
article {
  max-inline-size: 66ch;
}

El uso de unidades ch para el ancho hará que las nuevas líneas se ajusten al carácter número 66 en ese tamaño de fuente.

Altura de línea

Aunque no hay una propiedad line-length en CSS, hay una propiedad line-height.

Las líneas de texto más cortas pueden tener valores de line-height más grandes. Sin embargo, si usas valores line-height grandes para líneas largas de texto, es difícil para el ojo del lector moverse del final de una línea al 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 en las declaraciones de line-height. Esto garantiza que la altura de la línea sea relativa al font-size.

Qué no debes hacer
line-height: 24px;
Qué debes hacer
line-height: 1.5;

Combinaciones y escala

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

Fuentes web

Un tipo de letra es como una voz para tus palabras. Durante más tiempo en la Web, hubo muy pocas opciones de fuentes. Las fuentes del sistema eran las únicas opciones. Sin embargo, ahora puedes elegir una fuente web que coincida con la apariencia de tu contenido.

Usa @font-face para indicar a los navegadores dónde encontrar tus archivos de fuentes web. Usa woff2 como formato de fuente web. Tiene un buen respaldo y las mejores mejoras 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 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 rapidez con la que se pintan esos píxeles es una parte fundamental de la experiencia del usuario. Una experiencia que parece rápida es una buena experiencia del usuario.

Carga de la fuente

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 al archivo de fuentes web. Un atributo rel con un valor de preload le indica al navegador que debe priorizar 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 de sistema a una fuente web. Puedes elegir no mostrar ningún texto hasta que se cargue la fuente web. Puedes elegir mostrar la fuente del sistema de inmediato y, luego, cambiar a la fuente web una vez que se cargue. Ambas estrategias tienen sus desventajas. Si esperas hasta que se descargue la fuente web antes de mostrar texto, es posible que los usuarios se queden mirando una página en blanco durante un período muy prolongado. Si muestras el texto primero en una fuente de sistema y luego cambias a la fuente web, es posible que los usuarios experimenten un cambio distorsionado en el contenido de la página.

Una buena opción es esperar un poco antes de mostrar texto. Si la fuente web se carga antes de que se acabe el tiempo, el texto se mostrará usando la fuente web sin cambios de contenido. Si la fuente web aún no se carga luego de que se acabe el tiempo, el texto se mostrará 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 deseas que la fuente web reemplace a la fuente del sistema cada vez que se cargue la fuente web.

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

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

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

Fuentes variables

Si usas muchos grosores o estilos diferentes del mismo tipo de letra, es posible que termines usando muchos archivos de fuentes separados, un archivo de fuentes diferente para cada grosor o estilo.

Las fuentes variables resuelven este problema usando un solo archivo. En lugar de tener archivos separados para normal, negrita, extranegrita, etc., un archivo de fuente variable es adaptable. Contiene toda la información que necesita para mostrarse en un espectro de pesos o estilos.

La letra “A” se muestran con diferentes pesos.

Esto significa que un único archivo de fuente variable es más grande que un único archivo de fuente normal, pero un único archivo de fuente variable probablemente sea más pequeño que varios archivos de fuentes normales. Si usas muchos grosores diferentes, una fuente variable podría aumentar mucho el rendimiento.

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

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

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre tipografía

Debes agregar estilos para que el texto se ajuste al viewport.

Verdadero
No es necesario agregar estilos.
Falso
El texto se ajustará de forma predeterminada sin ningún estilo adicional.

clamp() es útil para la tipografía fluida porque

Permite la incorporación fácil de funciones calc()
Si bien esto es cierto, no es una buena razón para usar clamp() para la tipografía.
La compatibilidad del navegador es excelente.
Si bien esto es cierto, no es una buena razón para usar clamp() para la tipografía.
Permite bloquear el tamaño de la fuente entre valores mínimos y máximos razonables, a la vez que proporciona un valor intermedio escalable.
Exactamente, evita que el texto sea demasiado pequeño o demasiado grande y, al mismo tiempo, proporciona un tamaño de fuente de escalamiento suave.
Facilita los cálculos.
Vuelve a intentarlo.

¿Qué tipo de valores de line-height se recomendaron en esta guía?

24px
En la publicación, se indica explícitamente que no uses valores de píxeles para line-height.
2rem
Si bien las rems son valores relativos, aún pueden crear alturas de línea demasiado pequeñas o demasiado grandes.
1.5
Se recomiendan valores relativos sin unidades.
2vw
Las unidades de viewport, como line-height, serían problemáticas.

¿Qué hace font-display?

Indica al navegador cómo administrar el cambio de una fuente de sistema a una fuente web.
Ayuda con la transición a una fuente personalizada.
Permite establecer la fuente en block o inline-block.
Las fuentes no tienen tipos de visualización.
Cambia si la fuente está oculta o no.
No se pueden ocultar las fuentes.
Proporciona control para sincronizar la experiencia del usuario cuando se cargan fuentes remotas.
Ayuda a los autores a personalizar la experiencia de carga de las fuentes personalizadas.