Guía Completa de Tamaños UI Responsive
Elegir bien los tamaños de todos los componentes de un diseño (tipografía, padding, botones, imágenes, …) en una interfaz parece un detalle pequeño, pero cambia por completo la experiencia. Por ejemplo, un texto demasiado pequeño cansa, uno demasiado grande rompe la jerarquía, y uno mal ajustado entre dispositivos hace que el diseño pierda consistencia.
La buena noticia es que no necesitas complicarte demasiado para hacerlo bien. Si partes de unas medidas base sensatas y ajustas según el contexto, puedes conseguir una UI mucho más legible, más limpia y más agradable de usar.
UI Tamaños para tipografías
Los tamaños de fuente en UI responsive garantizan que el contenido se lea bien y se entienda con facilidad en cualquier dispositivo, sin obligar al usuario a forzar la vista ni perder la jerarquía visual de la interfaz. Cuando la tipografía se adapta correctamente a móvil, tablet y desktop, la experiencia se vuelve más cómoda, más accesible y más profesional, y además ayuda a que botones, títulos y textos secundarios mantengan su peso visual en cada contexto.
Usa clamp() siempre que puedas – Es fluido y no necesita media queries
| Elemento | Desktop | Tablet | Mobile | Código Recomendado |
|---|---|---|---|---|
| H1 / Hero | 56-72px | 40-56px | 32-40px | clamp(32px, 5vw, 72px) |
| H2 | 40-48px | 32-40px | 28-32px | clamp(28px, 4vw, 48px) |
| H3 | 32-36px | 28-32px | 24-28px | clamp(24px, 3vw, 36px) |
| H4 | 24-28px | 22-24px | 20-22px | clamp(20px, 2.5vw, 28px) |
| Body / Párrafo | 16-18px | 16px | 14-16px | clamp(14px, 1.2vw, 18px) |
| Body Large | 18-20px | 17-18px | 16-17px | clamp(16px, 1.5vw, 20px) |
| Body Small | 14-16px | 14px | 13-14px | clamp(13px, 1vw, 16px) |
| Caption | 12-14px | 12-13px | 11-12px | clamp(11px, 0.9vw, 14px) |
| Label/Tag | 12-14px | 12px | 11-12px | clamp(11px, 0.9vw, 14px) |
UI Tamaños para espaciado / padding
El espaciado y el padding en UI responsive dan aire a la interfaz, mejoran la lectura y ayudan a que cada elemento tenga su sitio sin sentirse apretado. Cuando estos espacios se ajustan bien a cada pantalla, la experiencia se vuelve más clara, más ordenada y más cómoda, además de reforzar la jerarquía visual y hacer que la interfaz se sienta más profesional.
| Elemento | Desktop | Tablet | Mobile |
|---|---|---|---|
| Sección Padding | 80-120px | 60-80px | 40-60px |
| Card Padding | 40-60px | 30-40px | 20-30px |
| Button Padding (Vertical) | 14-18px | 12-16px | 10-14px |
| Button Padding (Horizontal) | 30-50px | 25-40px | 20-35px |
| Input Padding | 12-16px | 12-14px | 10-12px |
| Container Max Width | 1200-1440px | 768-1024px | 100% |
| Margen entre elementos | 30-40px | 24-32px | 20-24px |
| Gap en Grid/Flex | 30-40px | 20-30px | 15-20px |
UI Tamaño de botones
Los botones en UI responsive definen la navegabilidad intuitiva y facilitan las interacciones del usuario en cualquier dispositivo, asegurando que se sientan cómodos al tacto y visualmente destacados sin importar el tamaño de pantalla. Un buen diseño de botones adapta su altura mínima, espaciado interno y área táctil para evitar toques accidentales en móvil, mantener claridad en tablet y precisión en desktop, lo que mejora la usabilidad general y reduce la frustración del usuario.
| Tipo | Desktop | Tablet | Mobile |
|---|---|---|---|
| Primary Button Height | 48-56px | 44-48px | 44-48px |
| Secondary Button Height | 44-48px | 40-44px | 40-44px |
| Small Button Height | 36-40px | 36-40px | 36-40px |
| Button Font Size | 16-18px | 15-16px | 14-16px |
| Border Radius | 8-12px | 8-10px | 8-10px |
| Icon Size en Button | 20-24px | 18-20px | 18-20px |
UI Tamaño para imágenes y media
El tamaño de imágenes y media en UI responsive asegura que los elementos visuales carguen rápido, ocupen el espacio justo y mantengan proporciones coherentes sin distorsionarse en cualquier dispositivo, evitando que la interfaz se vea desproporcionada o lenta. Al adaptar alturas, anchos y resoluciones según móvil, tablet o desktop —usando técnicas como srcset, object-fit y tamaños fluidos—, se optimiza la experiencia visual, se mejora el rendimiento y se respeta la jerarquía del contenido, haciendo que fotos, videos e iconos siempre contribuyan al diseño sin robar protagonismo ni generar frustración.
| Elemento | Desktop | Tablet | Mobile |
|---|---|---|---|
| Hero Image Height | 600-800px | 400-600px | 300-500px |
| Card Image Aspect Ratio | 16:9 o 4:3 | 16:9 | 16:9 o 1:1 |
| Avatar Small | 40-48px | 36-40px | 32-36px |
| Avatar Medium | 64-80px | 56-64px | 48-56px |
| Avatar Large | 120-150px | 100-120px | 80-100px |
| Icon Standard | 24-32px | 20-24px | 20-24px |
| Icon Large | 48-64px | 40-48px | 36-40px |
UI Tamaño para layouts y grids
Los tamaños de layouts y grids en UI responsive son vitales porque estructuran el contenido de forma flexible y coherente, permitiendo que la interfaz fluya naturalmente en móvil, tablet o desktop sin romperse ni generar espacios vacíos ni saturados. Al usar grids adaptativos con columnas variables, breakpoints inteligentes y anchos fluidos —como porcentajes o fracciones en lugar de píxeles fijos—, se mantiene la jerarquía visual, se aprovecha cada píxel disponible y se asegura una navegación intuitiva, haciendo que el diseño se sienta equilibrado, profesional y cómodo en cualquier pantalla.
| Elemento | Desktop | Tablet | Mobile |
|---|---|---|---|
| Columnas Grid | 12 o 4-6 | 8 o 2-4 | 4 o 1-2 |
| Sidebar Width | 250-320px | 200-250px | 100% |
| Navigation Height | 70-90px | 60-70px | 56-64px |
| Footer Height | Auto | Auto | Auto |
| Modal Width | 600-800px | 90% | 95% |
UI Tamaño para componentes
Los componentes como inputs, selects y otros elementos de formulario en UI responsive son clave porque garantizan interacciones fluidas y accesibles en cualquier dispositivo, adaptando su altura mínima, ancho y espaciado para que sean fáciles de tocar o clicar sin errores. Al escalar estos elementos —con tamaños táctiles de al menos 44x44px en móvil, campos legibles en tablet y precisión en desktop—, se evita la frustración del usuario, se mejora la usabilidad general y se mantiene una coherencia visual que hace que formularios, dropdowns y controles se sientan intuitivos y profesionales en cada contexto.
| Elemento | Desktop | Tablet | Mobile |
|---|---|---|---|
| Input Height | 44-52px | 42-48px | 44-48px |
| Select/Dropdown Height | 44-52px | 42-48px | 44-48px |
| Checkbox/Radio Size | 20-24px | 18-20px | 20-24px |
| Toggle Switch Width | 48-56px | 44-48px | 44-48px |
| Progress Bar Height | 6-10px | 6-8px | 6-8px |
| Badge/Chip Height | 24-32px | 22-28px | 22-28px |
| Tooltip Max Width | 250-300px | 200-250px | 200px |
Breakpoints Estándar:
Estos son los puntos de corte más utilizados en la actualidad para distintas resoluciones de pantalla:
css
/* Mobile: 320px – 767px (default) */
/* Tablet */
@media(min-width: 768px) { }
/* Desktop Small */
@media (min-width: 1024px) { }
/* Desktop Large */
@media (min-width: 1440px) { }
/* Desktop XL */
@media (min-width: 1920px) { }
De todos modos, tanto este como otros post, debes tomarlos como recomendaciones, no tienes que usar exactamente estas medidas, porque cada diseño es un mundo, pero úsalo para al menos tener unas referencias y proporciones, que si pueden ayudar a tus diseños.