PX a REM y altura de línea
- Los archivos no salen de tu dispositivo
- Se ejecuta en el navegador
- Gratis, sin registro ni marca de agua
Converter
Type in any box, the rest follow.Preview
Typography is the craft of making language visible. A good line length and generous leading let the eye glide from one line to the next without losing its place.
Common sizes
Click a row to load it into the converter.| px | rem | em | pt | vw | Line-height |
|---|---|---|---|---|---|
| 10 | 0.625 | 0.625 | 7.5 | 0.694 | 1.7 |
| 12 | 0.75 | 0.75 | 9 | 0.833 | 1.65 |
| 13 | 0.8125 | 0.8125 | 9.75 | 0.903 | 1.63 |
| 14 | 0.875 | 0.875 | 10.5 | 0.972 | 1.6 |
| 15 | 0.9375 | 0.9375 | 11.25 | 1.042 | 1.57 |
| 16 | 1 | 1 | 12 | 1.111 | 1.55 |
| 18 | 1.125 | 1.125 | 13.5 | 1.25 | 1.52 |
| 20 | 1.25 | 1.25 | 15 | 1.389 | 1.5 |
| 24 | 1.5 | 1.5 | 18 | 1.667 | 1.4 |
| 28 | 1.75 | 1.75 | 21 | 1.944 | 1.32 |
| 32 | 2 | 2 | 24 | 2.222 | 1.25 |
| 36 | 2.25 | 2.25 | 27 | 2.5 | 1.23 |
| 40 | 2.5 | 2.5 | 30 | 2.778 | 1.2 |
| 48 | 3 | 3 | 36 | 3.333 | 1.15 |
| 56 | 3.5 | 3.5 | 42 | 3.889 | 1.13 |
| 64 | 4 | 4 | 48 | 4.444 | 1.1 |
| 72 | 4.5 | 4.5 | 54 | 5 | 1.09 |
| 96 | 6 | 6 | 72 | 6.667 | 1.05 |
Type scale
Fluid type with clamp()
Text grows smoothly between two viewport widths and stays fixed outside them.
font-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);
The quick brown fox
Cómo usar PX a REM y altura de línea
Convierte entre px, rem, em, pt, % y vw usando tus propios tamaños de fuente raíz y padre, y obtén una altura de línea y una longitud de línea recomendadas para cualquier tamaño. La página también construye una escala tipográfica modular y una regla clamp() fluida para texto adaptable.
- 1
Define el Tamaño de fuente raíz, el Tamaño de fuente padre y el Ancho del viewport en Contexto.
- 2
Escribe un valor en cualquier cuadro del Convertidor; las demás unidades se actualizan.
- 3
Lee la Altura de línea recomendada y la Longitud de línea cómoda para ese tamaño.
- 4
Opcional: construye una Escala tipográfica a partir de una razón, o un Tipo fluido con regla clamp(), y copia el CSS.
Preguntas frecuentes
¿Cuántos píxeles son 1 rem?
1 rem equivale al tamaño de fuente raíz (<html>), que los navegadores ponen en 16 px de forma predeterminada. Cambia Tamaño de fuente raíz si tu sitio usa otra base.
¿Cuál es la diferencia entre rem y em?
rem es relativo al tamaño de fuente raíz; em y % son relativos al tamaño de fuente del elemento padre. Define Tamaño de fuente padre para convertir em bien.
¿Cómo se elige la altura de línea?
Sigue la práctica tipográfica habitual: cerca de 1,5 para el texto de cuerpo y un interlineado más apretado para los títulos grandes. También se muestra una versión ajustada a una cuadrícula de 4 px.
¿Qué hace el generador de clamp()?
Escribe un font-size que crece de forma suave entre un tamaño mínimo y uno máximo a lo largo de dos anchos de viewport, y se queda fijo fuera de ellos. Simular ancho del viewport muestra el resultado a cualquier ancho.
¿Puedo convertir puntos para imprimir?
Sí. pt usa la relación CSS de 72 pt por 96 px, así que 12 pt equivalen a 16 px.