Hace unos días encontré un fallo que al principio parecía trivial pero que me enseñó mucho sobre cómo los navegadores manejan las fuentes. Un tester de QA me dijo que el tamaño de fuente de una página se veía raro. Al revisarla en mi equipo todo parecía correcto, las tipografías coincidían con el diseño. Pensé que se habían equivocado, hasta que me pidieron compartir pantalla. En su equipo la fuente se veía a 20px y en el mío a 16px. Mismo HTML, aspecto totalmente distinto.

La causa resultó ser la configuración de tamaño de fuente por defecto del navegador Chrome. Chrome y otros navegadores permiten a los usuarios ajustar el tamaño por defecto y si usas rem sin definir font-size en el elemento root puedes dejar que el navegador cambie todo el diseño.

El núcleo de rem depende del root. Si defines explícitamente el root como en html { font-size: 16px; } body { font-size: 16px; } entonces tu diseño queda anclado y las preferencias del usuario no alteran tu escala. Si no lo haces, lo dejas en manos del navegador.

Revisé cómo lo hacen sitios conocidos. GitHub y YouTube bloquean el font-size del root y no cambian al alterar la configuración del navegador, lo que garantiza consistencia pixel perfect para productos donde la identidad de marca es clave. Shopify, en cambio, se adapta a la configuración del navegador y escala sus tipografías, una decisión más orientada a la accesibilidad y a respetar las preferencias del usuario.

Accesibilidad versus consistencia es el gran dilema. Desde el punto de vista de accesibilidad es recomendable permitir que el usuario cambie tamaños a través del navegador, especialmente para personas con baja visión. Desde la perspectiva de marca y diseño esto puede romper layouts y desplazar componentes. No hay una respuesta universal, depende de lo que valore más el producto.

Mi recomendación práctica: para sitios orientados al contenido como blogs o tiendas es preferible respetar la configuración del usuario. Para productos centrados en el diseño y la experiencia de marca es más seguro fijar el root font-size. Si optas por rem, comunícalo al equipo de diseño para que los mockups también usen rem o incluyan referencias de conversión.

El clásico conflicto entre diseñadores y desarrolladores surge porque los diseños suelen entregarse en px y el desarrollo se hace en rem. Esto genera conversiones erróneas y retrasa el proyecto. Decide temprano si vas a soportar escalado de fuentes, documenta la estrategia de tipografías y mantén las unidades consistentes entre diseño y código.

En Q2BSTUDIO como empresa de desarrollo de software y aplicaciones a medida entendemos estas decisiones de producto y técnicas. Ofrecemos servicios de software a medida y aplicaciones a medida, integración de inteligencia artificial y transformaciones cloud. También trabajamos en ciberseguridad y pentesting, servicios cloud aws y azure, servicios inteligencia de negocio y soluciones con power bi, además de crear agentes IA y propuestas de ia para empresas que optimizan procesos y mejoran la experiencia de usuario.

Si necesitas que tu producto respete accesibilidad sin sacrificar consistencia, podemos ayudarte a definir la estrategia tipográfica adecuada, automatizar pruebas visuales y evitar sorpresas por configuraciones de navegador. Nuestro enfoque combina diseño, desarrollo y seguridad para entregar soluciones robustas y escalables.

Lección final: un fallo aparentemente pequeño puede destapar preguntas de producto importantes. Las fuentes no son solo estilo, son una decisión sobre a quién optimizas, la marca o el usuario. ¿Te ha pasado algo similar con tamaños de fuente debidos a ajustes del navegador? Cuéntanos tu experiencia y si quieres que lo revisemos, en Q2BSTUDIO podemos ayudarte a implementar la mejor solución técnica y de producto.