Espaciado y Tipografía en Pantallas Pequeñas
El espacio es oro en móvil. Aprende cómo distribuir contenido, elegir tamaños de fuente y crear layouts legibles sin sacrificar estética.
Por Qué el Espaciado Importa Más en Móvil
En una pantalla de 6 pulgadas, cada píxel cuenta. No es solo cuestión de que todo quepa — es sobre crear una experiencia legible y agradable cuando alguien está sosteniendo el teléfono con una mano mientras camina, espera el autobús o come.
La tipografía y el espaciado son los dos pilares que sostienen la legibilidad en móvil. Si los ignoras, tu contenido se vuelve un bloque de texto ilegible. Si los dominas, hasta un párrafo largo se siente fácil de leer.
Tamaños de Fuente que Funcionan en Móvil
Aquí viene lo importante: no uses tamaños de fuente fijos. Usa clamp() en CSS para que tu tipografía escale automáticamente entre móvil y desktop. Así no necesitas crear cinco breakpoints diferentes.
Por qué funciona? En móvil (320px) el H1 se ve de 1.75rem. En desktop (1440px) crece hasta 3.5rem. Sin media queries extras. Es automático.
Espaciado Vertical: La Clave de la Respiración
El espaciado vertical es donde la mayoría falla. Ponen el H2, luego un párrafo, luego otra cosa — todo pegado. Se ve asfixiante.
En móvil, usa gap: clamp(1.5rem, 3vw, 2.5rem) entre elementos principales. Eso te da entre 1.5rem en móvil y 2.5rem en desktop. Suficiente para “respirar” sin dejar espacios enormes.
Regla práctica del espaciado:
- Entre párrafos: 1rem a 1.5rem
- Entre secciones: 2rem a 3rem
- Padding interno de cards: 1rem a 1.5rem
- Margen de contenedor: 1rem a 2rem en los lados
Línea de Base: El Ritmo Vertical Consistente
Quieres que tu diseño se vea profesional? Crea una línea de base vertical. Esto significa que todos tus elementos se alinean a un múltiplo de una altura base.
Si usas una línea de base de 4px, todo — padding, margin, altura de línea — es múltiplo de 4px. 8px, 12px, 16px, 20px. No 13px o 18px al azar. Se ve coherente y profesional, aunque el usuario no sepa por qué.
“El espaciado consistente es la diferencia entre un sitio que se ve hecho por un principiante y uno que se ve profesional.”
Alto de Línea y Longitud de Línea
Dos cosas que muchos ignoran pero marcan diferencia:
Alto de línea (line-height)
Usa 1.5 a 1.8 para párrafos en móvil. Esto da espacio respirable entre líneas. En desktop puedes usar 1.6. No uses nunca 1 o 1.2 — se ve asfixiante.
Longitud de línea (max-width)
En móvil, una línea de 45-65 caracteres es ideal. Si tu pantalla es de 320px, probablemente eso ya lo logres. En desktop, limita a 80 caracteres máximo. Si no, el ojo se pierde yendo de izquierda a derecha.
Resumen: La Checklist de Espaciado y Tipografía
El espaciado y la tipografía no son detalles — son la base de cualquier diseño móvil decente. Domínalos y tu sitio se verá profesional automáticamente.
Listo para aplicar esto?
Abre tu proyecto y revisa la tipografía y espaciado. Ajusta clamp() en las fuentes y los gaps entre elementos. Verás la diferencia en 10 minutos.
Volver a Artículos
Aclaración Importante
Este artículo proporciona orientación educativa sobre diseño web móvil y mejores prácticas de tipografía. Las recomendaciones específicas sobre tamaños de fuente y espaciado pueden variar según tu proyecto, audiencia y necesidades de accesibilidad. Siempre prueba tus diseños en dispositivos reales y solicita retroalimentación de usuarios antes de publicar. Los estándares WCAG y de accesibilidad deben ser tu prioridad.