Conversor de tamaño de fuente
Convierte tamaños de fuente entre píxeles, puntos, em, rem, porcentaje y vw. Ajusta el tamaño de fuente raíz, el tamaño del elemento padre y el viewport según tu diseño, y copia el CSS.
Última actualización:
El valor predeterminado del navegador es 16px.
p. ej. 390 teléfono, 768 tableta, 1440 portátil
Cómo usar Conversor de tamaño de fuente
- Introduce el tamaño de fuente que tienes, p. ej. 24.
- Elige las unidades De y A, p. ej. de px a rem.
- Revisa el contexto: tamaño raíz para rem (16px por defecto), tamaño del padre para em y %, y ancho del viewport para vw.
- Consulta el resultado y todas las demás unidades en el panel de resultados, y mira la vista previa en vivo.
- Copia el CSS con Copiar resultados o descarga la tabla de 6–72px en CSV.
Las unidades de tamaño de fuente explicadas
Todas las conversiones pasan por píxeles CSS, con estas fórmulas (tamaños raíz y del padre en px):
- px: el píxel de referencia de CSS, 1/96 de pulgada. Absoluto.
- pt: un punto tipográfico, 1/72 de pulgada.
px = pt × 96 ÷ 72(1pt = 1.3333px). Se usa en impresión y procesadores de textos. - rem: relativo al tamaño de fuente raíz del html.
px = rem × raíz. - em: relativo al tamaño de fuente del elemento padre.
px = em × padre; los valores em anidados se multiplican. - %: en font-size, un porcentaje del tamaño de fuente del padre.
px = % ÷ 100 × padre, así que 100% = 1em. - vw: el 1% del ancho del viewport.
px = vw ÷ 100 × ancho del viewport.
Tamaños de fuente comunes (raíz de 16px)
| Píxeles | Puntos | Rem / em | Porcentaje | Uso típico |
|---|---|---|---|---|
| 10px | 7.5pt | 0.625rem | 62.5% | letra pequeña, notas legales |
| 12px | 9pt | 0.75rem | 75% | pies de foto, etiquetas |
| 14px | 10.5pt | 0.875rem | 87.5% | texto pequeño de interfaz, celdas de tabla |
| 16px | 12pt | 1rem | 100% | texto principal (predeterminado del navegador) |
| 18px | 13.5pt | 1.125rem | 112.5% | texto de lectura cómoda |
| 20px | 15pt | 1.25rem | 125% | párrafo de entrada, h5 |
| 24px | 18pt | 1.5rem | 150% | h3 / h2 en móvil |
| 32px | 24pt | 2rem | 200% | h1 en móvil, h2 en escritorio |
| 48px | 36pt | 3rem | 300% | titular grande de escritorio |
| 64px | 48pt | 4rem | 400% | texto de portada / display |
Consejos prácticos
- Usa rem para el texto para que tu tipografía respete el ajuste de fuente del navegador del visitante, y px solo para lo que no deba escalarse, como bordes finos.
- Títulos fluidos: combina unidades con
clamp(), p. ej.font-size: clamp(1.75rem, 1rem + 2.5vw, 3rem), para que crezcan con la pantalla pero sin salirse de unos límites. - Impresión y PDF: los diseñadores suelen indicar pt. Convierte a px con ×4/3 antes de crear la versión web, así 10.5pt pasa a ser 14px.
- Cuidado con los em anidados: una lista de 1.2em dentro de un contenedor de 1.2em acaba en 1.44 × el tamaño del padre. Cambia a rem cuando los tamaños se acumulen de forma inesperada.
Preguntas frecuentes
¿Cómo convierto px a pt?
Multiplica los píxeles por 0.75. CSS define 1px como 1/96 de pulgada y 1pt como 1/72 de pulgada, así que 16px = 12pt y 24px = 18pt. Para pasar de pt a px, multiplica por 4/3 (1.3333).
¿Cuántos píxeles es 1rem?
1rem equivale al tamaño de fuente raíz (del elemento html), que es de 16px en todos los navegadores principales salvo que el usuario o tu CSS lo cambien. Así que 1.5rem = 24px con el tamaño raíz predeterminado.
¿Cuál es la diferencia entre em y rem?
rem siempre es relativo al tamaño de fuente raíz del html, mientras que em es relativo al tamaño de fuente del elemento padre (o del propio elemento en propiedades distintas de font-size). Los valores em anidados se multiplican, por eso rem es más predecible.
¿12pt es lo mismo que 16px?
Sí. 12pt × 96 ÷ 72 = 16px. Por eso 12pt en un procesador de textos y los 16px predeterminados del navegador se ven más o menos del mismo tamaño.
¿Cómo se calcula vw para tamaños de fuente?
1vw es el 1% del ancho del viewport. En una pantalla de 1440px de ancho 1vw = 14.4px, así que un título de 48px son 3.3333vw. El texto solo en vw no respeta bien el zoom del usuario, por eso muchos diseñadores lo combinan con rem en clamp().
¿Qué es el truco del tamaño de fuente al 62.5%?
Poner html { font-size: 62.5% } hace que la raíz mida 10px (el 62.5% de 16px), así que 1.6rem = 16px y 2.4rem = 24px. Pon la raíz en 10 en este conversor para trabajar con esa configuración.
¿Debo usar px o rem para los tamaños de fuente?
En general se recomienda rem para el texto, porque se escala cuando los visitantes cambian el tamaño de fuente predeterminado del navegador. Los valores en px se mantienen fijos, lo que puede perjudicar la accesibilidad de quienes necesitan texto más grande.
¿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.
Herramientas relacionadas
Ver todas las de Consumo de combustible y otros conversores →