Calculadora de ancho de texto en píxeles
Escribe cualquier texto, elige una fuente, un tamaño y un peso, y ve exactamente cuántos píxeles de ancho ocupa en tu navegador. Fija un límite en píxeles para comprobar si un título, la etiqueta de un botón o un encabezado cabe, y dónde se cortaría.
Última actualización:
Cualquier fuente instalada en este dispositivo, o una lista de alternativas como Inter, sans-serif.
letter-spacing de CSS, añadido después de cada carácter.
600 px es el ancho de título de resultados de búsqueda en escritorio que se cita con más frecuencia.
Cómo usar Calculadora de ancho de texto en píxeles
- Escribe o pega tu texto. Pon varios títulos en líneas separadas para medirlos todos a la vez.
- Elige la fuente, el tamaño, el peso y el espaciado entre letras, o toca un ajuste predefinido como el de título de búsqueda.
- Introduce un límite de ancho en píxeles si necesitas que el texto quepa en un espacio.
- Lee el ancho, los píxeles que sobran o faltan y la vista previa truncada.
- Compara fuentes y tamaños en las tablas de abajo y descárgalas en CSV.
Por qué el número de caracteres y el ancho en píxeles no coinciden
La mayoría de las fuentes son proporcionales: cada glifo tiene su propio ancho de avance. Arial (que comparte los anchos de sus caracteres con Helvetica) usa estos anchos, expresados en milésimas de em; multiplícalos por el tamaño de la fuente para obtener píxeles.
| Carácter | Ancho (em) | A 14 px | A 20 px |
|---|---|---|---|
i, l | 0.222 | 3.1 px | 4.4 px |
| espacio, punto, coma | 0.278 | 3.9 px | 5.6 px |
a, e, dígitos 0-9 | 0.556 | 7.8 px | 11.1 px |
A | 0.667 | 9.3 px | 13.3 px |
m, M | 0.833 | 11.7 px | 16.7 px |
W | 0.944 | 13.2 px | 18.9 px |
Así, diez i minúsculas a 20 px miden unos 44 px y diez W mayúsculas unos 189 px. Los títulos con muchas mayúsculas, m y w se quedan sin espacio mucho antes de lo que sugiere el número de caracteres. Las fuentes monoespaciadas como Courier New son la excepción: todos los caracteres tienen el mismo ancho (0.6 em).
Fórmulas usadas
- Ancho con espaciado entre letras = ancho medido + espaciado entre letras × número de caracteres.
- em = ancho en px ÷ tamaño de fuente en px.
- Puntos = px × 0.75 (CSS: 96 px = 72 pt = 1 pulgada).
- Escala: el ancho crece en proporción al tamaño de la fuente, así que un texto de 300 px a 20 px mide unos 360 px a 24 px (300 × 24 ÷ 20).
Consejos para que el texto quepa en un límite de píxeles
- Pon primero las palabras clave para que un título truncado siga teniendo sentido.
- Evita las MAYÚSCULAS en etiquetas largas; las mayúsculas son mucho más anchas que las minúsculas.
- Deja un margen de seguridad del 5-10% por las diferencias de renderizado de fuentes entre sistemas.
- El texto en negrita es bastante más ancho que el normal; mide el peso que vayas a usar realmente.
- Si el visitante puede no tener tu fuente, mide también la fuente alternativa en la tabla comparativa.
Preguntas frecuentes
¿Cómo se calcula el ancho en píxeles?
El texto se dibuja con el método measureText() del canvas HTML usando exactamente la fuente CSS que eliges (estilo, peso, tamaño y familia). Es el mismo motor de texto que tu navegador usa para las páginas web, así que el kerning y el ancho de los glifos coinciden con lo que verías en pantalla. Después se suma el espaciado entre letras una vez por carácter, como hace letter-spacing en CSS.
¿Por qué no basta con contar caracteres?
Los caracteres tienen anchos muy distintos. En Arial a 20 px, una i minúscula mide unos 4.4 px mientras que una W mayúscula mide unos 18.9 px, así que dos títulos con el mismo número de caracteres pueden diferir en más de 100 píxeles. Los lugares que cortan el texto por ancho, como los títulos de resultados de búsqueda, los botones y las celdas de tablas, necesitan una medida en píxeles.
¿Cuál es el límite en píxeles de un título en los resultados de búsqueda?
Los buscadores no publican una cifra fija. Se observa con frecuencia que los títulos en escritorio se cortan en torno a 600 px en Arial 20 px, y las descripciones en escritorio en torno a 920 px en Arial 14 px. Tómalos como referencia y pon las palabras importantes al principio.
¿Por qué veo un aviso de que la fuente no está instalada?
El canvas solo puede medir fuentes que tenga este dispositivo. Si falta la fuente, el navegador la sustituye en silencio por una alternativa, así que la cifra correspondería a otra fuente. Instala la fuente o elige una que esté instalada para obtener una medida exacta.
¿El ancho será igual en otras computadoras?
Muy parecido si se usa el mismo archivo de fuente. Pueden surgir pequeñas diferencias de fracciones de píxel por las versiones de la fuente, el hinting y el renderizado del sistema operativo, y una fuente alternativa distinta puede cambiar mucho el resultado.
¿Cómo convierto el ancho a em o puntos?
Divide el ancho en píxeles entre el tamaño de la fuente para obtener em (una línea de 240 px a 20 px son 12 em). Multiplica los píxeles por 0.75 para obtener puntos, porque CSS define 96 px por pulgada y 72 pt por pulgada. La herramienta muestra las tres.
¿Se sube mi texto?
No. La medición funciona completamente en tu navegador con la API de canvas. Nada de lo que escribes sale de tu dispositivo.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.