¿Cuál es la diferencia entre px, rem y em en CSS?▼
px (píxeles) es una unidad fija e independiente del contexto. rem (root em) es relativa al font-size del elemento raíz <html>, por defecto 16px. em es relativa al font-size del elemento padre. rem es preferible para tipografía escalable porque solo depende de un punto de referencia, mientras que em puede anidarse y causar efectos inesperados.
¿Por qué debería usar rem en lugar de px para tipografía?▼
rem respeta la preferencia de tamaño de fuente del usuario del sistema operativo y del navegador. Si un usuario configura su navegador a 20px base, todo en rem escala proporcionalmente. Con px fijos, el texto no responde a esas preferencias, lo que afecta la accesibilidad. Además, rem facilita crear sistemas de diseño consistentes.
¿Qué valor base de font-size debo usar en mis cálculos?▼
El valor predeterminado de los navegadores es 16px. Si no has modificado el font-size en html o body, usa 16px. Si tu proyecto CSS tiene body { font-size: 18px; } o similares, usa ese valor. Esta calculadora te permite configurarlo exactamente para obtener conversiones precisas.
¿Cuándo usar em en lugar de rem?▼
em es útil cuando quieres que un elemento escale en relación a su padre inmediato, no al root. Por ejemplo, en un botón donde el padding debe ser proporcional al texto del botón, usar em hace que el espaciado escale automáticamente si cambias el font-size del botón. Para tipografía global, rem es casi siempre mejor opción.
¿Qué son los puntos (pt) y cuándo se usan en web?▼
Los puntos (pt) son una unidad tipográfica del mundo impreso: 1pt = 1/72 de pulgada = 1.333px aprox. En desarrollo web rara vez se usan para pantallas, pero son útiles cuando generas CSS para medios de impresión (@media print) donde los documentos se miden en puntos como en Word o LibreOffice.
¿Cómo afecta el font-size base de 16px al diseño?▼
Con base 16px: 1rem = 16px, 1.5rem = 24px, 2rem = 32px. Si cambias la base a 10px (técnica popular para cálculo mental fácil: font-size: 62.5% en html), entonces 1.6rem = 16px, 2.4rem = 24px. Esta técnica hace las conversiones mentales más intuitivas pero puede complicar la accesibilidad si no se maneja bien.
¿Qué tamaño mínimo de fuente se recomienda para legibilidad?▼
Para texto de cuerpo en pantalla, el mínimo recomendado es 16px (1rem con base 16px). Para texto secundario o metadatos, no bajar de 12px. Para texto de botones y etiquetas, 13–14px es aceptable. La WCAG 2.1 no impone un mínimo estricto de px, pero sí requiere que el texto pueda escalarse 200% sin pérdida de contenido.