Hay un escenario donde la medición precisa de fuentes se rompe sin que nadie lo note: el texto está oculto con CSS. La herramienta obvia —medir el ancho de un elemento con getBoundingClientRect o con offsetWidth— devuelve cero o un valor absurdo, y el diseñador jura que la tipografía se ve distinta en el navegador de al lado. No es un fallo de la fuente, es un fallo de cómo la medimos.
Cuando un contenedor tiene display:none, el motor de renderizado no genera caja. Sin caja no hay geometría. Punto. Y ahí se acaba cualquier aproximación geométrica a la métrica tipográfica. Lo he visto en sistemas de diseño que intentan calcular si un botón cabe en una barra lateral antes de mostrarla, y en librerías de gráficos que miden etiquetas de ejes en un canvas que aún no está en el DOM.
Por qué la opción obvia falla con elementos ocultos
La medición geométrica depende de que el navegador haya resuelto el layout. Si el elemento no participa en el flujo, no hay layout que resolver. Ni clientWidth, ni scrollWidth, ni getBoundingClientRect sirven. Incluso getComputedStyle puede devolver una font-family correcta pero sin garantía de que la fuente esté cargada, porque la carga perezosa de tipografías web se dispara con el uso, no con la mera declaración.
La medición precisa de fuentes en este contexto exige separar dos cosas: qué familia y tamaño se van a aplicar, y cuánto ocupa realmente un glifo concreto. Lo primero se lee del estilo computado. Lo segundo necesita un contexto de renderizado, aunque sea temporal e invisible.
El truco del clon fuera de pantalla, con matices
La técnica habitual consiste en clonar el nodo, posicionarlo con position:absolute; left:-9999px y medirlo. Funciona, pero tiene costuras. Si el estilo original depende de un contenedor padre (por ejemplo, em relativos a un font-size heredado), el clon fuera de pantalla pierde esa herencia y mide distinto. También pierde variables CSS definidas en ancestros. He visto equipos pasar horas persiguiendo una diferencia de dos píxeles que venía de una custom property no heredada al clon.
- Conserva la cadena de ancestros relevantes o copia el estilo computado explícitamente.
- Espera a document.fonts.ready antes de medir; si no, mides la fuente de respaldo.
- No midas en el primer requestAnimationFrame si hay fuentes externas: usa la promesa de carga.
Esta aproximación no funciona para fuentes variables donde el eje de peso se ajusta dinámicamente por JavaScript: el clon puede medir con el peso por defecto si no replicas el atributo de variación.
La API de métricas tipográficas y sus límites
Para medir sin DOM visible existe la Font Metrics API, accesible desde un canvas con measureText tras establecer la fuente en el contexto. Es rápida y no requiere nodos. El problema es que el canvas aplica sus propias reglas de sustitución y de letter-spacing; no reproduce exactamente el comportamiento del layout HTML con word-spacing o text-rendering.
Cuando alguien pide medición precisa de fuentes a nivel de subpíxel, conviene recordar que el navegador redondea según el dispositivo. Una medida de 47,3 px en un contexto puede convertirse en 47 px al pintar. La precisión real la marca el motor de renderizado, no la aritmética de JavaScript.
Un caso real de desajuste
En una migración de un catálogo, las tarjetas de producto calculaban la altura del título con un script que medía el nodo oculto hasta que la imagen cargaba. Con la tipografía antigua, la diferencia entre medir el nodo oculto (cero) y el visible era irrelevante porque el CSS fijaba una altura mínima. Al cambiar a una fuente con métricas verticales distintas, las tarjetas empezaron a saltar. La solución no fue medir mejor el nodo oculto, sino medir el bloque con content-visibility: auto y reservar espacio con size-adjust. La lección: a veces la medición precisa de fuentes se resuelve dejando de medir y dejando que el navegador reserve el hueco.
Cuándo conviene no medir
Si el objetivo es evitar saltos de layout, la respuesta moderna pasa por font-display, size-adjust y ascent-override en la declaración @font-face. Esas propiedades permiten alinear las métricas de la fuente de respaldo con la definitiva sin una sola línea de JavaScript. La medición manual queda para casos donde necesitas decidir dinámicamente, por ejemplo, si un titular cabe en una línea o si hay que truncar con puntos suspensivos.
Documentación de referencia: las especificaciones del W3C sobre CSS Fonts y la API de carga de fuentes, además de las notas de los motores de renderizado sobre redondeo subpíxel. Ninguna promete resultados idénticos entre navegadores, y quien diga lo contrario no ha medido en un móvil de gama media.
La medición precisa de fuentes no es un problema de fórmulas: es un problema de contexto. Sin caja no hay geometría, sin fuentes cargadas no hay glifos, y sin aceptar el redondeo del motor no hay precisión real.
Perfiles verificables: Sitio web
Publicado el 31 de October de 2026. Última revisión: 31 de October de 2026.
