La tipografía es el 90% del diseño web; el resto es sólo decoración.
La tipografía (el arte de organizar el texto) es el elemento más importante del diseño web porque el texto es la forma en que se comunica la mayor parte de la información en línea. La buena tipografía es invisible; Los lectores se centran en el contenido, no en el tipo de letra. La mala tipografía se nota inmediatamente y daña la credibilidad. Según un estudio de Adobe de 2025, el 73% de los consumidores dicen que no comprarían en un sitio con una tipografía deficiente.
En x13apps, tratamos la tipografía como la piedra angular de cada diseño. Estos son los principios que guían nuestras elecciones de fuentes.
Limite su selección de fuentes
Utilice un máximo de 2 o 3 tipos de letra en cualquier sitio web. Uno para títulos, otro para el cuerpo del texto y posiblemente otro para acentos o propósitos especiales. Usar demasiadas fuentes crea un caos visual. Elija fuentes que contrasten entre sí: una serif para los títulos con una sans-serif para el cuerpo del texto crea una jerarquía clara y un interés visual.
Google Fonts ofrece cientos de tipos de letra gratuitos y optimizados para la web. Las parejas populares incluyen Playfair Display con Source Sans Pro o Inter con Merriweather. Para proyectos profesionales, considere fuentes con licencia de Typekit o Hoefler&Co.
Priorizar la legibilidad
El texto del cuerpo debe tener al menos 16 píxeles (18-20 píxeles es mejor para facilitar la lectura en pantallas modernas). La altura de la línea debe ser entre 1,5 y 1,8 veces el tamaño de la fuente para una lectura cómoda. La longitud de la línea debe ser de 50 a 75 caracteres por línea; las líneas más largas cansan la vista y las líneas más cortas interrumpen el flujo. Utilice un espacio adecuado entre párrafos para separar las ideas visualmente.
Trate de lograr una fuerte relación de contraste entre el texto y el fondo: al menos 4,5:1 para texto normal y 3:1 para texto grande (WCAG AA). Evite el texto gris claro sobre fondos blancos, sin importar lo moderno que parezca. Si los usuarios tienen dificultades para leer su contenido, lo abandonarán.
Establezca una jerarquía tipográfica clara
Los usuarios escanean antes de leer. Una jerarquía clara que utiliza diferentes tamaños, pesos y colores de fuente guía la vista y comunica la importancia relativa de la información. Los títulos deben ser notablemente más grandes y en negrita que el cuerpo del texto. Utilice una báscula modular para proporciones de tamaño consistentes.
Considere el rendimiento y la accesibilidad
Las fuentes personalizadas afectan el tiempo de carga de la página. Utilice font-display: swap para garantizar que el texto permanezca visible durante la carga de la fuente. Subconjunto de fuentes para incluir solo los caracteres que necesita. Considere fuentes variables que combinen varios pesos en un solo archivo. Asegúrese de que todo el texto se pueda cambiar de tamaño al 200 % sin alterar el diseño. Utilice unidades relativas (rem, em) en lugar de píxeles para los tamaños de fuente. En x13apps, seleccionamos e implementamos tipografía que mejora tanto la estética como la legibilidad. Para obtener más información, lea nuestroguía de psicología del color.