Cómo hacer que el ritmo vertical responda con variables CSS y CSS Calc

Foto de Samuel Zeller en Unsplash

El ritmo vertical es un concepto importante en el diseño web. Tiene la capacidad de reunir un diseño y hacer que diferentes elementos se sientan consistentes en la misma página.

Solía ​​ser imposible cambiar el Ritmo vertical en diferentes ventanas gráficas, porque no teníamos las herramientas adecuadas. Pero ahora, con CSS Calc y CSS Custom Properties, podemos cambiar el ritmo vertical en diferentes ventanas gráficas. Este artículo explica cómo.

Calcular la unidad de ritmo

Una unidad de ritmo es la base múltiple que usarías para el ritmo vertical de tu sitio. El valor de una unidad de ritmo debe ser la altura de la línea del texto del cuerpo. Este es el por qué.

/ * Una unidad de ritmo sería 20px * 1.4 = 28px * /
html {
  tamaño de fuente: 20px;
  altura de línea: 1.4;
}
pags {
  margen: 28px;
}

Calcular la unidad de ritmo se vuelve más fácil si usa unidades relativas (y debería hacerlo). Una unidad de ritmo siempre será igual al tamaño de fuente raíz multiplicado por la altura de la línea del texto del cuerpo.

/ * 1 unidad de ritmo, calculada con rem * /
html {
  altura de línea: 1.4;
}
pags {
  margen: 1.4rem;
}

Cuando cree espacios en blanco, puede variar el número de unidades de ritmo. Incluso puede incluir valores no enteros.

/ * 2 unidades de ritmo * /
h2 {
  margen superior: 2.8rem;
}
/ * 0.75 unidades de ritmo * /
pags {
  margen superior: 1.05rem;
}

¿Por qué cambiar el ritmo vertical en diferentes ventanas gráficas?

Tendemos a colocar dispositivos más grandes (como computadoras de escritorio) más lejos que los dispositivos más pequeños (como teléfonos). Necesitamos aumentar el tamaño de fuente para compensar la pérdida de legibilidad debido al aumento de la distancia. Si su usuario no puede leer su sitio cómodamente, es probable que se vaya, entrecierre los ojos o aumente el tamaño frontal de su navegador (si es lo suficientemente inteligente).

Un poco más sobre legibilidad.

La legibilidad es uno de los elementos más importantes para la tipografía web. Se ve afectado por tres valores: el tamaño de fuente, el alto de línea (o el encabezado) y el largo de línea (o medida) de su texto. Cuando un elemento cambia, otros pueden necesitar cambiar para preservar la legibilidad.

Cuando cambie el tamaño de un navegador de una vista móvil a una vista de escritorio, notará que tanto la medida como el tamaño de fuente cambian. Como resultado, el liderazgo también debería cambiar. Este concepto es tan importante que a Tim Brown se le ocurrió el enfoque líder de Molten. Un ejemplo de liderazgo fundido en uso es donde escribe la altura de la línea de su cuerpo con unidades de ventana gráfica.

/* Este es un ejemplo simple. Vea el ejemplo completo en el enlace de arriba * /
cuerpo {
  tamaño de fuente: calc (1em + 1vw);
  altura de línea: calc (1.2em + 1vw);
}

Pero el problema es que, cuando cambias la altura de la línea del texto de tu cuerpo, la unidad de ritmo vertical cambia. No hay forma de incorporar fundición líder con ritmo vertical.

Ahora, incluso si descarta el plomo fundido y utiliza las alturas de línea sin unidades estándar, probablemente todavía se volverá loco por la cantidad de duplicación que necesita crear. No vale la pena el esfuerzo.

/ * Cambiar la altura de la línea en diferentes puntos de interrupción * /
html {
  altura de línea: 1.4;
}
@media (ancho mínimo: 600 px) {
  html {
    altura de línea: 1.5;
  }
}
/ * Calcular el ritmo nuevamente en cada punto de interrupción * /
pags {
  margen superior: 1.4rem;
}
@media (ancho mínimo: 600 px) {
  pags {
    altura de línea: 1.5rem;
  }
}

Cambiar la unidad de ritmo con propiedades personalizadas CSS

Las propiedades personalizadas de CSS (mejor conocidas como variables CSS) se pueden usar para crear una unidad de ritmo que cambia en diferentes ventanas gráficas.

Para crear una variable CSS, crea una propiedad personalizada (de ahí su nombre) anteponiendo - a una propiedad.

: root {
  --color rojo;
}

Para usar una propiedad personalizada que haya creado, escriba var (- your-custom-property).

pags {
  color: var (- color)
}

Lo mejor de las propiedades personalizadas de CSS es: se pueden actualizar dinámicamente en diferentes consultas de medios.

: root {
  --color rojo;
}
@media (ancho mínimo: 30em) {
  : root {
    --color azul;
  }
}
pags {
  color: var (- color)
}

Eso significa que puede crear una propiedad --baseline que corresponda a una unidad de ritmo, luego, use esta propiedad --baseline en su CSS para crear un ritmo vertical receptivo.

: root {
  - línea de base: 1.4;
  altura de línea: var (- línea de base)
}
@media (ancho mínimo: 30em) {
  : root {
    / * un valor de 3 utilizado aquí para exagerar los cambios para que pueda verlo en la demostración a continuación * /
  - línea de base: 3;
  }
}

Para crear valores de ritmo, debe usar CSS Calc (porque solo puede calcular cosas en CSS con CSS Calc).

/ * Dos unidades de ritmo * /
h2 {
  margen superior: calc (var (- línea de base) * 2rem);
}
/ * 0.75 unidades de ritmo * /
pags {
  margen superior: calc (var (- línea de base) * 0.75rem);
}

Simplificando el cálculo con una función

Puede ser una tarea ardua escribir calc y var cada vez que crea un valor de ritmo. Puede simplificar el cálculo si crea una función en un preprocesador como Sass.

// rvr significa ritmo vertical receptivo @function rvr ($ multiple) {
  @return calc (var (- línea de base) * $ multiple * 1rem);
}

Luego, puede usar la función vr que ha creado de esta manera. Mucho más simple! .

/ * Dos unidades de ritmo * /
h2 {margin-top: rvr (2); }
/ * 0.75 unidades de ritmo * /
p {margin-top: rvr (0.75); }

¿Cómo se ve el soporte?

La compatibilidad con las propiedades personalizadas de CSS y CSS Calc es increíble. Actualmente son compatibles con todos los principales navegadores.

Desafortunadamente, la compatibilidad con CSS Calc y CSS Custom carece de Opera Mini (junto con algunos navegadores menos conocidos como QQ y Baidu), lo cual es un fastidio.

Dado que Opera Mini no admite las propiedades CSS Calc y CSS Custom, debemos proporcionar propiedades de reserva cada vez que creamos una unidad de ritmo. Esto es un poco más de trabajo, pero afortunadamente, no es un factor decisivo.

: root {
  - línea de base: 1.4;
  / * Respaldo de altura de línea * /
  altura de línea: 1.4;
  altura de línea: calc (var (- línea de base) * 1);
}
@media (ancho mínimo: 30em) {
  : root {
    - línea de base: 1.5;
  }
}
pags {
  / * Retroceso de ritmo vertical básico de altura de línea. * /
  margen superior: 1.05rem;
  margen superior: rvr (0,75);
}

Para hacerlo más simple, también puede crear una función vr que calcule el ritmo vertical en función del valor de altura de línea base. Aquí hay una versión simple que puede usar (específicamente para este ejemplo). Si desea una versión más completa, consulte Typi, que es una biblioteca que he creado para ayudar a simplificar la tipografía receptiva.

@function vr ($ multiple) {
  @return 1.4 * $ multiple * 1rem;
}

Si crea la función vr, su recuperación de ritmo sería más simple:

pags {
  / * Retroceso de ritmo vertical básico de altura de línea. * /
  margen superior: vr (0,75);
  margen superior: rvr (0,75);
}

Nota: todavía tengo que incluir ritmo vertical receptivo en Typi. Espero agregarlo cuando tenga algo de tiempo libre.

Terminando

El ritmo vertical es un importante principio de tipografía al que debemos prestar atención como diseñadores y desarrolladores. Desafortunadamente, no pudimos prestarle tanta atención como quisiéramos antes porque no teníamos las herramientas para hacerlo.

Pero ahora, podemos crear ritmo vertical receptivo con la ayuda de CSS Custom Properties y CSS Calc. Si crea un ritmo vertical receptivo, asegúrese de proporcionar respaldo para los navegadores que no admiten CSS Custom Properties ni CSS Calc.

Gracias por leer. ¿Te ayudó este artículo de alguna manera? Si lo hice, espero que consideres compartirlo; podrías ayudar a alguien que sintió lo mismo que tú antes de leer el artículo. Gracias.

Publicado originalmente en zellwk.com.