{"id":123,"date":"2026-04-06T09:26:57","date_gmt":"2026-04-06T09:26:57","guid":{"rendered":"https:\/\/www.gloobs.com\/blog\/?p=123"},"modified":"2026-05-29T10:57:26","modified_gmt":"2026-05-29T10:57:26","slug":"tendencias-emparejamiento-de-tipografias-con-css","status":"publish","type":"post","link":"https:\/\/www.gloobs.com\/blog\/tendencias-emparejamiento-de-tipografias-con-css\/","title":{"rendered":"Tendencias, emparejamiento de tipograf\u00edas con CSS"},"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 global_colors_info=\u00bb{}\u00bb]<\/p>\n

\n
\n

Titulares combinando distintas tipograf\u00edas con CSS<\/h1>\n

Combinar dos tipograf\u00edas en un mismo titular puede ayudarte a crear una jerarqu\u00eda visual clara entre t\u00edtulo y claim. En este art\u00edculo vemos cu\u00e1ndo funciona bien a nivel de dise\u00f1o y c\u00f3mo implementarlo con CSS de forma responsive.<\/p>\n

Por Omar Benyakhlef Dom\u00ednguez, dise\u00f1ador y creativo digital.<\/small><\/p>\n<\/header>\n

\n

Por qu\u00e9 combinar distintas tipograf\u00edas en un titular<\/h2>\n

En el encabezado de este blog he combinado dos tipos distintos para construir un titular y su subt\u00edtulo. En lugar de colocar una l\u00ednea encima de la otra sin m\u00e1s, he \u201cmontado\u201d una tipograf\u00eda sobre la otra, buscando equilibrio, legibilidad y una jerarqu\u00eda visual clara entre las dos frases.<\/p>\n

En este post te explico, primero, por qu\u00e9 puede funcionar este tipo de titulares con tipograf\u00edas combinadas<\/strong> y, despu\u00e9s, c\u00f3mo construirlos con CSS<\/strong> de manera que sigan siendo legibles y responsive.<\/p>\n<\/section>\n

\n

La idea de dise\u00f1o: estructura vs. energ\u00eda<\/h2>\n

La composici\u00f3n separa, por un lado, una tipograf\u00eda condensada y racional para \u201cDISE\u00d1O UX\/UI GLOOBS\u201d y, por otro, una tipograf\u00eda script gestual para el claim. Juntas crean un contraste claro entre \u201cestructura\u201d y \u201cenerg\u00eda\u201d.<\/p>\n

\u00bfPor qu\u00e9 estas tipograf\u00edas?<\/h3>\n
    \n >Bloque izquierdo:<\/strong> sans serif condensada, limpia y vertical. Transmite orden, precisi\u00f3n y profesionalidad. Es una buena \u201cvoz principal\u201d para tu marca.<\/li>\n

    >Bloque derecho:<\/strong> script o handwritten con ritmo irregular. Aporta cercan\u00eda, creatividad y sensaci\u00f3n de trabajo hecho a mano o enfoque m\u00e1s humano.<\/li>\n<\/ul>\n

    Aqu\u00ed el contraste no es tanto serif\/sans como geom\u00e9trica\/handwritten. Funciona porque las dos familias son muy diferentes en textura, ritmo y personalidad; se distinguen f\u00e1cilmente y cada una cumple un rol concreto [web:75][web:84].<\/p>\n<\/section>\n

    \n

    Jerarqu\u00eda y lectura del titular<\/h2>\n

    El ojo lee primero \u201cDISE\u00d1O UX\/UI GLOOBS\u201d, porque tiene m\u00e1s peso, mayor tama\u00f1o y una estructura en bloques. Despu\u00e9s entra en el claim manuscrito. De este modo, la jerarqu\u00eda queda muy clara.<\/p>\n

    Al estar el script alineado a la derecha y ligeramente escalonado, se percibe como un comentario a\u00f1adido, casi un \u201capunte a mano\u201d sobre lo que hago. Eso refuerza su papel de claim. Si hubiera colocado los dos textos uno debajo del otro, el resultado ser\u00eda mucho m\u00e1s plano.<\/p>\n

    El bloque manuscrito es relativamente largo, pero la ruptura en varias l\u00edneas cortas evita que se convierta en una mancha ilegible.<\/p>\n<\/section>\n

    \n

    Composici\u00f3n, espacio y legibilidad<\/h2>\n

    El gran bloque vertical de palo seco a la izquierda funciona como \u201ccolumna vertebral\u201d del conjunto, mientras que el script ocupa el hueco de la derecha para equilibrar el peso visual.<\/p>\n

    El espacio en blanco alrededor del titular es generoso. Eso hace que la mezcla de fuentes respire y que no se sienta ca\u00f3tica, sino intencionada.<\/p>\n

    Aspectos a vigilar<\/h3>\n
      \n >Las dos tipograf\u00edas deben reconocerse bien y tener roles diferentes.<\/li>\n

      >El layout tiene que dar espacio suficiente a cada bloque para que no compitan entre s\u00ed.<\/li>\n

      >Hay que cuidar la legibilidad del script en tama\u00f1os peque\u00f1os y, si lo vas a usar mucho, definir una versi\u00f3n m\u00e1s compacta para usos reducidos.<\/li>\n<\/ul>\n<\/section>\n

      \n

      C\u00f3mo construir este tipo de titulares con CSS<\/h2>\n

      Para conseguir este efecto utilizo un contenedor principal con de>position: relative<\/code> y dos bloques de texto solapados: el titular principal y el claim manuscrito. Ambos usan de>clamp()<\/code> para que el tama\u00f1o de fuente sea fluido en funci\u00f3n del viewport.<\/p>\n<\/section>\n

      [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb1_2,1_2″ disabled_on=\u00bboff|off|off\u00bb _builder_version=\u00bb4.27.5″ _module_preset=\u00bbdefault\u00bb width=\u00bb100%\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb1_2″ _builder_version=\u00bb4.27.5″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.27.5″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n

      CSS<\/h3>\n
      \n

      <style>
      .hero-heading {
      position: relative; }<\/p>\n

      .hero-main {
      display: inline-block;
      font-size: clamp(2.75rem, 4.5rem, 4.75rem);
      line-height: 0.9;
      font-weight: normal; }<\/p>\n

      .hero-script {
      position: absolute;
      left: 13rem;
      top: 5rem;
      font-family: ‘Summertime-regular’, ‘Summertime’, cursive;
      font-size: clamp(1.5rem, 2rem, 2.25rem);
      line-height: 0.8;
      font-weight: normal; }
      <\/style><\/p>\n<\/div>\n

      [\/et_pb_text][\/et_pb_column][et_pb_column type=\u00bb1_2″ _builder_version=\u00bb4.27.5″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.27.5″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n

      HTML<\/h3>\n
      <div class=’hero-heading’>
      <h1>
      <span class=’hero-main’>Dise\u00f1o UX\/UI<br>Gloobs<\/span>
      <span class=’hero-script’>TENDENCIAS<br>
      Y EXPERIENCIAS DIGITALES<br>QUE FUNCIONAN<\/span>
      <\/h1>
      <\/div><\/div>\n

      [\/et_pb_text][\/et_pb_column][\/et_pb_row][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 hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n

      \n

      C\u00f3mo funciona cada bloque<\/h2>\n

      1. El contenedor principal<\/h3>\n

      El contenedor de>.hero-heading<\/code> act\u00faa como marco de la composici\u00f3n. Al darle de>position: relative<\/code>, puedo colocar el bloque manuscrito con de>position: absolute<\/code> dentro, sin que se salga del \u00e1rea del titular.<\/p>\n

      2. El bloque principal del titular<\/h3>\n

      El primer de><span><\/code>, de>.hero-main<\/code>, le da estructura al titular:<\/p>\n

        \n >El uso de de>clamp()<\/code> hace que el tama\u00f1o del titular sea fluido entre un m\u00ednimo, un valor ideal basado en el viewport y un m\u00e1ximo [web:70][web:71].<\/li>\n

        >de>line-height: 0.9<\/code> compacta las l\u00edneas \u201cDise\u00f1o UX\/UI\u201d y \u201cGloobs\u201d para que se lean como un bloque s\u00f3lido.<\/li>\n

        >de>display: inline-block<\/code> permite tratar ese texto como una pieza independiente sobre la que luego \u201capoyo\u201d el manuscrito.<\/li>\n<\/ul>\n

        3. El bloque manuscrito<\/h3>\n

        El segundo de><span><\/code>, de>.hero-script<\/code>, se coloca por encima usando de>position: absolute<\/code>:<\/p>\n

          \n >de>position: absolute<\/code> lo saca del flujo normal y permite ubicarlo exactamente donde quiero respecto al contenedor de>.hero-heading<\/code>.<\/li>\n

          >Los valores de de>left<\/code> y de>top<\/code> determinan c\u00f3mo se abrazan ambos bloques. Ajust\u00e1ndolos cambias por completo la sensaci\u00f3n de equilibrio.<\/li>\n

          >De nuevo, de>clamp()<\/code> hace que el script escale con la pantalla, pero siempre algo m\u00e1s peque\u00f1o que el titular principal.<\/li>\n<\/ul>\n<\/section>\n

          \n

          Hacerlo responsive<\/h2>\n

          Tal y como est\u00e1, el solapamiento funciona muy bien en desktop. Sin embargo, en m\u00f3viles el de>left<\/code>\/de>top<\/code> fijo puede hacer que el script se solape demasiado o se salga del contenedor.<\/p>\n

          Para evitarlo, puedes cambiar el comportamiento del script en pantallas peque\u00f1as y colocarlo debajo del titular principal:<\/p>\n<\/section>\n

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

          Titulares chulos combinando distintas tipograf\u00edas con CSS. En el titular de este blog, habr\u00e1s visto que he combinado dos tipos distintas para crear un titular y su subt\u00edtulo. En lugar de hacerlo aburrido, he \u00abmontado\u00bb una tipo sobre la otra, pero buscando equilibrio, legibilidad y con una jerarqu\u00eda visual clara.<\/p>\n","protected":false},"author":1,"featured_media":125,"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":[7,8,28],"tags":[9,10],"class_list":["post-123","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hazlo-tu","category-tendencias","category-tipografia","tag-css","tag-tipografias"],"yoast_head":"\nTendencias, emparejamiento de tipograf\u00edas con CSS - Gloobs, dise\u00f1o, UX, UI<\/title>\n<meta name=\"description\" content=\"En el titular de este blog, habr\u00e1s visto que he combinado dos tipos distintas para crear un titular y su subt\u00edtulo. En lugar de hacerlo aburrido, he \u00abmontado\u00bb una tipo sobre la otra, pero buscando equilibrio, legibilidad y con una jerarqu\u00eda visual clara que separa las dos frases.En este post te voy a explicar por qu\u00e9 puede funcionar este tipo de titulares y por otro lado, te explicar\u00e9 c\u00f3mo hacerlo con CSS \u00a1y que adem\u00e1s sea responsive!\" \/>\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\/tendencias-emparejamiento-de-tipografias-con-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tendencias, emparejamiento de tipograf\u00edas con CSS - Gloobs, dise\u00f1o, UX, UI\" \/>\n<meta property=\"og:description\" content=\"En el titular de este blog, habr\u00e1s visto que he combinado dos tipos distintas para crear un titular y su subt\u00edtulo. En lugar de hacerlo aburrido, he \u00abmontado\u00bb una tipo sobre la otra, pero buscando equilibrio, legibilidad y con una jerarqu\u00eda visual clara que separa las dos frases.En este post te voy a explicar por qu\u00e9 puede funcionar este tipo de titulares y por otro lado, te explicar\u00e9 c\u00f3mo hacerlo con CSS \u00a1y que adem\u00e1s sea responsive!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gloobs.com\/blog\/tendencias-emparejamiento-de-tipografias-con-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Gloobs, dise\u00f1o, UX, UI\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-06T09:26:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-29T10:57:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/04\/css-distintas-fuentes.png\" \/>\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\/png\" \/>\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=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/tendencias-emparejamiento-de-tipografias-con-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/tendencias-emparejamiento-de-tipografias-con-css\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/#\\\/schema\\\/person\\\/e610ada66c75e5e6d72b316f3891e967\"},\"headline\":\"Tendencias, emparejamiento de tipograf\u00edas con CSS\",\"datePublished\":\"2026-04-06T09:26:57+00:00\",\"dateModified\":\"2026-05-29T10:57:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/tendencias-emparejamiento-de-tipografias-con-css\\\/\"},\"wordCount\":1166,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/#\\\/schema\\\/person\\\/e610ada66c75e5e6d72b316f3891e967\"},\"image\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/tendencias-emparejamiento-de-tipografias-con-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/css-distintas-fuentes.png\",\"keywords\":[\"CSS\",\"tipograf\u00edas\"],\"articleSection\":[\"Hazlo t\u00fa\",\"Tendencias\",\"Tipograf\u00eda\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/tendencias-emparejamiento-de-tipografias-con-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/tendencias-emparejamiento-de-tipografias-con-css\\\/\",\"url\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/tendencias-emparejamiento-de-tipografias-con-css\\\/\",\"name\":\"Tendencias, emparejamiento de tipograf\u00edas con CSS - Gloobs, dise\u00f1o, UX, UI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/tendencias-emparejamiento-de-tipografias-con-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/tendencias-emparejamiento-de-tipografias-con-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/css-distintas-fuentes.png\",\"datePublished\":\"2026-04-06T09:26:57+00:00\",\"dateModified\":\"2026-05-29T10:57:26+00:00\",\"description\":\"En el titular de este blog, habr\u00e1s visto que he combinado dos tipos distintas para crear un titular y su subt\u00edtulo. En lugar de hacerlo aburrido, he \u00abmontado\u00bb una tipo sobre la otra, pero buscando equilibrio, legibilidad y con una jerarqu\u00eda visual clara que separa las dos frases.En este post te voy a explicar por qu\u00e9 puede funcionar este tipo de titulares y por otro lado, te explicar\u00e9 c\u00f3mo hacerlo con CSS \u00a1y que adem\u00e1s sea responsive!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/tendencias-emparejamiento-de-tipografias-con-css\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/tendencias-emparejamiento-de-tipografias-con-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/tendencias-emparejamiento-de-tipografias-con-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/css-distintas-fuentes.png\",\"contentUrl\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/css-distintas-fuentes.png\",\"width\":1440,\"height\":494},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/tendencias-emparejamiento-de-tipografias-con-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tendencias, emparejamiento de tipograf\u00edas con CSS\"}]},{\"@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":"Tendencias, emparejamiento de tipograf\u00edas con CSS - Gloobs, dise\u00f1o, UX, UI","description":"En el titular de este blog, habr\u00e1s visto que he combinado dos tipos distintas para crear un titular y su subt\u00edtulo. En lugar de hacerlo aburrido, he \u00abmontado\u00bb una tipo sobre la otra, pero buscando equilibrio, legibilidad y con una jerarqu\u00eda visual clara que separa las dos frases.En este post te voy a explicar por qu\u00e9 puede funcionar este tipo de titulares y por otro lado, te explicar\u00e9 c\u00f3mo hacerlo con CSS \u00a1y que adem\u00e1s sea responsive!","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\/tendencias-emparejamiento-de-tipografias-con-css\/","og_locale":"es_ES","og_type":"article","og_title":"Tendencias, emparejamiento de tipograf\u00edas con CSS - Gloobs, dise\u00f1o, UX, UI","og_description":"En el titular de este blog, habr\u00e1s visto que he combinado dos tipos distintas para crear un titular y su subt\u00edtulo. En lugar de hacerlo aburrido, he \u00abmontado\u00bb una tipo sobre la otra, pero buscando equilibrio, legibilidad y con una jerarqu\u00eda visual clara que separa las dos frases.En este post te voy a explicar por qu\u00e9 puede funcionar este tipo de titulares y por otro lado, te explicar\u00e9 c\u00f3mo hacerlo con CSS \u00a1y que adem\u00e1s sea responsive!","og_url":"https:\/\/www.gloobs.com\/blog\/tendencias-emparejamiento-de-tipografias-con-css\/","og_site_name":"Gloobs, dise\u00f1o, UX, UI","article_published_time":"2026-04-06T09:26:57+00:00","article_modified_time":"2026-05-29T10:57:26+00:00","og_image":[{"width":1440,"height":494,"url":"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/04\/css-distintas-fuentes.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"admin","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.gloobs.com\/blog\/tendencias-emparejamiento-de-tipografias-con-css\/#article","isPartOf":{"@id":"https:\/\/www.gloobs.com\/blog\/tendencias-emparejamiento-de-tipografias-con-css\/"},"author":{"name":"admin","@id":"https:\/\/www.gloobs.com\/blog\/#\/schema\/person\/e610ada66c75e5e6d72b316f3891e967"},"headline":"Tendencias, emparejamiento de tipograf\u00edas con CSS","datePublished":"2026-04-06T09:26:57+00:00","dateModified":"2026-05-29T10:57:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.gloobs.com\/blog\/tendencias-emparejamiento-de-tipografias-con-css\/"},"wordCount":1166,"commentCount":0,"publisher":{"@id":"https:\/\/www.gloobs.com\/blog\/#\/schema\/person\/e610ada66c75e5e6d72b316f3891e967"},"image":{"@id":"https:\/\/www.gloobs.com\/blog\/tendencias-emparejamiento-de-tipografias-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/04\/css-distintas-fuentes.png","keywords":["CSS","tipograf\u00edas"],"articleSection":["Hazlo t\u00fa","Tendencias","Tipograf\u00eda"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.gloobs.com\/blog\/tendencias-emparejamiento-de-tipografias-con-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.gloobs.com\/blog\/tendencias-emparejamiento-de-tipografias-con-css\/","url":"https:\/\/www.gloobs.com\/blog\/tendencias-emparejamiento-de-tipografias-con-css\/","name":"Tendencias, emparejamiento de tipograf\u00edas con CSS - Gloobs, dise\u00f1o, UX, UI","isPartOf":{"@id":"https:\/\/www.gloobs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.gloobs.com\/blog\/tendencias-emparejamiento-de-tipografias-con-css\/#primaryimage"},"image":{"@id":"https:\/\/www.gloobs.com\/blog\/tendencias-emparejamiento-de-tipografias-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/04\/css-distintas-fuentes.png","datePublished":"2026-04-06T09:26:57+00:00","dateModified":"2026-05-29T10:57:26+00:00","description":"En el titular de este blog, habr\u00e1s visto que he combinado dos tipos distintas para crear un titular y su subt\u00edtulo. En lugar de hacerlo aburrido, he \u00abmontado\u00bb una tipo sobre la otra, pero buscando equilibrio, legibilidad y con una jerarqu\u00eda visual clara que separa las dos frases.En este post te voy a explicar por qu\u00e9 puede funcionar este tipo de titulares y por otro lado, te explicar\u00e9 c\u00f3mo hacerlo con CSS \u00a1y que adem\u00e1s sea responsive!","breadcrumb":{"@id":"https:\/\/www.gloobs.com\/blog\/tendencias-emparejamiento-de-tipografias-con-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.gloobs.com\/blog\/tendencias-emparejamiento-de-tipografias-con-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.gloobs.com\/blog\/tendencias-emparejamiento-de-tipografias-con-css\/#primaryimage","url":"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/04\/css-distintas-fuentes.png","contentUrl":"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/04\/css-distintas-fuentes.png","width":1440,"height":494},{"@type":"BreadcrumbList","@id":"https:\/\/www.gloobs.com\/blog\/tendencias-emparejamiento-de-tipografias-con-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.gloobs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tendencias, emparejamiento de tipograf\u00edas con CSS"}]},{"@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\/123","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=123"}],"version-history":[{"count":43,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/posts\/123\/revisions"}],"predecessor-version":[{"id":549,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/posts\/123\/revisions\/549"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/media\/125"}],"wp:attachment":[{"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/media?parent=123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/categories?post=123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/tags?post=123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}