Cómo convertir un tamaño CSS
Escribe el valor, elige px, em, pt o % y define la referencia en píxeles. Pulsa Convertir tamaño para ver las cuatro equivalencias. Cada resultado se puede copiar con su sufijo CSS.
La referencia es el valor que representa 1em y 100 %. Si el padre usa font-size: 20px, escribe 20. Al cambiarla se actualizan em y %, pero no la relación fija entre px y pt.
Qué calcula
La entrada se lleva primero a píxeles: em × referencia; % × referencia ÷ 100; pt × 96 ÷ 72. Después se aplican las fórmulas inversas a cada unidad.
El cálculo interno conserva precisión. La pantalla elimina residuos decimales y mantiene visibles los valores positivos muy pequeños.
Dos ejemplos comprobados
Con 24px y una referencia de 16px obtienes 24px, 1,5em, 18pt y 150 %. Si vuelves a convertir 1,5em con la misma referencia, recuperas 24px.
Con 125 % y una referencia de 20px obtienes 25px, 1,25em y 18,75pt. Con una referencia de 16px, el mismo 125 % pasa a 20px y 15pt.
Cuándo usarlo
Sirve para pasar medidas de un diseño a CSS relativo, revisar tokens tipográficos o llevar puntos de impresión a CSS. También ayuda a resolver una declaración heredada si conoces el tamaño calculado del padre.
No se presupone que todos los proyectos usan 16px. Guarda la referencia junto con el resultado para que otra persona pueda repetir la conversión.
Límites y errores habituales
No analiza calc(), clamp(), variables, hojas completas, rem ni unidades de viewport. Usa la referencia que indicas y no inspecciona el DOM.
El porcentaje se interpreta solo como font-size. No uses este resultado para width o height. Se rechazan tamaños negativos y referencias cero.
La conversión de puntos sigue las unidades CSS, no los píxeles físicos de una impresora. La altura visible también depende de la fuente y del line-height.
Cómo usar el resultado
Copia la unidad adecuada y pruébala en el componente real, también con texto ampliado. Convertir a una unidad relativa no garantiza por sí solo accesibilidad, ajuste de línea ni contraste.
El cálculo se realiza en el navegador y los valores introducidos no se envían como parámetros analíticos. Si falla el portapapeles, selecciona el resultado visible.
Todas las conversiones de unidades tipográficas CSS
| Dirección de conversión | Fórmula con referencia de 16px | Ejemplo |
|---|---|---|
| Píxeles a Em (px a em) | em = px × 0.0625 | 1px = 0.0625em |
| Píxeles a Puntos (px a pt) | pt = px × 0.75 | 1px = 0.75pt |
| Píxeles a Porcentaje (px a %) | % = px × 6.25 | 1px = 6.25% |
| Em a Píxeles (em a px) | px = em × 16 | 1em = 16px |
| Em a Puntos (em a pt) | pt = em × 12 | 1em = 12pt |
| Em a Porcentaje (em a %) | % = em × 100 | 1em = 100% |
| Puntos a Píxeles (pt a px) | px ≈ pt × 1.333333333 | 1pt ≈ 1.333333333px |
| Puntos a Em (pt a em) | em ≈ pt × 0.08333333333 | 1pt ≈ 0.08333333333em |
| Puntos a Porcentaje (pt a %) | % ≈ pt × 8.333333333 | 1pt ≈ 8.333333333% |
| Porcentaje a Píxeles (% a px) | px = % × 0.16 | 1% = 0.16px |
| Porcentaje a Em (% a em) | em = % × 0.01 | 1% = 0.01em |
| Porcentaje a Puntos (% a pt) | pt ≈ % × 0.12 | 1% ≈ 0.12pt |
Preguntas frecuentes
¿16px siempre equivalen a 1em?
Solo con una referencia de 16px. Con 20px, 1em equivale a 20px.
¿Por qué la referencia no cambia pt?
Em y % son relativos. Px y pt mantienen en CSS la relación 96px = 72pt.
¿Puedo usar el % para ancho?
No. Aquí % significa porcentaje de font-size; el ancho depende del bloque contenedor.
¿Por qué se redondea el valor copiado?
Se quita ruido decimal para un CSS práctico; el cálculo usa el valor sin redondear.
¿Convierte rem?
No. El alcance se limita a px, em, pt y % de font-size; rem depende del elemento raíz.