Si no especificas ningún estilo para tu texto, los navegadores aplicarán sus propios estilos predeterminados. Estas hojas de estilo se denominan hojas de estilo de usuario-agente 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 líneas de texto en el borde de la pantalla. De este modo, el texto de la web será adaptable de forma predeterminada: se ajustará al viewport del usuario.
Pero el hecho de que el texto quepa en una pantalla no significa que sea cómodo leer. Una buena tipografía consiste en presentar el texto de una manera adecuada. La tipografía no es solo elegir 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 está usando una pantalla pequeña, lo más seguro es que la pantalla esté bastante cerca de los ojos, a una mano a la distancia de la otra.
Sin embargo, a medida que las pantallas se hacen más grandes, es más difícil hacer esa conexión. Una pantalla del tamaño de una laptop probablemente estará bastante cerca del espectador, pero un monitor de pantalla ancha de escritorio 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 un televisor.
No obstante, si bien no puedes saber con certeza a qué distancia se encuentra una persona de una pantalla, puedes intentar utilizar 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 se ensancha 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%;
}
}
Ajuste del texto
Cambiar entre tamaños de texto fijos en puntos de interrupción específicos es bastante irregular. Un enfoque más responsivo consiste en permitir que el ancho del dispositivo del usuario influya en el tamaño del texto.
La unidad vw en CSS significa "ancho de la vista del puerto". Si conectas los tamaños de la fuente con el ancho del viewport, el texto aumentará y se reducirá en proporción al ancho del navegador. Esto dificulta la predicción del tamaño del texto en un 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 dificulta la predicción exacta del 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 calcular 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 angostas y demasiado grande en pantallas anchas.
Sujeción de texto
Probablemente no quieras que tu texto se reduzca y llegue a extremos. Puedes controlar dónde comienza y termina el escalamiento con la función clamp() de CSS. Esto “restringe” 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 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 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 de la publicidad impresa y aplicarlas allí.
En su libro clásico Los elementos del estilo tipográfico, Robert Bringhurst dijo lo siguiente sobre la longitud (o medida) de la línea:
Se considera ampliamente que cualquier longitud de entre 45 y 75 caracteres es una longitud de línea satisfactoria para una página de una sola columna establecida 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 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 propiedad line-length. Sin embargo, para evitar que el texto sea demasiado ancho, debes limitar el ancho del contenedor. La propiedad max-inline-size es perfecta para este caso.
No establezcas las longitudes de línea con una unidad fija como px. Los usuarios pueden aumentar y reducir la escala del tamaño de la fuente, y las longitudes de las líneas se deben ajustar 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 número 66 en ese tamaño de fuente.
Altura de línea
Aunque no hay una propiedad line-length en CSS, sí existe 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 largas de texto, es difícil para el ojo del lector moverse del final de una línea al inicio 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 las declaraciones line-height. De esta manera, se 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 cuando compiles tus interfaces de usuario para mejorar la claridad y el flujo de la 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 mucho tiempo en la Web, hubo muy pocas opciones de fuentes. Las fuentes del sistema eran las únicas opciones. Pero ahora puedes elegir una fuente web que se adapte a la apariencia de tu contenido.
Usa @font-face para indicar a los navegadores dónde encontrar tus archivos de fuentes web. Usa woff2 como el formato de fuente web. Tiene una buena asistencia y ofrece 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 fuentes web que agregues podría degradar potencialmente la experiencia del usuario a medida 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 se siente rápida es una buena experiencia del usuario.
Cargando 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 a tu archivo de fuentes 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 este. El atributo type permite ser incluso 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 tú alojas los archivos de fuentes.
Usa la propiedad font-display de CSS para indicar al navegador cómo administrar el cambio de una fuente del sistema a una fuente web. Puedes optar por no mostrar texto hasta que se cargue la fuente web. Puedes optar por 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 la fuente web se descargue antes de mostrar cualquier texto, es posible que los usuarios 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 web, los usuarios podrían experimentar cambios disconformes del contenido en la página.
Una buena opción es esperar un rato 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 en el contenido. Si la fuente web sigue sin cargarse después de que se acabe el tiempo, el texto se muestra con la fuente del sistema para 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 la fuente del sistema cada vez que se cargue por fin.
body {
font-family: Roboto, sans-serif;
font-display: swap;
}
Usa un valor font-display de fallback si quieres 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 grosores o estilos diferentes del mismo tipo de letra, es posible que termines usando muchos archivos de fuentes independientes, un archivo de fuente independiente para cada grosor o estilo.
Las fuentes variables resuelven este problema usando un archivo. En lugar de tener archivos separados para normal, negrita, extra negrita, etc., 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 archivo de fuentes de una sola variable es más grande que un archivo de fuente normal, pero un archivo de fuentes de una sola variable probablemente será más pequeño que varios archivos de fuentes normales. Si usas muchos pesos diferentes, una fuente variable podría mejorar considerablemente el rendimiento.
Una buena tipografía en la web no se trata solo de las elecciones de tipo que tomas como diseñador. La tipografía responsiva también tiene que ver con 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 dominaste el texto responsivo, es hora de explorar las imágenes responsivas.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre tipografía
Se deben 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?
24pxline-height.2rem1.52vwline-height generarían problemas.¿Qué hace font-display?
block o inline-block.