La tipografía abarca el 90% del diseño web. Dominar los matices del peso de la fuente (font-weight), las pilas de fuentes seguras y el escalado accesible (rem) marca la diferencia entre un prototipo amateur y una arquitectura frontend profesional.
1El Poder de rem vs px (Accesibilidad)
Mientras que px es fácil de comprender, es una unidad absoluta que ignora las preferencias del usuario. rem (root em) es relativo al tamaño de fuente raíz del navegador (usualmente 16px). Al usar rem garantizas que si un usuario con discapacidad visual aumenta la fuente de su sistema, toda tu interfaz escalará matemáticamente a la perfección.
Regla de oro: Usa rem para tipografías y contenedores principales, y reserva px estrictamente para bordes pequeños.
2Stacks de Fuentes Seguras (Fallbacks)
El sistema operativo del usuario no siempre tiene las fuentes que elegiste. La propiedad font-family evalúa una lista separada por comas de izquierda a derecha. Si la primera falla, usa la segunda. Siempre termina tu stack declarando una familia genérica nativa del sistema, como sans-serif o serif, para evitar que el navegador use una fuente rota.
