{"id":263569,"date":"2023-11-22T06:30:00","date_gmt":"2023-11-22T03:30:00","guid":{"rendered":"https:\/\/inform.click\/25-sitios-web-que-hacen-un-uso-inspirador-de-la-tipografia\/"},"modified":"2023-11-22T07:09:00","modified_gmt":"2023-11-22T04:09:00","slug":"25-sitios-web-que-hacen-un-uso-inspirador-de-la-tipografia","status":"publish","type":"post","link":"https:\/\/inform.click\/es\/25-sitios-web-que-hacen-un-uso-inspirador-de-la-tipografia\/","title":{"rendered":"25 sitios web que hacen un uso inspirador de la tipograf\u00eda"},"content":{"rendered":"

\n Todos los sitios web utilizan tipograf\u00eda, pero la gran mayor\u00eda de ellos no hacen nada particularmente especial con ella.\n<\/p>\n

\n De hecho, muchos de los sitios web que visito a diario hacen un uso bastante pobre de la tipograf\u00eda (en mi opini\u00f3n), \u00bfpor qu\u00e9 siempre siento una sensaci\u00f3n de deleite abrumador cuando me encuentro con un sitio web que realmente ha ido m\u00e1s all\u00e1? milla en lo que a tipograf\u00eda se refiere.\n<\/p>\n

\n Entonces, si est\u00e1 harto de ver \u00abArial\u00bb y \u00abTimes New Roman\u00bb (\u00a1lo s\u00e9!), o si necesita inspiraci\u00f3n tipogr\u00e1fica para un proyecto futuro, aqu\u00ed hay algunos sitios que hacen un excelente uso de la tipograf\u00eda. :\n<\/p>\n

\n 1 Grupo V02
\n<\/h4>\n

\n <\/a>\n<\/p>\n

\n V02 Group hace un uso interesante de la tipograf\u00eda en su sitio web en el sentido de que algunas partes de ella se ocultan detr\u00e1s de la imagen del corredor.\n<\/p>\n

\n Esto ayuda a crear una sensaci\u00f3n de profundidad y retrata una imagen de la tipograf\u00eda flotando en el aire.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Crimson Text, Futura\n<\/p>\n

\n 2 \u00bfCu\u00e1l es tu futuro?
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n \u00ab\u00bfCu\u00e1l es tu futuro?\u00bb es un sitio web bellamente dise\u00f1ado que utiliza tipograf\u00eda con moderaci\u00f3n.\n<\/p>\n

\n El dise\u00f1o en su conjunto es bastante minimalista y \u00abplano\u00bb, lo que probablemente sea la raz\u00f3n detr\u00e1s de una elecci\u00f3n de fuente tan aventurera (Baron Neue) para el tipo grande.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Baron Neue, Georgia\n<\/p>\n

\n 3 Jacob Grubbe
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Jacob Grubbe ha creado aqu\u00ed un sitio web excepcionalmente simplista, en el que la tipograf\u00eda es el punto de enfoque principal: a medida que escribe, el sitio web se revela.\n<\/p>\n

\n Jacob solo utiliza un tipo de letra en este dise\u00f1o (Roboto) pero funciona perfectamente con el estilo de dise\u00f1o minimalista.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Roboto\n<\/p>\n

\n 4 resoluciones secretas
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Secret Resolutions es un sitio web colorido y algo directo que, al igual que el sitio web de Jacob anterior, solo utiliza un tipo de letra (Brandon Grotesque).\n<\/p>\n

\n La tipograf\u00eda es grande, audaz, aventurera y divertida, una elecci\u00f3n perfecta teniendo en cuenta el concepto del sitio.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Brandon Grotesque\n<\/p>\n

\n 5 conceptos b\u00e1sicos09
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Basics09 hace exactamente lo que dice en la lata: ofrece un sitio web \u00abb\u00e1sico\u00bb que, una vez m\u00e1s, solo utiliza un tipo de letra (Benton Sans).\n<\/p>\n

\n Benton Sans en s\u00ed misma es una fuente sans serif bastante simple y simple, pero el dise\u00f1ador ha utilizado un estilo y tama\u00f1o sutiles para crear una sensaci\u00f3n de jerarqu\u00eda, incluso con un solo tipo de letra en el dise\u00f1o.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Benton Sans\n<\/p>\n

\n 6 degordiano
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Degordian hace uso de una tipograf\u00eda grande en may\u00fasculas para los elementos principales del dise\u00f1o, complementada con un texto m\u00e1s peque\u00f1o en may\u00fasculas y min\u00fasculas escrito en la fuente popular: Merriweather.\n<\/p>\n

\n Esta combinaci\u00f3n de im\u00e1genes de fondo grandes y tipograf\u00eda en may\u00fasculas grandes se est\u00e1 convirtiendo r\u00e1pidamente en una tendencia de dise\u00f1o web este a\u00f1o.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Futura, Merriweather\n<\/p>\n

\n 7 Finca Brancott
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Brancott Estate ha optado por un efecto de pizarra dibujado a mano para su sitio web.\n<\/p>\n

\n No estamos seguros de cu\u00e1l es la fuente principal que han usado, pero aparece junto a Georgia. Lo que es, es una combinaci\u00f3n \u00e9pica.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Desconocido, Georgia\n<\/p>\n

\n Caldera de 8 millas
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Miles Calder ha creado un sitio web muy minimalista aqu\u00ed y nuevamente, el sitio utiliza solo un tipo de letra: Founders Grotesk.\n<\/p>\n

\n Utiliza varios tama\u00f1os, colores y estilos para crear una sensaci\u00f3n de jerarqu\u00eda en el dise\u00f1o.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Fundadores Grotesk\n<\/p>\n

\n 9 Corre por AJD
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Aunque este sitio web est\u00e1 escrito en franc\u00e9s en lugar de ingl\u00e9s, parece un poco dif\u00edcil de leer gracias al estilo del tipo de letra utilizado.\n<\/p>\n

\n Sin embargo, debes admitir que, en cuanto al estilo, se ve bastante bien.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Avenir Book\n<\/p>\n

\n 10 EnviarMensaje.a
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n SendAMessage.to esencialmente le permite enviar un mensaje personalizado a un amigo, familiar o colega con solo unos pocos pasos.\n<\/p>\n

\n El dise\u00f1ador ha utilizado Proxima Nova como \u00fanica fuente. un tipo de letra conocido por su belleza en tama\u00f1os grandes.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Proxima Nova\n<\/p>\n

\n 11 Laboratorios Amazee
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Parece que Amazee Labs ha creado un tipo de letra algo nuevo y \u00fanico para este dise\u00f1o, pero se presenta junto con Source Sans Pro y Museo.\n<\/p>\n

\n Estas dos fuentes funcionan maravillosamente bien juntas, y especialmente bien junto con la tipograf\u00eda brillante y colorida que se muestra en las im\u00e1genes.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Source Sans Pro, Museo\n<\/p>\n

\n 12 udolf
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n El sitio web de Oudolf es muy simple y, al igual que el sitio web de Jacob Grubbe presentado anteriormente en la publicaci\u00f3n, la tipograf\u00eda es pr\u00e1cticamente el \u00fanico elemento del dise\u00f1o.\n<\/p>\n

\n Sin embargo, este sitio web utiliza un efecto genial en el que el texto se enmascara de manera efectiva sobre una imagen, que luego se revela al pasar el mouse.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Mason Neue Book, Univers Standard\n<\/p>\n

\n 13 Yo Soy Baaz
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n \u00abI Am Baaz\u00bb utiliza dos hermosos tipos de letra: Verlag Book y Acrom Extra Bold.\n<\/p>\n

\n Cuando se combina con el video de fondo del sitio web, el resultado es impresionante. es casi como un p\u00f3ster de pel\u00edcula interactivo en movimiento en la forma en que ha sido dise\u00f1ado y decorado.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Verlag Book, Acrom Extra Bold\n<\/p>\n

\n Banco de molinos 14 FS
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n FS Millbank es un sitio web que anuncia la tipograf\u00eda: FS Millbank.\n<\/p>\n

\n Se describe como un tipo de letra \u00abcaminante\u00bb y si ha estado en alg\u00fan aeropuerto o estaci\u00f3n de tren recientemente, probablemente habr\u00e1 visto algo que se parece a \u00e9l en los letreros all\u00ed.\n<\/p>\n

\n Es una fuente hermosa y definitivamente funciona bien para el prop\u00f3sito previsto.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> FS Millbank\n<\/p>\n

\n 15 Estudio Lovelock
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Parece que Futura PT est\u00e1 creciendo en popularidad este a\u00f1o y ha aparecido una vez m\u00e1s en el sitio web de Studio Lovelock.\n<\/p>\n

\n Es el \u00fanico tipo de letra utilizado en el dise\u00f1o, pero se ha utilizado en muchos tama\u00f1os, estilos y pesos diferentes para crear un dise\u00f1o interesante.\n<\/p>\n

\n Ni siquiera parece la misma fuente en algunos lugares.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Futura PT\n<\/p>\n

\n 16 adoratorio
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n El sitio web de Adoratorio es en gran parte en blanco y negro, aunque hay algunos elementos extra\u00f1os de color, como se demuestra en la captura de pantalla anterior.\n<\/p>\n

\n Tanto Montserrat como Courier New aparecen en este dise\u00f1o y, aunque estas no son las opciones tipogr\u00e1ficas m\u00e1s interesantes, el dise\u00f1o ha utilizado inteligentemente los cambios de color y seguimiento\/interletraje para crear un dise\u00f1o destacado.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Montserrat, Courier New\n<\/p>\n

\n 17 La biblioteca de patrones
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n La biblioteca de patrones hace muy poco uso de la tipograf\u00eda, ya que es principalmente un sitio basado en im\u00e1genes.\n<\/p>\n

\n Sin embargo, cuando se usa tipograf\u00eda, se usa principalmente para las llamadas a la acci\u00f3n (es decir, el bot\u00f3n \u00abdescargar ahora\u00bb). Claramente, la audacia de MostraNuova es la elecci\u00f3n perfecta para este trabajo.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> MostraNuova\n<\/p>\n

\n 18 Spotify. Punto justo
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Spotify utiliza solo una fuente en su dise\u00f1o \u00abSweet Spot\u00bb para el D\u00eda de San Valent\u00edn y funciona excepcionalmente bien cuando se combina con el esquema de colores llamativos y el dise\u00f1o minimalista del sitio.\n<\/p>\n

\n Se utilizan varios pesos y tama\u00f1os para crear una jerarqu\u00eda visual simple pero obvia.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Circular TT\n<\/p>\n

\n 19 51 Norte
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n 51 North es una agencia de dise\u00f1o con sede en los Pa\u00edses Bajos. Hace uso de dos fuentes: Minion W01 y Two Cen W01, las cuales se usan con relativa moderaci\u00f3n.\n<\/p>\n

\n Una cosa extra\u00f1a que notar\u00e1 acerca de este sitio web es que se usa un peso de fuente normal para el encabezado principal (\u00ab666\u00bb), mientras que se usa un peso en negrita para el subt\u00edtulo (\u00ab6to aniversario\u00bb).\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Minion W01, Tw Cen W01\n<\/p>\n

\n 20 rel\u00e9s azules
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n RelaisBlu es un hotel boutique y restaurante en Italia. A diferencia de la mayor\u00eda de los sitios que aparecen en esta publicaci\u00f3n, el sitio web en realidad utiliza tres tipos de letra completamente diferentes.\n<\/p>\n

\n La mayor\u00eda de las veces, usar m\u00e1s de un par de tipos de letra en varios tama\u00f1os y pesos es un poco arriesgado, pero RelaisBlu se las arregla para crear un dise\u00f1o visualmente impresionante.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Geosans, Fanwood, Theano\n<\/p>\n

\n Estudio 21 de abril
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n April Studio solo usa un tipo de letra en su dise\u00f1o: Helvetica Neue.\n<\/p>\n

\n Helvetica Neue es un tipo de letra relativamente usado en exceso en estos d\u00edas (incluso Apple lo usa en sus sistemas operativos OSX Yosemite e iOS8).\n<\/p>\n

\n Sin embargo, al usar varios pesos, tama\u00f1os y colores, April Studio ha creado un dise\u00f1o limpio y simple con una clara jerarqu\u00eda visual.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Helvetica Neue\n<\/p>\n

\n 22 E Mito
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n EMyth es un sitio web relativamente simple y con los pies en la tierra, en parte gracias a la elecci\u00f3n de la tipograf\u00eda: Museo Slab y Proxima Nova.\n<\/p>\n

\n Proxima Nova puede parecer bastante audaz y masculino a veces, pero al usar Museo Slab junto con \u00e9l, EMyth ha creado un dise\u00f1o sensato que es limpio, claro y atractivo para ambos g\u00e9neros por igual.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Museo Slab, Proxima Nova\n<\/p>\n

\n 23 Melanie Daveid
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Adem\u00e1s del dise\u00f1o tipogr\u00e1fico personalizado que se usa para los encabezados grandes en el lado izquierdo del sitio web, Melanie solo usa un tipo de letra en su sitio web: Proxima Nova.\n<\/p>\n

\n Mantiene las cosas simples al utilizar un peso en negrita para los subt\u00edtulos, con un peso regular para el contenido principal. Esto crea una jerarqu\u00eda visual clara, mientras que su fuente personalizada agrega personalidad al dise\u00f1o.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Proxima Nova, Custom\n<\/p>\n

\n 24 f\u00f3rmulas
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Formlets es una empresa que a\u00fan no se ha lanzado, pero parece estar lista para lanzar un producto que competir\u00e1 con algunos jugadores bastante importantes.\n<\/p>\n

\n Sin embargo, Formlets ha utilizado la tipograf\u00eda para ayudar a destacar entre la multitud. Mientras que la mayor\u00eda de sus competidores cuentan con un dise\u00f1o corporativo obsoleto, Formlets ha optado por un dise\u00f1o m\u00e1s simple y amigable. DIN Rounded y Roboto se utilizan para lograr esto.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> DIN Rounded, Roboto\n<\/p>\n

\n 25 Nicol\u00e1s Bussiere
\n<\/h4>\n

\n \"\"<\/a>\n<\/p>\n

\n Nicholas ha creado un dise\u00f1o excepcionalmente minimalista y utiliza un solo tipo de letra: Apercu.\n<\/p>\n

\n Utiliza dos pesos de fuente (ligero y normal) y, sorprendentemente, son los encabezados grandes los que utilizan el peso de fuente ligero, mientras que el texto m\u00e1s peque\u00f1o y menos importante utiliza un peso de fuente normal.\n<\/p>\n

\n \u00c9l usa el tama\u00f1o y el color para asegurarse de que todav\u00eda haya una fuerte jerarqu\u00eda visual dentro del dise\u00f1o.\n<\/p>\n

\n Fuentes utilizadas:<\/strong> Apercu\n<\/p>\n<\/p>\n

\n Fuente de grabaci\u00f3n: instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Todos los sitios web utilizan tipograf\u00eda, pero la gran mayor\u00eda de ellos no hacen nada particularmente especial con ella. De hecho, muchos de los sitios web que visito a diario hacen un uso bastante pobre de la tipograf\u00eda (en mi opini\u00f3n), \u00bfpor qu\u00e9 siempre siento una sensaci\u00f3n de deleite abrumador cuando me encuentro con un sitio web que realmente ha ido m\u00e1s all\u00e1? milla en lo que a tipograf\u00eda se refiere. Entonces, si est\u00e1s harto de ver letras como \u00abArial\u00bb y \u00abTimes New Roman\u00bb (\u00a1s\u00e9 que lo estoy!), o si necesitas inspiraci\u00f3n tipogr\u00e1fica para un futuro…<\/p>\n","protected":false},"author":1,"featured_media":139118,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[203,255,229,60],"tags":[],"class_list":["post-263569","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-fuentes","category-libros-de-texto","category-web-y-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/263569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/comments?post=263569"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/263569\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media\/139118"}],"wp:attachment":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media?parent=263569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/categories?post=263569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/tags?post=263569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}