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.
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.
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
.
article { max-inline-size: 700px; }
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
.
line-height: 24px;
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.
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.
clamp()
es útil para la tipografía fluida porque
calc()
clamp()
para la tipografía.clamp()
para la tipografía.¿Qué tipo de valores de line-height
se recomendaron en esta guía?
24px
line-height
.2rem
1.5
2vw
line-height
, serían problemáticas.¿Qué hace font-display
?
block
o inline-block
.