También disponible en: English · Português · Français · العربية
Calculadora de interlineado CSS
Calcula el line-height que recibe realmente cada tamaño de fuente después de heredar, y marca los tamaños donde tus líneas empiezan a solaparse.
¿Qué es el line-height en CSS?
El interlineado es la distancia entre las líneas base de dos líneas de texto seguidas. En CSS puedes escribirlo de cuatro maneras —un número pelado como 1,5, un porcentaje como 150%, una longitud como 24px o una unidad relativa a la fuente como 1.5em— y en el elemento donde lo declaras las cuatro pueden dar exactamente el mismo resultado. Con una raíz de 16px, todas dan 24px.
Dejan de ser lo mismo en cuanto algo las hereda, y la diferencia no es una manía de los navegadores: está escrita en la especificación. CSS 2.2 define el valor calculado del line-height como el valor especificado cuando es un número, y como el valor absoluto cuando es una longitud o un porcentaje. Así que un número se hereda como número y cada descendiente lo multiplica por su propio tamaño, mientras que todo lo demás se hereda como una longitud fija que ya no vuelve a cambiar.
Esta calculadora de interlineado lo pone en cifras. Dale tu tamaño raíz, la declaración que escribiste de verdad y los tamaños de fuente de tu página, y te enseña con qué se queda cada uno, junto a lo que habría dado el equivalente sin unidad.
Cómo usarla
- Escribe tu tamaño raíz y el interlineado que pusiste. El valor y su unidad son controles separados, así que puedes dejar quieto el número y cambiar solo la unidad. Es la forma más rápida de ver de qué va toda la página.
- Lista los tamaños de fuente que aparecen en tu página. Titulares, pies de foto, todo lo que no esté al tamaño raíz. Los valores por defecto son una escala tipográfica estándar, así que puedes dejarlos tal cual para ver la forma del problema.
- Mira la columna de la proporción y luego cambia la unidad a «sin unidad». Toda fila marcada como que se toca tiene una caja de línea que no supera a su propio texto. Al pasar a un número pelado se recalcula cada fila contra su propio tamaño y las marcas desaparecen.
Por qué 150% y 1,5 no son lo mismo
Toma los valores por defecto de la página: una raíz de 16px con line-height: 150%, y una escala tipográfica de 16, 20, 25, 31, 39, 49 y 61 píxeles. El porcentaje se resuelve una sola vez, contra la raíz, y da 24px. Los siete tamaños heredan entonces 24px; no el 150% de sí mismos, sino 24 píxeles clavados.
A 16px eso es una proporción de 1,5, que es lo que pediste. A 25px es 0,96, y una proporción por debajo de 1 significa que la caja de línea es más baja que el texto que contiene, así que las líneas seguidas se solapan de verdad. A 61px la proporción es 0,39: el titular sigue recibiendo 24 píxeles de caja de línea para un texto de 61 píxeles de alto. Cinco de los siete tamaños acaban en 1,0 o por debajo, y seis de los siete quedan por debajo del 1,5 que pide el criterio 1.4.12 de las WCAG para el texto de párrafo.
Escribe 1,5 sin unidad y no cambia nada más: 16px recibe 24px, 25px recibe 37,5px y 61px recibe 91,5px. Todas las filas son 1,5. Nada se solapa, porque cada elemento hace su propia multiplicación.
Hay un punto exacto donde empieza el problema, y no hace falta medirlo. La proporción heredada es la longitud calculada dividida entre el tamaño del propio elemento, así que pasa por 1 justo cuando el tamaño de fuente iguala al interlineado calculado, y en ningún otro sitio. En lo que se convierta tu porcentaje en píxeles, ese es el tamaño de fuente en el que tus líneas empiezan a chocar.
Lo que hace que esto sobreviva a una revisión de código es que las dos declaraciones son de verdad indistinguibles donde las escribiste. Barriendo todos los tamaños descendientes de 8px a 96px, 1,5 y 150% coinciden en un único tamaño —la raíz— y discrepan en los otros 176. El texto del cuerpo se ve bien, así que la declaración parece bien.
Límites declarados
La unidad em es una longitud, así que aquí se comporta igual que un porcentaje, y rem también es una longitud. Solo se diferencian en contra qué se resuelven: em y porcentaje usan el tamaño de fuente del elemento que las declara, mientras que rem siempre usa la raíz. Si declaras en la raíz —que es donde suelen ir— las tres colapsan en el mismo número, y por eso justamente la distinción se pasa por alto con tanta facilidad.
Esta herramienta modela la herencia, no el renderizado. La caja de línea real de un navegador depende también del ascendente, el descendente y el interlineado propios de la fuente, así que dos tipografías al mismo tamaño y con el mismo interlineado no dan el mismo espaciado. Las proporciones de aquí son las que calcula CSS; la tinta es otra cuestión y depende del archivo de fuente.
La cifra de 1,5 viene del criterio 1.4.12 de las WCAG 2.1, que pide que el usuario pueda poner el interlineado en al menos 1,5 veces el tamaño de fuente en bloques de texto. Va de párrafos, no de titulares, así que un titular grande por debajo de 1,5 no es automáticamente un fallo, y por eso la herramienta cuenta esas filas aparte de aquellas en las que las líneas se tocan de verdad.
Por último, una proporción por encima de 1 no es automáticamente cómoda. 1,05 pasa la prueba del solape y se lee fatal igualmente. La marca de choque es un suelo, no una recomendación.
¿Por qué es gratis?
Es aritmética y corre en tu navegador. No hay ningún servidor haciendo el trabajo, así que no hay nada que cobrar ni cuenta que crear.
No se sube nada y no se guarda nada. Recarga la página y habrá olvidado tus ajustes.