Dedico una cantidad poco saludable de tiempo a la tipografía en mis diseños, y si has leído algún libro de tipografía tradicional, quizás recuerdes “esa medida”. Si no, es sólo la longitud de una línea de texto. pero medida Hay más que eso, y una vez que comprendas lo que representa, puede cambiar completamente tu forma de pensar sobre tu diseño.
pero ¿por qué llamarlo? medida?
Antes de la autoedición, los tipógrafos utilizaban tipos de letra metálicos físicos. Colocan líneas de texto en un palo de escribir, y el ancho del palo se llama medida. Es esencialmente el espacio donde ingresas tu texto, y todo lo demás en la página, desde el ancho de las columnas hasta los márgenes y el margen interior, está diseñado alrededor de él.
Las buenas medidas hacen que la lectura del texto sea cómoda, mientras que las malas medidas hacen que la lectura sea más difícil.
Cuando las dimensiones sean correctas, el resto del diseño encajará en su lugar. Entonces, en lugar de dejar que el diseño determine las métricas, ¿no tendría más sentido dejar que las métricas informen las decisiones de diseño?
Convertir medidas en propiedades personalizadas
En mi CSS, primero defino una propiedad personalizada:
:root {
--measure: 60ch;
}ch unidad son ideales porque están asociados con un ancho de cero (0) caracteres en la fuente seleccionada. Entre 60 y 70 caracteres por línea es una longitud de lectura cómoda, por lo que 65 caracteres resultan naturales.
60ch Es un punto de partida sólido, pero no es universal. Incluso si el número de caracteres sigue siendo el mismo, diferentes fuentes producirán diferentes longitudes de línea reales. Las fuentes con una altura x mayor aparecen visualmente más grandes, por lo que 60ch Parece más largo de lo que realmente es. cara condensada hace 60ch Parece demasiado corto. Una cara más ancha parecerá demasiado larga. Incluso pequeños cambios en el seguimiento pueden estirar o comprimir las mediciones perceptuales.
La esencia es simple: tratar 60ch Úselo como base y luego haga ajustes a simple vista. Una vez que la medida se convierte en una variable, puede usarla en todo el diseño para mantener todo conectado.
Mantenga el texto legible
Sospecho que la mayoría de los desarrolladores han utilizado max-width propiedad. Aunque me tomó tiempo volver a entrenar mi memoria muscular, ahora uso Propiedades lógicas CSSreemplazar max-width y max-inline-size:
article {
max-inline-size: var(--measure);
margin-inline: auto;
}
Esto previene el síndrome de larga duración, que afecta a demasiados sitios web cuando se ven en una pantalla grande.
Diseñar múltiples columnas de texto.
El diseño de varias columnas es uno de ellos. La herramienta de diseño CSS más subestimada. Definir el ancho de las columnas permite al navegador decidir cuántas columnas colocar a lo largo del eje en línea, en lugar de especificar el número de columnas. Esta medida también define el ancho de estas columnas:
article {
column-width: var(--measure);
}
Cuando el contenedor principal de una columna se vuelve lo suficientemente ancho, el navegador hará fluir el texto a tantas columnas legibles como sea posible. Cuando no hay suficiente espacio para varias columnas, el diseño vuelve a una sola columna, todo sin puntos de interrupción ni consultas de medios.
Deje que las mediciones afecten a la red
Esta medida también me ayuda a diseñar la grilla en relación a mi contenido. Por ejemplo, cuando implemento un diseño con una columna que contiene contenido de formato largo y otra columna flexible, puedo bloquear el contenido del texto en una medida:
.layout {
display: grid;
grid-template-columns: minmax(0, var(--measure)) 1fr;
}
La primera columna garantiza que la lectura del texto sea cómoda, mientras que la segunda columna se ajusta al espacio horizontal restante.
Consultas de contenedores basadas en mediciones
A lo largo de los años, los desarrolladores han aprendido a pensar en el tamaño de la pantalla en términos de puntos de interrupción específicos (320px, 48em, 64emetc.) y consultas de los medios. Este es un hábito difícil de romper y, para ser honesto, nunca he podido hacerlo yo mismo.
Estos números no provienen del contenido; los dispositivos los definen. Realmente deberían llamarse “puntos de adivinanza” porque casi nunca sabemos qué números funcionarán para la mayoría de las personas. No se especifica que el diseño cambie a, por ejemplo, 48em y 64emPuedo dejar que mi contenido decida cuándo debe cambiar el diseño mediante métricas.
Las mediciones pueden establecer mejores puntos de interrupción. Puntos de interrupción basados en mediciones, combinados con Consulta de contenedorresponder al contenido del texto. Por lo tanto, el diseño puede romperse cuando las columnas se vuelven más estrechas que la longitud de fila legible. Pero cuando se vuelve lo suficientemente ancho como para soportar más estructuras, el diseño se puede ampliar.
Las consultas de contenedor CSS verifican el ancho del contenedor del componente, no el ancho de la pantalla o la ventana gráfica. Por ejemplo, puedo aplicar un estilo específico cuando el componente tiene menos de 65 caracteres:
/* When the container is no wider than the --measure */
@container (max-width: var(--measure)) {
/* Styles */
}Mi diseño podría incluir varias columnas, quizás una columna más ancha para el contenido principal y una columna más estrecha para la información de respaldo:
(data-layout="yogi") {
display: grid;
grid-template-columns: 3fr 1fr;
}Si el contenedor no admite columnas de texto iguales a la medida, esta consulta reemplaza las dos columnas con un diseño de una sola columna:
@container (max-width: var(--measure)) {
(data-layout="yogi") {
grid-template-columns: 1fr;
}
}Esto se siente más natural porque la composición está relacionada con el contenido más que con el ancho del dispositivo, creando un ambiente de lectura cómodo.
Desarrollar un sistema de medición.
Dependiendo de la variedad de contenidos que necesito presentar en determinados proyectos, he definido varias variaciones de esta medida:
:root {
--measure: 60ch;
--measure-s: 55ch;
--measure-l: 80ch;
}Esto me da varias longitudes de línea para usar en diferentes situaciones:
- Más pequeño, adecuado para títulos y otros bloques de texto más cortos.
- Convención de copia de texto
- Bueno para las secciones de introducción, título y héroe.
Cuando la tipografía, el espaciado y el diseño comparten el mismo ritmo básico, los resultados parecen más coherentes y útiles.
Considerar esta medida puede cambiar la forma de diseñar
Cuando diseñas teniendo en cuenta la medida, el diseño deja de ser una suposición y se convierte en un diálogo entre el contenido y la composición. La lectura se vuelve más cómoda y la página se siente más compuesta. Es un pequeño cambio, pero una vez que comienzas a anclar las decisiones de diseño a las métricas, cambia por completo la forma en que abordas el diseño.
