Cada título en la web lleva un espacio invisible: el espacio entre líneas de la fuente y el ascendente se reservan ya sea que los glifos los usen o no, por lo que un encabezado de pantalla grande nunca toca la parte superior de su cuadro. El recorte de cuadros de texto es la solución de la imprenta y es una sola declaración.
h1, h2 {
text-box: trim-both cap alphabetic;
}¿Qué significan los valores?
- trim-both elimina la mitad superior y inferior del bloque de texto.
- cap dice recortar hasta la parte superior de las letras mayúsculas, de modo que la parte superior visual de un título se alinee con su cuadro.
- alfabético recorta la parte inferior hasta la línea base, donde realmente descansa el tipo.
Donde se gana el sustento
- Secciones destacadas donde el título debe llegar al borde superior: recortar es mejor que empujar los márgenes por fuente, uno a la vez.
- Encabezados de la barra lateral y kickers de cartas dentro de un borde: el espacio óptico finalmente coincide con el relleno escrito.
- Botones con alturas de línea altas para centrado vertical: recórtelos en su lugar y el botón sobrevivirá a los cambios de fuente.
El soporte se está extendiendo a todos los motores actuales; los navegadores sin él simplemente dejan el clásico espacio adicional en su lugar, por lo que nada se rompe, el título es un poco menos perfecto allí. Las características cosméticas con respaldos silenciosos son las ganancias más baratas en CSS, y el pulido aquí es genial en comparación con un titular de revista atrevido como el de este sitio.