Mobile First y tipografía

Índice de contenidos

A la hora de diseñar una página web una de las mejores estrategias es aplicar la metodología Mobile First que consiste en desarrollar primero la versión para dispositivos móviles y luego adaptarla progresivamente a pantallas más grandes.

Entre los muchos factores clave para lograr una experiencia óptima en móviles, el tamaño de la tipografía juega un papel fundamental. Un texto demasiado pequeño puede dificultar la lectura, mientras que uno excesivamente grande puede comprometer la usabilidad y la jerarquía visual del diseño.

En este artículo vamos a analizar las mejores prácticas para definir los tamaños de fuente adecuados en cada dispositivo, desde móviles hasta monitores de escritorio, asegurando así una lectura cómoda, una navegación intuitiva y un diseño visualmente equilibrado.

Hay un tamaño recomendado para la tipografía en dispositivos móviles que garantiza una buena legibilidad y no afecta negativamente al SEO.

Razones para usar estos tamaños

Recomendaciones extra para SEO y UX

Una buena recomendación para los tamaños óptimos para los títulos (H1, H2, H3, H4) en móviles siguiendo buenas prácticas de legibilidad, UX y SEO.

El peso de la fuente (font-weight) también influye mucho en la legibilidad, accesibilidad y SEO. Aquí te dejamos unas recomendaciones clave:

Recomendaciones generales de font-weight para tienda online

– Textos de párrafos (p)

font-weight: 400 (Regular) – Es el estándar óptimo para legibilidad en web.

Evitar Light (300 o menos) – Se ve muy fino en pantallas pequeñas y puede dificultar la lectura en móviles.

– Títulos (H1, H2, H3…)

H1: 700 (Bold) – Resalta bien sin ser demasiado grueso.

H2: 600-700 (Semibold o Bold) – Se diferencia bien de los H1 y H3.

H3: 500-600 (Medium o Semibold) – Un punto intermedio entre título y texto normal.

H4: 400-500 (Regular o Medium) – Aún debe destacar, pero sin ser demasiado pesado.

– Botones y enlaces (a, button)

500-600 (Medium o Semibold) – Deben ser visibles y llamativos, pero sin exagerar.

– Casos en los que podrías usar Light (300)

En textos muy grandes (ejemplo: un H1 de 40px) donde la tipografía gruesa se vería demasiado pesada.

Si usas una tipografía ya robusta por diseño (ej. Montserrat o Poppins, que son gruesas).

No recomendable para párrafos largos ni textos pequeños en móvil (dificulta la lectura).

– Ejemplo CSS recomendado

h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.75rem; font-weight: 600; }
h3 { font-size: 1.5rem; font-weight: 500; }
h4 { font-size: 1.25rem; font-weight: 400; }
p { font-size: 1.125rem; font-weight: 400; }
a, button { font-weight: 500; }

¿Cómo afecta al SEO y accesibilidad?

Ya tenemos diseñada nuestra página web primero para móviles. Ahora, a la hora de adaptar los tamaños de las tipografías utilizadas en el diseño móvil para aplicarlas en tablet y escritorio (1920px), los tamaños se deben escalar de forma proporcional para mantener la jerarquía visual y mejorar la experiencia del usuario.

Aquí te explicamos cómo calcular los tamaños de texto para cada resolución.

Relación de tamaños de texto en móvil, tablet y escritorio

En general el incremento recomendado entre cada tamaño de pantalla es de ~20-30% más grande conforme subimos de móvil – tablet – escritorio.

Cómo escalar los tamaños de texto correctamente

Usa valores relativos (rem o em) en lugar de píxeles (px) para que se adapten mejor en cada pantalla.

Aplica media queries (@media) para definir cambios progresivos.

/* BASE: Móvil */
html { font-size: 16px; } /* 1rem = 16px */
h1 { font-size: 2rem; } /* 32px */
h2 { font-size: 1.75rem; } /* 28px */
p { font-size: 1.125rem; } /* 18px */

/* Tablet (mínimo 768px) */
@media (min-width: 768px) {
h1 { font-size: 2.4rem; } /* 38px */
h2 { font-size: 2.1rem; } /* 34px */
p { font-size: 1.25rem; } /* 20px */
}

/* Escritorio Full HD (mínimo 1200px) */
@media (min-width: 1200px) {
h1 { font-size: 2.8rem; } /* 45px */
h2 { font-size: 2.5rem; } /* 40px */
p { font-size: 1.4rem; } /* 22px */
}