{"id":567,"date":"2026-04-13T11:49:11","date_gmt":"2026-04-13T11:49:11","guid":{"rendered":"https:\/\/www.gloobs.com\/blog\/?p=567"},"modified":"2026-06-09T14:59:58","modified_gmt":"2026-06-09T14:59:58","slug":"guia-completa-de-tamanos-ui-responsive","status":"publish","type":"post","link":"https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/","title":{"rendered":"Gu\u00eda Completa de Tama\u00f1os UI Responsive"},"content":{"rendered":"

[et_pb_section fb_built=\u00bb1″ _builder_version=\u00bb4.27.5″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.27.5″ _module_preset=\u00bbdefault\u00bb width=\u00bb100%\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.27.5″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text disabled_on=\u00bboff|off|off\u00bb _builder_version=\u00bb4.27.5″ _module_preset=\u00bbdefault\u00bb custom_margin=\u00bb0px||||false|false\u00bb custom_padding=\u00bb0px||||false|false\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n

\n
\n

Gu\u00eda Completa de Tama\u00f1os UI Responsive<\/h1>\n

Elegir bien los tama\u00f1os de todos los componentes de un dise\u00f1o (tipograf\u00eda, padding, botones, im\u00e1genes, …) en una interfaz parece un detalle peque\u00f1o, pero cambia por completo la experiencia. Por ejemplo, un texto demasiado peque\u00f1o cansa, uno demasiado grande rompe la jerarqu\u00eda, y uno mal ajustado entre dispositivos hace que el dise\u00f1o pierda consistencia.
\nLa buena noticia es que no necesitas complicarte demasiado para hacerlo bien. Si partes de unas medidas base sensatas y ajustas seg\u00fan el contexto, puedes conseguir una UI mucho m\u00e1s legible, m\u00e1s limpia y m\u00e1s agradable de usar.<\/strong><\/p>\n<\/header>\n

\n

UI Tama\u00f1os para tipograf\u00edas<\/h2>\n

Los tama\u00f1os de fuente en UI responsive garantizan que el contenido se lea bien y se entienda con facilidad<\/strong> en cualquier dispositivo, sin obligar al usuario a forzar la vista ni perder la jerarqu\u00eda visual de la interfaz. Cuando la tipograf\u00eda se adapta correctamente a m\u00f3vil, tablet y desktop, la experiencia se vuelve m\u00e1s c\u00f3moda, m\u00e1s accesible y m\u00e1s profesional, y adem\u00e1s ayuda a que botones, t\u00edtulos y textos secundarios mantengan su peso visual en cada contexto.
\nUsa clamp() siempre que puedas – Es fluido y no necesita media queries<\/p>\n

<\/p>\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Elemento<\/th>\nDesktop<\/th>\nTablet<\/th>\nMobile<\/th>\nC\u00f3digo Recomendado<\/th>\n<\/tr>\n<\/thead>\n
H1 \/ Hero<\/td>\n56-72px<\/td>\n40-56px<\/td>\n32-40px<\/td>\nclamp(32px, 5vw, 72px)<\/td>\n<\/tr>\n
H2<\/td>\n40-48px<\/td>\n32-40px<\/td>\n28-32px<\/td>\nclamp(28px, 4vw, 48px)<\/td>\n<\/tr>\n
H3<\/td>\n32-36px<\/td>\n28-32px<\/td>\n24-28px<\/td>\nclamp(24px, 3vw, 36px)<\/td>\n<\/tr>\n
H4<\/td>\n24-28px<\/td>\n22-24px<\/td>\n20-22px<\/td>\nclamp(20px, 2.5vw, 28px)<\/td>\n<\/tr>\n
Body \/ P\u00e1rrafo<\/td>\n16-18px<\/td>\n16px<\/td>\n14-16px<\/td>\nclamp(14px, 1.2vw, 18px)<\/td>\n<\/tr>\n
Body Large<\/td>\n18-20px<\/td>\n17-18px<\/td>\n16-17px<\/td>\nclamp(16px, 1.5vw, 20px)<\/td>\n<\/tr>\n
Body Small<\/td>\n14-16px<\/td>\n14px<\/td>\n13-14px<\/td>\nclamp(13px, 1vw, 16px)<\/td>\n<\/tr>\n
Caption<\/td>\n12-14px<\/td>\n12-13px<\/td>\n11-12px<\/td>\nclamp(11px, 0.9vw, 14px)<\/td>\n<\/tr>\n
Label\/Tag<\/td>\n12-14px<\/td>\n12px<\/td>\n11-12px<\/td>\nclamp(11px, 0.9vw, 14px)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/section>\n
\n

UI Tama\u00f1os para espaciado \/ padding<\/h2>\n

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.<\/strong> Cuando estos espacios se ajustan bien a cada pantalla, la experiencia se vuelve m\u00e1s clara, m\u00e1s ordenada y m\u00e1s c\u00f3moda, adem\u00e1s de reforzar la jerarqu\u00eda visual y hacer que la interfaz se sienta m\u00e1s profesional.
\n<\/p>\n

\n\n\n\n\n\n\n\n\n\n\n\n\n
Elemento<\/th>\nDesktop<\/th>\nTablet<\/th>\nMobile<\/th>\n<\/tr>\n<\/thead>\n
Secci\u00f3n Padding<\/td>\n80-120px<\/td>\n60-80px<\/td>\n40-60px<\/td>\n<\/tr>\n
Card Padding<\/td>\n40-60px<\/td>\n30-40px<\/td>\n20-30px<\/td>\n<\/tr>\n
Button Padding (Vertical)<\/td>\n14-18px<\/td>\n12-16px<\/td>\n10-14px<\/td>\n<\/tr>\n
Button Padding (Horizontal)<\/td>\n30-50px<\/td>\n25-40px<\/td>\n20-35px<\/td>\n<\/tr>\n
Input Padding<\/td>\n12-16px<\/td>\n12-14px<\/td>\n10-12px<\/td>\n<\/tr>\n
Container Max Width<\/td>\n1200-1440px<\/td>\n768-1024px<\/td>\n100%<\/td>\n<\/tr>\n
Margen entre elementos<\/td>\n30-40px<\/td>\n24-32px<\/td>\n20-24px<\/td>\n<\/tr>\n
Gap en Grid\/Flex<\/td>\n30-40px<\/td>\n20-30px<\/td>\n15-20px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/section>\n
\n

UI Tama\u00f1o de botones<\/h2>\n

Los botones en UI responsive definen la navegabilidad intuitiva y facilitan las interacciones del usuario<\/strong> en cualquier dispositivo, asegurando que se sientan c\u00f3modos al tacto y visualmente destacados sin importar el tama\u00f1o de pantalla. Un buen dise\u00f1o de botones adapta su altura m\u00ednima, espaciado interno y \u00e1rea t\u00e1ctil para evitar toques accidentales en m\u00f3vil, mantener claridad en tablet y precisi\u00f3n en desktop, lo que mejora la usabilidad general y reduce la frustraci\u00f3n del usuario.
\n<\/p>\n

\n\n\n\n\n\n\n\n\n\n\n
Tipo<\/th>\nDesktop<\/th>\nTablet<\/th>\nMobile<\/th>\n<\/tr>\n<\/thead>\n
Primary Button Height<\/td>\n48-56px<\/td>\n44-48px<\/td>\n44-48px<\/td>\n<\/tr>\n
Secondary Button Height<\/td>\n44-48px<\/td>\n40-44px<\/td>\n40-44px<\/td>\n<\/tr>\n
Small Button Height<\/td>\n36-40px<\/td>\n36-40px<\/td>\n36-40px<\/td>\n<\/tr>\n
Button Font Size<\/td>\n16-18px<\/td>\n15-16px<\/td>\n14-16px<\/td>\n<\/tr>\n
Border Radius<\/td>\n8-12px<\/td>\n8-10px<\/td>\n8-10px<\/td>\n<\/tr>\n
Icon Size en Button<\/td>\n20-24px<\/td>\n18-20px<\/td>\n18-20px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/section>\n
\n

UI Tama\u00f1o para im\u00e1genes y media<\/h2>\n

El tama\u00f1o de im\u00e1genes y media en UI responsive asegura que los elementos visuales carguen r\u00e1pido, ocupen el espacio justo y mantengan proporciones coherentes<\/strong> sin distorsionarse en cualquier dispositivo, evitando que la interfaz se vea desproporcionada o lenta. Al adaptar alturas, anchos y resoluciones seg\u00fan m\u00f3vil, tablet o desktop \u2014usando t\u00e9cnicas como srcset, object-fit y tama\u00f1os fluidos\u2014, se optimiza la experiencia visual, se mejora el rendimiento y se respeta la jerarqu\u00eda del contenido, haciendo que fotos, videos e iconos siempre contribuyan al dise\u00f1o sin robar protagonismo ni generar frustraci\u00f3n.
\n<\/p>\n

\n\n\n\n\n\n\n\n\n\n\n\n
Elemento<\/th>\nDesktop<\/th>\nTablet<\/th>\nMobile<\/th>\n<\/tr>\n<\/thead>\n
Hero Image Height<\/td>\n600-800px<\/td>\n400-600px<\/td>\n300-500px<\/td>\n<\/tr>\n
Card Image Aspect Ratio<\/td>\n16:9 o 4:3<\/td>\n16:9<\/td>\n16:9 o 1:1<\/td>\n<\/tr>\n
Avatar Small<\/td>\n40-48px<\/td>\n36-40px<\/td>\n32-36px<\/td>\n<\/tr>\n
Avatar Medium<\/td>\n64-80px<\/td>\n56-64px<\/td>\n48-56px<\/td>\n<\/tr>\n
Avatar Large<\/td>\n120-150px<\/td>\n100-120px<\/td>\n80-100px<\/td>\n<\/tr>\n
Icon Standard<\/td>\n24-32px<\/td>\n20-24px<\/td>\n20-24px<\/td>\n<\/tr>\n
Icon Large<\/td>\n48-64px<\/td>\n40-48px<\/td>\n36-40px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/section>\n
\n

UI Tama\u00f1o para layouts y grids<\/h2>\n

Los tama\u00f1os de layouts y grids en UI responsive son vitales porque estructuran el contenido de forma flexible y coherente, permitiendo que la interfaz fluya naturalmente<\/strong> en m\u00f3vil, tablet o desktop sin romperse ni generar espacios vac\u00edos ni saturados. Al usar grids adaptativos con columnas variables, breakpoints inteligentes y anchos fluidos \u2014como porcentajes o fracciones en lugar de p\u00edxeles fijos\u2014, se mantiene la jerarqu\u00eda visual, se aprovecha cada p\u00edxel disponible y se asegura una navegaci\u00f3n intuitiva, haciendo que el dise\u00f1o se sienta equilibrado, profesional y c\u00f3modo en cualquier pantalla.
\n<\/p>\n

\n\n\n\n\n\n\n\n\n\n
Elemento<\/th>\nDesktop<\/th>\nTablet<\/th>\nMobile<\/th>\n<\/tr>\n<\/thead>\n
Columnas Grid<\/td>\n12 o 4-6<\/td>\n8 o 2-4<\/td>\n4 o 1-2<\/td>\n<\/tr>\n
Sidebar Width<\/td>\n250-320px<\/td>\n200-250px<\/td>\n100%<\/td>\n<\/tr>\n
Navigation Height<\/td>\n70-90px<\/td>\n60-70px<\/td>\n56-64px<\/td>\n<\/tr>\n
Footer Height<\/td>\nAuto<\/td>\nAuto<\/td>\nAuto<\/td>\n<\/tr>\n
Modal Width<\/td>\n600-800px<\/td>\n90%<\/td>\n95%<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/section>\n
\n

UI Tama\u00f1o para componentes<\/h2>\n

Los componentes como inputs, selects y otros elementos de formulario en UI responsive son clave porque garantizan interacciones fluidas y accesibles<\/strong> en cualquier dispositivo, adaptando su altura m\u00ednima, ancho y espaciado para que sean f\u00e1ciles de tocar o clicar sin errores. Al escalar estos elementos \u2014con tama\u00f1os t\u00e1ctiles de al menos 44x44px en m\u00f3vil, campos legibles en tablet y precisi\u00f3n en desktop\u2014, se evita la frustraci\u00f3n 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.
\n<\/p>\n

\n\n\n\n\n\n\n\n\n\n\n\n
Elemento<\/th>\nDesktop<\/th>\nTablet<\/th>\nMobile<\/th>\n<\/tr>\n<\/thead>\n
Input Height<\/td>\n44-52px<\/td>\n42-48px<\/td>\n44-48px<\/td>\n<\/tr>\n
Select\/Dropdown Height<\/td>\n44-52px<\/td>\n42-48px<\/td>\n44-48px<\/td>\n<\/tr>\n
Checkbox\/Radio Size<\/td>\n20-24px<\/td>\n18-20px<\/td>\n20-24px<\/td>\n<\/tr>\n
Toggle Switch Width<\/td>\n48-56px<\/td>\n44-48px<\/td>\n44-48px<\/td>\n<\/tr>\n
Progress Bar Height<\/td>\n6-10px<\/td>\n6-8px<\/td>\n6-8px<\/td>\n<\/tr>\n
Badge\/Chip Height<\/td>\n24-32px<\/td>\n22-28px<\/td>\n22-28px<\/td>\n<\/tr>\n
Tooltip Max Width<\/td>\n250-300px<\/td>\n200-250px<\/td>\n200px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/section>\n

Breakpoints Est\u00e1ndar:<\/h2>\n

Estos son los puntos de corte m\u00e1s utilizados en la actualidad para distintas resoluciones de pantalla:<\/p>\n

css<\/h3>\n
\n\/* Mobile First *\/
\n\/* Mobile: 320px – 767px (default) *\/<\/p>\n

\/* Tablet *\/
\n@media(min-width: 768px) { }<\/p>\n

\/* Desktop Small *\/
\n@media (min-width: 1024px) { }<\/p>\n

\/* Desktop Large *\/
\n@media (min-width: 1440px) { }<\/p>\n

\/* Desktop XL *\/
\n@media (min-width: 1920px) { }\n<\/p><\/div>\n

De todos modos, tanto este como otros post, debes tomarlos como recomendaciones, no tienes que usar exactamente estas medidas, porque cada dise\u00f1o es un mundo, pero \u00fasalo para al menos tener unas referencias y proporciones, que si pueden ayudar a tus dise\u00f1os.<\/p>\n<\/article>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"

Elegir bien los tama\u00f1os de todos los componentes de un dise\u00f1o (tipograf\u00eda, padding, botones, im\u00e1genes, …) en una interfaz parece un detalle peque\u00f1o, pero cambia por completo la experiencia. <\/p>\n","protected":false},"author":1,"featured_media":603,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"categories":[28,4],"tags":[42,89,84,88,46,87,86,55,85,21,10],"class_list":["post-567","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tipografia","category-ux-ui","tag-botones","tag-breakpoints","tag-espaciado","tag-grids","tag-imagenes","tag-layouts","tag-media","tag-padding","tag-tamano","tag-tamano-fuentes","tag-tipografias"],"yoast_head":"\nGu\u00eda Completa de Tama\u00f1os UI Responsive - Gloobs, dise\u00f1o, UX, UI<\/title>\n<meta name=\"description\" content=\"La IA no te va a hacer el trabajo de dise\u00f1ador, pero s\u00ed puede quitarte much\u00edsimas tareas mec\u00e1nicas si sabes qu\u00e9 pedirle y c\u00f3mo hacerlo. En este art\u00edculo vamos a ver c\u00f3mo plantear prompts para conseguir copies, nombres de secciones y estructuras de p\u00e1gina realmente utilizables en tus proyectos de dise\u00f1o digital.Elegir bien los tama\u00f1os de todos los componentes de un dise\u00f1o (tipograf\u00eda, padding, botones, im\u00e1genes, ...) en una interfaz parece un detalle peque\u00f1o, pero cambia por completo la experiencia.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gu\u00eda Completa de Tama\u00f1os UI Responsive - Gloobs, dise\u00f1o, UX, UI\" \/>\n<meta property=\"og:description\" content=\"La IA no te va a hacer el trabajo de dise\u00f1ador, pero s\u00ed puede quitarte much\u00edsimas tareas mec\u00e1nicas si sabes qu\u00e9 pedirle y c\u00f3mo hacerlo. En este art\u00edculo vamos a ver c\u00f3mo plantear prompts para conseguir copies, nombres de secciones y estructuras de p\u00e1gina realmente utilizables en tus proyectos de dise\u00f1o digital.Elegir bien los tama\u00f1os de todos los componentes de un dise\u00f1o (tipograf\u00eda, padding, botones, im\u00e1genes, ...) en una interfaz parece un detalle peque\u00f1o, pero cambia por completo la experiencia.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/\" \/>\n<meta property=\"og:site_name\" content=\"Gloobs, dise\u00f1o, UX, UI\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-13T11:49:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-09T14:59:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/04\/ui-sizes.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"494\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/guia-completa-de-tamanos-ui-responsive\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/guia-completa-de-tamanos-ui-responsive\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/#\\\/schema\\\/person\\\/e610ada66c75e5e6d72b316f3891e967\"},\"headline\":\"Gu\u00eda Completa de Tama\u00f1os UI Responsive\",\"datePublished\":\"2026-04-13T11:49:11+00:00\",\"dateModified\":\"2026-06-09T14:59:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/guia-completa-de-tamanos-ui-responsive\\\/\"},\"wordCount\":1276,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/#\\\/schema\\\/person\\\/e610ada66c75e5e6d72b316f3891e967\"},\"image\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/guia-completa-de-tamanos-ui-responsive\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/ui-sizes.webp\",\"keywords\":[\"botones\",\"Breakpoints\",\"espaciado\",\"grids\",\"im\u00e1genes\",\"layouts\",\"media\",\"padding\",\"tama\u00f1o\",\"tama\u00f1o fuentes\",\"tipograf\u00edas\"],\"articleSection\":[\"Tipograf\u00eda\",\"UX \\\/ UI\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/guia-completa-de-tamanos-ui-responsive\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/guia-completa-de-tamanos-ui-responsive\\\/\",\"url\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/guia-completa-de-tamanos-ui-responsive\\\/\",\"name\":\"Gu\u00eda Completa de Tama\u00f1os UI Responsive - Gloobs, dise\u00f1o, UX, UI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/guia-completa-de-tamanos-ui-responsive\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/guia-completa-de-tamanos-ui-responsive\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/ui-sizes.webp\",\"datePublished\":\"2026-04-13T11:49:11+00:00\",\"dateModified\":\"2026-06-09T14:59:58+00:00\",\"description\":\"La IA no te va a hacer el trabajo de dise\u00f1ador, pero s\u00ed puede quitarte much\u00edsimas tareas mec\u00e1nicas si sabes qu\u00e9 pedirle y c\u00f3mo hacerlo. En este art\u00edculo vamos a ver c\u00f3mo plantear prompts para conseguir copies, nombres de secciones y estructuras de p\u00e1gina realmente utilizables en tus proyectos de dise\u00f1o digital.Elegir bien los tama\u00f1os de todos los componentes de un dise\u00f1o (tipograf\u00eda, padding, botones, im\u00e1genes, ...) en una interfaz parece un detalle peque\u00f1o, pero cambia por completo la experiencia.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/guia-completa-de-tamanos-ui-responsive\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/guia-completa-de-tamanos-ui-responsive\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/guia-completa-de-tamanos-ui-responsive\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/ui-sizes.webp\",\"contentUrl\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/ui-sizes.webp\",\"width\":1440,\"height\":494},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/guia-completa-de-tamanos-ui-responsive\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gu\u00eda Completa de Tama\u00f1os UI Responsive\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/\",\"name\":\"Gloobs, dise\u00f1o digital, UX, UI\",\"description\":\"Un blog sobre dise\u00f1o UX\\\/UI que baja a tierra los conceptos de experiencia de usuario y dise\u00f1o de interfaces con ejemplos reales, gu\u00edas pr\u00e1cticas y an\u00e1lisis de tendencias. Aqu\u00ed encontrar\u00e1s recursos para crear productos digitales m\u00e1s claros, bonitos y efectivos: desde estructuras de p\u00e1gina y patrones de interacci\u00f3n hasta tipograf\u00eda, color, microcopy y casos de estudio completos orientados a mejorar la usabilidad y las conversiones.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/#\\\/schema\\\/person\\\/e610ada66c75e5e6d72b316f3891e967\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/#\\\/schema\\\/person\\\/e610ada66c75e5e6d72b316f3891e967\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2fe738fddd22191bad283fef17e71182f7d794f1a3e868319cf08c73d684075e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2fe738fddd22191bad283fef17e71182f7d794f1a3e868319cf08c73d684075e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2fe738fddd22191bad283fef17e71182f7d794f1a3e868319cf08c73d684075e?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2fe738fddd22191bad283fef17e71182f7d794f1a3e868319cf08c73d684075e?s=96&d=mm&r=g\"},\"sameAs\":[\"https:\\\/\\\/www.gloobs.com\\\/blog\"],\"url\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gu\u00eda Completa de Tama\u00f1os UI Responsive - Gloobs, dise\u00f1o, UX, UI","description":"La IA no te va a hacer el trabajo de dise\u00f1ador, pero s\u00ed puede quitarte much\u00edsimas tareas mec\u00e1nicas si sabes qu\u00e9 pedirle y c\u00f3mo hacerlo. En este art\u00edculo vamos a ver c\u00f3mo plantear prompts para conseguir copies, nombres de secciones y estructuras de p\u00e1gina realmente utilizables en tus proyectos de dise\u00f1o digital.Elegir bien los tama\u00f1os de todos los componentes de un dise\u00f1o (tipograf\u00eda, padding, botones, im\u00e1genes, ...) en una interfaz parece un detalle peque\u00f1o, pero cambia por completo la experiencia.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/","og_locale":"es_ES","og_type":"article","og_title":"Gu\u00eda Completa de Tama\u00f1os UI Responsive - Gloobs, dise\u00f1o, UX, UI","og_description":"La IA no te va a hacer el trabajo de dise\u00f1ador, pero s\u00ed puede quitarte much\u00edsimas tareas mec\u00e1nicas si sabes qu\u00e9 pedirle y c\u00f3mo hacerlo. En este art\u00edculo vamos a ver c\u00f3mo plantear prompts para conseguir copies, nombres de secciones y estructuras de p\u00e1gina realmente utilizables en tus proyectos de dise\u00f1o digital.Elegir bien los tama\u00f1os de todos los componentes de un dise\u00f1o (tipograf\u00eda, padding, botones, im\u00e1genes, ...) en una interfaz parece un detalle peque\u00f1o, pero cambia por completo la experiencia.","og_url":"https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/","og_site_name":"Gloobs, dise\u00f1o, UX, UI","article_published_time":"2026-04-13T11:49:11+00:00","article_modified_time":"2026-06-09T14:59:58+00:00","og_image":[{"width":1440,"height":494,"url":"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/04\/ui-sizes.webp","type":"image\/webp"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"admin","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/#article","isPartOf":{"@id":"https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/"},"author":{"name":"admin","@id":"https:\/\/www.gloobs.com\/blog\/#\/schema\/person\/e610ada66c75e5e6d72b316f3891e967"},"headline":"Gu\u00eda Completa de Tama\u00f1os UI Responsive","datePublished":"2026-04-13T11:49:11+00:00","dateModified":"2026-06-09T14:59:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/"},"wordCount":1276,"commentCount":0,"publisher":{"@id":"https:\/\/www.gloobs.com\/blog\/#\/schema\/person\/e610ada66c75e5e6d72b316f3891e967"},"image":{"@id":"https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/04\/ui-sizes.webp","keywords":["botones","Breakpoints","espaciado","grids","im\u00e1genes","layouts","media","padding","tama\u00f1o","tama\u00f1o fuentes","tipograf\u00edas"],"articleSection":["Tipograf\u00eda","UX \/ UI"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/","url":"https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/","name":"Gu\u00eda Completa de Tama\u00f1os UI Responsive - Gloobs, dise\u00f1o, UX, UI","isPartOf":{"@id":"https:\/\/www.gloobs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/#primaryimage"},"image":{"@id":"https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/04\/ui-sizes.webp","datePublished":"2026-04-13T11:49:11+00:00","dateModified":"2026-06-09T14:59:58+00:00","description":"La IA no te va a hacer el trabajo de dise\u00f1ador, pero s\u00ed puede quitarte much\u00edsimas tareas mec\u00e1nicas si sabes qu\u00e9 pedirle y c\u00f3mo hacerlo. En este art\u00edculo vamos a ver c\u00f3mo plantear prompts para conseguir copies, nombres de secciones y estructuras de p\u00e1gina realmente utilizables en tus proyectos de dise\u00f1o digital.Elegir bien los tama\u00f1os de todos los componentes de un dise\u00f1o (tipograf\u00eda, padding, botones, im\u00e1genes, ...) en una interfaz parece un detalle peque\u00f1o, pero cambia por completo la experiencia.","breadcrumb":{"@id":"https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/#primaryimage","url":"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/04\/ui-sizes.webp","contentUrl":"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/04\/ui-sizes.webp","width":1440,"height":494},{"@type":"BreadcrumbList","@id":"https:\/\/www.gloobs.com\/blog\/guia-completa-de-tamanos-ui-responsive\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.gloobs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Gu\u00eda Completa de Tama\u00f1os UI Responsive"}]},{"@type":"WebSite","@id":"https:\/\/www.gloobs.com\/blog\/#website","url":"https:\/\/www.gloobs.com\/blog\/","name":"Gloobs, dise\u00f1o digital, UX, UI","description":"Un blog sobre dise\u00f1o UX\/UI que baja a tierra los conceptos de experiencia de usuario y dise\u00f1o de interfaces con ejemplos reales, gu\u00edas pr\u00e1cticas y an\u00e1lisis de tendencias. Aqu\u00ed encontrar\u00e1s recursos para crear productos digitales m\u00e1s claros, bonitos y efectivos: desde estructuras de p\u00e1gina y patrones de interacci\u00f3n hasta tipograf\u00eda, color, microcopy y casos de estudio completos orientados a mejorar la usabilidad y las conversiones.","publisher":{"@id":"https:\/\/www.gloobs.com\/blog\/#\/schema\/person\/e610ada66c75e5e6d72b316f3891e967"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.gloobs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/www.gloobs.com\/blog\/#\/schema\/person\/e610ada66c75e5e6d72b316f3891e967","name":"admin","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/2fe738fddd22191bad283fef17e71182f7d794f1a3e868319cf08c73d684075e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2fe738fddd22191bad283fef17e71182f7d794f1a3e868319cf08c73d684075e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2fe738fddd22191bad283fef17e71182f7d794f1a3e868319cf08c73d684075e?s=96&d=mm&r=g","caption":"admin"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/2fe738fddd22191bad283fef17e71182f7d794f1a3e868319cf08c73d684075e?s=96&d=mm&r=g"},"sameAs":["https:\/\/www.gloobs.com\/blog"],"url":"https:\/\/www.gloobs.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/posts\/567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/comments?post=567"}],"version-history":[{"count":20,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/posts\/567\/revisions"}],"predecessor-version":[{"id":1309,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/posts\/567\/revisions\/1309"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/media\/603"}],"wp:attachment":[{"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/media?parent=567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/categories?post=567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/tags?post=567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}