La segunda parte de esta serie termina con una condición: la capa que evita
el recorte solo se sostiene mientras cada cara nueva declare a conciencia si
posee la línea. Cumplir esa condición a mano, script a script, es la tarea
que automaticé en el Tipómetro (tipometro.pablobascoy.com),
la herramienta que uso para calibrar cada idioma antes de que su multiplicador
llegue a un token de producción. No sustituye a size-adjust ni al
multiplicador de [lang] de la primera parte de esta serie: se apoya en los
dos y añade encima un segundo multiplicador independiente para el
interlineado, más una elección de familia tipográfica que hasta ahora daba
por buena la primera fuente de sistema que resolvía, sin compararla con la
geometría de la marca.
La familia no es cualquiera, es la que rima con la marca
El artículo de julio de esta serie resolvía qué fuente de sistema cubre cada script. El Tipómetro añade un criterio que aquel artículo no aplicaba: entre las fuentes de sistema disponibles para un script, elegir la que comparte intención geométrica con la tipografía de marca, no la primera que resuelva. La familia latina base del sistema es Quicksand, una geométrica de trazo redondeado. Ningún alfabeto no latino tiene un equivalente exacto, pero algunos se acercan más que otros, y esa distancia es una decisión de diseño, no un detalle de implementación.
Para el árabe no existe ninguna fuente de sistema con esa geometría redondeada, así que la elección cae en la más neutra disponible, SF Arabic, con Geeza Pro, Dubai y Noto Sans Arabic como reserva. Para el han simplificado sí hay una candidata directa: Yuanti SC es la gótica redondeada de macOS, la que más se acerca a la lógica de trazo de Quicksand entre todo lo que trae el sistema. Para el kana, Hiragino Maru Gothic ProN cumple el mismo papel: maru significa «redondo», y la familia existe precisamente para esa intención geométrica, con Hiragino Sans y Yu Gothic UI como alternativa cuando no está instalada. El hangul se queda en Apple SD Gothic Neo y Malgun Gothic, sin una variante redondeada equivalente disponible en los sistemas operativos habituales.
La consecuencia de este criterio es que la coherencia de marca entre scripts no sale gratis: cuesta investigar, script a script, qué fuentes de sistema existen y cuál de ellas rima con la de marca, en vez de aceptar la primera que cubra el rango Unicode necesario. Es coste de investigación, no de descarga ni de licencia, así que se paga una vez por script y no vuelve a aparecer.
Dos multiplicadores donde antes había uno
La primera parte de esta serie multiplicaba font-size y dejaba que el
interlineado le siguiera en la misma proporción, con line-height en em.
La segunda parte, con size-adjust, no multiplicaba nada visible desde el
token: ajustaba el glifo por dentro de la cara. El Tipómetro introduce dos
variables de CSS independientes, --p4-scale-fs y --p4-scale-lh, una por
tamaño de fuente y otra por interlineado, con valores de partida calibrados
por idioma:
| Idioma | fs | lh |
|---|---|---|
| Español (referencia) | 1,00 | 1,00 |
| Árabe | 1,14 | 1,25 |
| Chino simplificado | 1,06 | 1,10 |
| Japonés | 1,06 | 1,10 |
| Coreano | 1,06 | 1,10 |
Que sean dos multiplicadores y no uno es lo que permite algo que ni la primera ni la segunda técnica de esta serie podían hacer por separado: mover el interlineado más que el tamaño cuando el script lo necesita, sin que el glifo crezca de más para conseguirlo. Un script de tinta desequilibrada, con mucho ascendente y poco descendente o al revés, puede necesitar una caja más alta que su propio tamaño de letra sin que el texto se vea desproporcionadamente grande frente al latino de referencia. Con un único multiplicador, subir la caja obliga a subir también la letra en la misma proporción; con dos, se disocian.
El árabe de la tabla lo ilustra con números concretos. Un multiplicador
único, calibrado para no quedarse corto en interlineado, habría tenido que
fijarse en algún punto entre 1,14 y 1,25 para servir a la vez a fs y a
lh; fijado en 1,25 para no recortar, habría agrandado el tamaño de letra
un 10 % más de lo que el propio glifo árabe necesita para igualar la altura
visual del latino. Con los multiplicadores disociados, fs se calibra
exclusivamente contra la altura óptica y lh exclusivamente contra el
cociente mínimo que exige la caja, y cada uno se mueve solo por la razón que
le corresponde.
Cambiar de familia trae también una limpieza que no tiene que ver con el
tamaño. El mismo bloque de CSS que activa la familia por idioma anula, para
ese idioma, el letter-spacing y el text-transform que llevaba el estilo
base. Quicksand en mayúsculas con tracking abierto es una decisión
tipográfica de marca que tiene sentido sobre un alfabeto latino de altura de
x moderada; aplicada sin cambios sobre ideogramas Han o sobre glifos árabes
conectados, el tracking abierto rompe la ligadura visual entre caracteres que
el propio script da por hecha, y el mayúscula/minúscula no tiene equivalente
en ninguno de los dos sistemas de escritura. No es una corrección al margen
del multiplicador, es parte del mismo contrato por idioma: cambiar de
familia obliga a revisar qué más del estilo llevaba implícitos supuestos del
latino.
La regla que impide invertir el orden
Los dos multiplicadores no son libres: lh nunca puede quedar por debajo de
fs, porque eso invertiría el sentido físico de la caja, el glifo crecería
más rápido que el contenedor que se supone que lo aloja. El panel del
Tipómetro valida esta condición en vivo y, si un ajuste manual la rompe,
muestra el aviso exacto: «El multiplicador de line-height va por debajo del
de font-size: el glifo crecerá más rápido que la caja». No es una
prohibición dura, es una advertencia inmediata en el punto donde se comete
el error, que es donde de verdad sirve: en el momento de mover un deslizador,
no en una revisión de código tres semanas después.
El ajuste a rejilla no rompe el modelo
Un interlineado calibrado por multiplicador rara vez cae en un múltiplo
limpio de la rejilla de espaciado del sistema, y un sistema de tokens que
mezcla valores a rejilla con valores calculados por ratio es más difícil de
razonar que uno consistente. La función effectiveScales() del Tipómetro
resuelve esta tensión sin salir del modelo de multiplicadores: redondea el
interlineado resultante en píxeles al múltiplo de 4 más cercano, y solo
entonces recalcula qué multiplicador de lh produce exactamente ese valor
redondeado. El multiplicador que se guarda en el token no es el que se
escribió en el deslizador, es el que reproduce la rejilla; la diferencia
entre los dos rara vez supera una centésima, y por eso no compromete la
calibración que la mide.
El recorte se mide, no se estima a ojo
La verificación final no compara tamaños de fuente entre sí, compara dos
geometrías reales del DOM. El motor de medición combina
actualBoundingBoxAscent y actualBoundingBoxDescent del canvas, que dan
la altura exacta de la tinta dibujada para el texto de muestra, con
getClientRects() sobre el nodo real en la página, que da la caja de línea
tal como la calculó el navegador, línea a línea si el texto envuelve a
varias. El veredicto de recorte compara ambas cajas por separado arriba y
abajo, overflowTop y overflowBottom, y solo se marca como recortado
cuando el exceso supera el margen de un redondeo de subpíxel. Es la misma
disciplina de medición que exige el contrato de arquitectura de esta serie:
ninguna cifra se acepta sin instrumentación, y esta es la instrumentación
que faltaba en las dos partes anteriores, donde la comparación con la line
box se hacía sobre capturas de pantalla y no sobre geometría del DOM en vivo.
El círculo que no se cierra solo
El Tipómetro escribe sus multiplicadores en un selector [lang|="ar"] que
alcanza al elemento completo, exactamente el mismo mecanismo que descarté en
la primera parte de esta serie por escalar el 100% incrustado junto con el
texto que lo envuelve. Elegí este diseño para el laboratorio a sabiendas del
límite: un multiplicador por elemento es más simple de exponer en un panel
de control interactivo que un sistema completo de caras compensadas, y la
prioridad de la herramienta es iterar rápido sobre los valores de
calibración, no servir directamente a producción sin pasar por una capa
adicional. La alternativa que descarté fue construir esa compensación dentro
del propio laboratorio desde el primer día, y la aparqué porque habría
acoplado la herramienta de calibración a la arquitectura de despliegue de un
proyecto concreto, cuando su valor está en poder calibrar cualquier stack.
La salida a ese límite ya está medida en el
contrato de arquitectura
que acompaña a esta serie, en su estrategia de compensación del banco de
pruebas: mantener las caras por unicode-range para la identidad
tipográfica de cada script y añadir una cara latina compensada con
size-adjust: calc(100% / M), calculada sobre el mismo multiplicador que ya
usa el idioma. Esa cara latina extra es la que deshace, para el 100%
incrustado, el crecimiento que le impone el selector [lang] sobre el resto
del texto. En árabe, con M en 1,40, esa sola adición baja R, el cociente
mínimo de interlineado de la segunda parte de esta serie, de 1,86 a 1,33. El
coste que asumo por cerrar el círculo de esta manera es una cara @font-face
más por cada multiplicador distinto que exista en el catálogo de idiomas,
porque size-adjust no admite var() y cada valor necesita su propia
declaración. Es un coste que pago con gusto frente al de no cerrarlo, que es
dejar el 100% sobredimensionado en cada ficha de producto árabe del
catálogo.
El límite de validez que queda, incluso con la cara compensada añadida, es
el mismo que cerraba la segunda parte de esta serie más uno nuevo. El árabe
vocalizado, con harakat, lleva la tinta hasta 2,14 em de altura, y ningún
R razonable para una escala de producto la contiene sin desentonar frente
al resto de idiomas: si el equipo de contenido decide vocalizar, hay que
rehacer el cálculo desde la capa de elección de fuente. Y cualquier
fragmento que llegue al DOM sin su atributo lang, un texto libre pegado
desde fuera del flujo de contenido gestionado, no recibe ningún
multiplicador ni ninguna cara compensada: para ese fragmento, las tres
técnicas de esta serie se comportan exactamente igual que si no existieran.