# Mide el ancho exacto de cualquier texto en píxeles
¿Tu texto se sale del contenedor? ¿Necesitas saber cuánto espacio ocupa un titular antes de renderizarlo? La API Canvas del navegador permite medir el ancho exacto de cualquier cadena de texto con la precisión de un píxel, sin necesidad de renderizarlo en el DOM. # Por qué contar caracteres no es suficiente
Las fuentes tipográficas modernas son proporcionales: cada glifo tiene un ancho diferente. Una "W" puede ocupar tres veces más que una "i". El número de caracteres no te dice nada sobre el espacio visual real que ocupa el texto. -
Diseño web: Evita desbordamientos en botones, etiquetas y celdas de tabla.
-
SEO: Los motores de búsqueda truncan los títulos por píxeles, no por caracteres.
-
Canvas y PDF: Calcula la posición exacta antes de dibujar texto programáticamente.
-
Tooltips y globos: Dimensiona dinámicamente los contenedores según el texto interior.
# Cómo funciona la medición con Canvas
El método ctx.measureText() de la API Canvas devuelve un objeto TextMetrics con la propiedad width, que refleja el ancho en píxeles CSS con la fuente activa en ese momento. Esta herramienta configura el contexto con tu fuente, tamaño, peso y estilo antes de medir.
const ctx = document.createElement('canvas').getContext('2d');
ctx.font = '700 16px Inter, system-ui, sans-serif';
const width = ctx.measureText('Hola Mundo').width; // ej. 74.5
# Privacidad y procesamiento local
Todo el cálculo ocurre en tu navegador. Ningún texto, fragmento de código ni dato privado sale de tu dispositivo.
Fuentes de Google Fonts
Para medir una fuente de Google Fonts con precisión, primero asegúrate de que esté cargada en la página o instalada en tu sistema. De lo contrario el navegador usará la fuente de respaldo y el resultado variará. 
