Convertidor de Tipografía

Convertidor de Tipografía

Convierte entre píxeles, puntos, picas, em, rem, pulgadas, centímetros y milímetros -- las unidades con las que diseñadores y desarrolladores se topan cada día. Este convertidor tiende un puente entre el diseño para impresión (puntos, picas) y el desarrollo web (px, em, rem), y te ayuda a mantener los tamaños de fuente consistentes tanto si trabajas en Figma, InDesign o una hoja de estilos CSS.

Cómo se Calcula la Conversión Tipográfica

Todas las unidades pasan por los píxeles (px) como base interna, asumiendo una resolución de pantalla estándar de 96 PPP y un tamaño de fuente raíz de 16 px. La conversión funciona en dos pasos: primero convierte la entrada a píxeles usando su factor y luego convierte de píxeles a la unidad de destino.

Factores de conversión clave (a píxeles):

• 1 pt = 1.3333 px (porque 1 pt = 1/72 de pulgada, y 1 pulgada = 96 px)
• 1 pc (pica) = 16 px (1 pc = 12 pt = 12 x 1.3333)
• 1 pulgada = 96 px
• 1 cm = 37.795 px
• 1 mm = 3.7795 px
• 1 em = 16 px (con la raíz predeterminada de 16 px)
• 1 rem = 16 px (con la raíz predeterminada de 16 px)

Ejemplos Resueltos

Escenario 1 -- Un diseñador entrega especificaciones de impresión a un desarrollador web Una guía de estilo de marca especifica el texto de cuerpo en 10 pt y los encabezados en 24 pt. El desarrollador web necesita los equivalentes en px. 10 pt x 1.3333 = 13.33 px (se redondea a 13 px), y 24 pt x 1.3333 = 32 px. Fija el font-size del cuerpo en 13px y el del h1 en 32px para igualar la apariencia de impresión.

Escenario 2 -- Convertir un diseño de Figma de px a rem por accesibilidad Un archivo de Figma usa 16 px para el texto de párrafo, 20 px para los subtítulos y 28 px para los encabezados. Al dividir cada uno entre 16 (el tamaño de fuente raíz predeterminado) se obtiene 1 rem, 1.25 rem y 1.75 rem. Usar rem en lugar de px permite que los usuarios que fijan una fuente predeterminada más grande en el navegador se beneficien de un texto proporcionalmente más grande.

Escenario 3 -- Comprobar mediciones en centímetros para una exportación a PDF La plantilla de un documento legal requiere tamaños de fuente en centímetros. El diseñador usa 0.42 cm para las notas al pie y 0.635 cm para el texto de cuerpo. Al convertir: 0.42 cm x 37.795 = 15.87 px ≈ 12 pt; 0.635 cm x 37.795 = 24 px = 18 pt. Ambos son tamaños de impresión estándar, lo que confirma que las mediciones son correctas.

Tabla de Referencia de Unidades Tipográficas

Cuándo Usar Esta Herramienta

• Traducir una guía de estilo de impresión (en puntos) a una hoja de estilos CSS (en px o rem) para el rediseño de un sitio web
• Convertir diseños de Figma que usan px a valores rem para implementar maquetaciones accesibles y compatibles con el zoom del navegador
• Comprobar que los tamaños de fuente de un documento PDF o Word coincidirán con su versión web
• Escalar un diseño: un cliente pide "haz todo un 10% más grande" -- convierte a una unidad común, multiplica y vuelve a convertir
• Verificar que el texto de cuerpo a 16 px coincide con la expectativa estándar del texto de cuerpo de impresión de 12 pt

Errores Comunes

1. Usar em en lugar de rem para los tamaños de texto globales. Como em es relativo al elemento padre, anidar componentes provoca acumulación. Un 1.2 em dentro de otro elemento de 1.2 em se renderiza a 1.44x la raíz -- a menudo de forma no intencionada. Usa rem para un dimensionamiento global predecible.
2. Suponer que 1 px = 1 pt. Los puntos son más grandes: 1 pt = 1.333 px. Fijar una regla CSS en 12px cuando un diseñador especificó 12pt producirá un texto un 25% más pequeño de lo previsto.
3. Ignorar que em y rem cambian cuando cambia el tamaño de fuente raíz. Si fijas html { font-size: 18px; }, entonces 1 rem = 18 px, no 16 px. Indica siempre la suposición del tamaño de la raíz al compartir valores en rem.
4. Usar pt para el CSS web. Aunque los navegadores aceptan pt, es una unidad de impresión que se traduce de forma inconsistente entre densidades de pantalla y niveles de zoom. Cíñete a px para tamaños fijos y a rem para el texto escalable en la web.

Contexto y Aplicaciones

La conversión de unidades tipográficas surge en tres flujos de trabajo principales. En la migración de impresión a web, una marca puede tener décadas de recursos de impresión definidos en puntos y picas que necesitan trasladarse a un sistema de estilo digital. Hacer coincidir el texto de cuerpo de impresión de 10 pt con el texto de cuerpo web de 13.33 px mantiene la consistencia visual. En el cumplimiento de accesibilidad, la directriz 1.4.4 de las WCAG 2.1 exige que el texto se pueda redimensionar hasta un 200% sin pérdida de contenido. Usar rem en lugar de px permite que el navegador respete la preferencia de tamaño de fuente predeterminado del usuario, algo que px anula. En la tipografía web responsiva, la función clamp() de CSS requiere valores específicos en px o rem para los tamaños mínimo y máximo -- este convertidor te ayuda a definir esos límites a partir de las especificaciones en puntos del diseñador.

Consejos

1. El atajo universal que hay que memorizar: 16 px = 12 pt = 1 rem = 1 em (con la configuración predeterminada del navegador)
2. Divide cualquier valor en px entre 16 para obtener su equivalente en rem -- 24 px / 16 = 1.5 rem
3. Multiplica cualquier valor en pt por 1.333 para obtener px -- 18 pt x 1.333 = 24 px
4. Para los documentos de impresión, 1 pica = 12 puntos, así que un medianil de columna de 3 picas = 36 pt = 48 px
5. Al construir un sistema de tokens de diseño, define todos los tamaños en rem para que un solo cambio del font-size raíz escale todo el sistema
6. Usa px para los bordes (1 px), las sombras de caja y los detalles finos que no deban escalar con el tamaño del texto