¿Cómo se mide el ancho del texto?

El ancho del texto se refiere al espacio horizontal en píxeles que ocupa una cadena de caracteres cuando se renderiza con una fuente, tamaño y peso específicos. A diferencia del recuento de caracteres, el ancho en píxeles depende del espaciado proporcional de cada glifo — la letra "W" es mucho más ancha que "i" en la mayoría de las fuentes. Medir con precisión el ancho del texto es importante para el diseño de la interfaz de usuario, truncamiento de etiquetas, renderizado dinámico de canvas y ajuste de cadenas en contenedores de ancho fijo.

Los navegadores exponen el método measureText() de la API Canvas HTML5, que calcula el ancho del texto renderizado sin mostrarlo en pantalla. Al dibujar en un contexto de canvas fuera de pantalla, se puede obtener una medición precisa de subpíxeles para cualquier combinación de familia de fuente, tamaño y peso.

Descripción de la herramienta

Esta herramienta calcula el ancho en píxeles de una o dos cadenas de texto utilizando la API Canvas. Selecciona una familia de fuente, establece el tamaño y peso de la fuente, y ve instantáneamente el ancho en píxeles renderizado. Cuando se ingresan dos cadenas, una vista de comparación muestra la diferencia absoluta y la relación de ancho entre ellas.

Características

  • Compatible con todas las fuentes del sistema seguras para web y archivos de fuentes personalizadas cargados (TTF, OTF, WOFF, WOFF2)
  • Compara dos cadenas a la vez con estadísticas de diferencia y relación
  • Tamaño de fuente ajustable de 1 a 256 px y los nueve valores de peso de fuente estándar

Cómo funciona

El ancho se mide utilizando la API CanvasRenderingContext2D.measureText() del navegador. Se crea un elemento <canvas> fuera de pantalla, la propiedad de fuente de su contexto 2D se establece para que coincida con la familia, tamaño y peso seleccionados, y measureText() devuelve el ancho del cuadro delimitador en píxeles. Las fuentes personalizadas se cargan en el registro FontFace del navegador antes de la medición para que los resultados reflejen la tipografía real.