{"id":263191,"date":"2023-07-10T06:40:00","date_gmt":"2023-07-10T03:40:00","guid":{"rendered":"https:\/\/inform.click\/efectos-de-la-tipografia-en-la-experiencia-del-usuario\/"},"modified":"2023-07-10T07:18:00","modified_gmt":"2023-07-10T04:18:00","slug":"efectos-de-la-tipografia-en-la-experiencia-del-usuario","status":"publish","type":"post","link":"https:\/\/inform.click\/es\/efectos-de-la-tipografia-en-la-experiencia-del-usuario\/","title":{"rendered":"Efectos de la tipograf\u00eda en la experiencia del usuario"},"content":{"rendered":"<p>\n  La tipograf\u00eda es un arte y una t\u00e9cnica que est\u00e1 ganando cada vez m\u00e1s popularidad a medida que pasa el tiempo. Es una habilidad crucial que todo dise\u00f1ador debe tener sin importar cu\u00e1l sea su campo de enfoque.\n<\/p>\n<p>\n  Si eres alguien que tiene un negocio, quiere hacerlo o simplemente eres dise\u00f1ador, no se habla tanto de la tipograf\u00eda sin motivo alguno. Con la ayuda de la tipograf\u00eda, puede tener un impacto duradero en sus lectores y usuarios.\n<\/p>\n<p>\n  Aunque a algunas personas solo les parezca un mont\u00f3n de palabras juntas, ese grupo se junta de una manera muy l\u00f3gica y t\u00e9cnica, donde se presta atenci\u00f3n a cada elemento del t\u00e9. Es un factor importante en el dise\u00f1o que no debe ni debe ser ignorado.\n<\/p>\n<p>\n  Si no est\u00e1 seguro de por qu\u00e9 debe prestar atenci\u00f3n a la tipograf\u00eda, para hacerlo simple, es c\u00f3mo puede mantener la atenci\u00f3n de su lector en su ilustraci\u00f3n, marca o dise\u00f1o. S\u00ed, las im\u00e1genes valen m\u00e1s que mil palabras, al igual que su logotipo y otras ilustraciones. Pero la tipograf\u00eda influye bastante en cu\u00e1nto tiempo siguen mirando tu trabajo y el impacto que tiene en ellos.\n<\/p>\n<p>\n  Importancia en el Dise\u00f1o Gr\u00e1fico\n<\/p>\n<p>\n  En el dise\u00f1o gr\u00e1fico, la tipograf\u00eda se relaciona con las t\u00e9cnicas y los resultados de organizar el tipo de tal manera que represente la marca y el negocio en el que est\u00e1 trabajando lo m\u00e1s fielmente posible y le d\u00e9 a la gente una idea de lo que realmente se trata.\n<\/p>\n<p>\n  Cuanto mejor sea tu tipograf\u00eda, m\u00e1s posibilidades tendr\u00e1s de ser notado. Tanto es as\u00ed, que sobre todo con los logos, algunas empresas han dejado atr\u00e1s las im\u00e1genes y han hecho su logo con letras estilizadas de una manera muy espec\u00edfica.\n<\/p>\n<p>\n  Esto hace que las marcas sean m\u00e1s f\u00e1ciles de recordar, uno de los ejemplos m\u00e1s comunes es Coca Cola. Hay toda una <a href=\"http:\/\/www.coca-cola.co.uk\/stories\/the-logo-story\" target=\"_blank\" rel=\"noopener\">historia<\/a> detr\u00e1s del logotipo de Coca Cola, que muestra exactamente c\u00f3mo surgi\u00f3 todo y el impacto que tuvo en todas partes del mundo es bastante obvio.\n<\/p>\n<p>\n  El logotipo de Coca Cola es el mejor ejemplo, ya que puedes ver exactamente cu\u00e1ntos de sus elementos est\u00e1n asociados con la marca en s\u00ed.\n<\/p>\n<p>\n  Un dise\u00f1ador gr\u00e1fico inteligente sabe c\u00f3mo explorar la tipograf\u00eda de manera que comunique claramente los aspectos visuales y verbales del dise\u00f1o y la marca.\n<\/p>\n<p>\n  Ahora bien, \u00bfqu\u00e9 se entiende exactamente por \u00bb <strong>aspectos visuales y verbales<\/strong> \u00ab?\n<\/p>\n<ul>\n<li>\n    <strong>Visual<\/strong>: el significado creado por la apariencia visual de la ilustraci\u00f3n; tanto de texto como de imagen. El car\u00e1cter que tiene la tipograf\u00eda y c\u00f3mo te hace sentir contribuye a su calidad visual.\n  <\/li>\n<li>\n    <strong>Verbal<\/strong>: significado literal de las palabras o frases utilizadas en la ilustraci\u00f3n.\n  <\/li>\n<\/ul>\n<p>\n  Cuando se combinan de la manera correcta, los aspectos visuales y verbales pueden tener un gran impacto en la experiencia del usuario y demostrar y transmitir una variedad de mensajes.\n<\/p>\n<p>\n  Otro ejemplo de un logotipo muy s\u00f3lido con aspectos visuales y verbales equilibrados es el <a href=\"https:\/\/www.nestle.co.uk\/aboutus\/history\/blog\/posts\/kitkatnohyphen\" target=\"_blank\" rel=\"noopener\">logotipo de KitKat<\/a>.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292452-6382eb12be534.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292452-6382eb12be534.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Este estudio, <a href=\"http:\/\/sheltonography.com\/resources\/Articles\/thangaraj.pdf\" target=\"_blank\" rel=\"noopener\">aqu\u00ed<\/a>, muestra muy claramente c\u00f3mo la tipograf\u00eda puede tener un efecto sobre nosotros y c\u00f3mo los especialistas en marketing pueden usarla para su beneficio. Muestra que las fuentes utilizadas por algunas corporaciones populares como IBM, Mercedes, Nivea y Marlboro son reconocidas internacionalmente y es exactamente por eso que estas empresas han invertido en dise\u00f1o y derechos de autor de fuentes registradas.\n<\/p>\n<p>\n  Si no lo cree, eche un vistazo a la siguiente imagen de una campa\u00f1a publicitaria de Greenpeace:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292452-6382eb14ec5a7.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292452-6382eb14ec5a7.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Aunque no dice KitKat, tu mente crea instant\u00e1neamente una conexi\u00f3n reconocible con la marca.\n<\/p>\n<h3>\n  Efectos de la tipograf\u00eda<br \/>\n<\/h3>\n<p>\n  Kevin Larson y Rosalind Picard presentaron sus hallazgos sobre c\u00f3mo la tipograf\u00eda afecta los estados de \u00e1nimo en su art\u00edculo, The Aesthetics of Reading, que tambi\u00e9n abord\u00f3 los beneficios de una buena tipograf\u00eda.\n<\/p>\n<p>\n  El siguiente es un ejemplo muy simple, el primero en el estudio. \u00bfCu\u00e1l crees que se ve mejor y m\u00e1s agradable de leer?\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292452-6382eb16d3e85.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292452-6382eb16d3e85.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Lo \u00fanico que es diferente en ambos documentos es el dise\u00f1o y la ubicaci\u00f3n del texto. La segunda imagen es claramente m\u00e1s f\u00e1cil de leer y la mayor\u00eda incluso estar\u00eda emocionada de leerla. Es n\u00edtido y claro, y el dise\u00f1o se prefiere mucho sobre el otro.\n<\/p>\n<p>\n  La primera imagen parece bastante confusa y casi como si fuera demasiado para procesar. Puede confundir tu mente y simplemente no es agradable de ver.\n<\/p>\n<p>\n  Estos procesos ocurren todo el tiempo en nuestros cerebros y se reflejan en gran medida en nuestro estado de \u00e1nimo y las elecciones que hacemos despu\u00e9s.\n<\/p>\n<p>\n  De manera similar, el documento tambi\u00e9n prueba la manera en que se escribe un texto, incluidas las ligaduras, las versalitas, los n\u00fameros, las caracter\u00edsticas de sub\u00edndices y super\u00edndices, etc.\n<\/p>\n<p>\n  Incluso los espacios entre cada letra, palabra, oraci\u00f3n y p\u00e1rrafo afectan su estado de \u00e1nimo y productividad en ciertas tareas cognitivas.\n<\/p>\n<p>\n  El documento muestra que la simetr\u00eda es mucho m\u00e1s preferida que el grosor de los trazos desigual y el espaciado entre y dentro de los caracteres.\n<\/p>\n<p>\n  Todos estos son factores que deben tenerse en cuenta al trabajar tanto en l\u00ednea como fuera de l\u00ednea.\n<\/p>\n<p>\n  Dicho esto, es una buena regla general tener su logotipo o ilustraci\u00f3n espaciada \u00f3pticamente, en lugar de matem\u00e1ticamente. La imagen de abajo demuestra la diferencia entre ambos.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292452-6382eb18b90f5.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-292452-6382eb18b90f5.webp\" alt=\"\" \/><\/a><\/p>\n<h5>\n  Estado de \u00e1nimo positivo, mejores resultados<br \/>\n<\/h5>\n<p>\n  Es obvio que cuanto m\u00e1s positividad induzca su ilustraci\u00f3n, m\u00e1s se sentir\u00e1n atra\u00eddos por su marca y negocio. El estudio anterior demuestra que una buena tipograf\u00eda tambi\u00e9n aumenta el rendimiento cognitivo.\n<\/p>\n<p>\n  La verdad es que la tipograf\u00eda tambi\u00e9n puede afectar el juicio. The New York Times realiz\u00f3 un estudio, \u00ab\u00bfEres optimista o pesimista?\u00bb Aunque el estudio discuti\u00f3 los sentimientos de seguridad de los participantes durante eventos catastr\u00f3ficos, se centr\u00f3 m\u00e1s en los efectos que el tipo de letra puede tener sobre usted. Y dado que no se caus\u00f3 ning\u00fan da\u00f1o, quiz\u00e1s tambi\u00e9n podr\u00eda llamarse \u00e9tico.\n<\/p>\n<p>\n  Las fuentes utilizadas fueron Comic Sans, Computer Modern, Trebuchet, Helvetica, Georgia y Baskerville. El estudio se realiz\u00f3 con unos 45.000 participantes y los resultados mostraron que la gente tend\u00eda a estar de acuerdo con la fuente Baskerville un 1,5 % m\u00e1s que el resto.\n<\/p>\n<p>\n  El 1,5% puede parecer un porcentaje peque\u00f1o, pero es lo suficientemente importante como para demostrar que, despu\u00e9s de todo, el tipo de letra afecta el juicio.\n<\/p>\n<p>\n  Cuantas m\u00e1s fuentes utilice en el mismo texto, m\u00e1s lo personalizar\u00e1 y m\u00e1s expresivo y creativo ser\u00e1. Honestamente, tu tipo de letra act\u00faa como tu lenguaje corporal y todos sabemos lo importante que es el lenguaje corporal. Puede crear una conexi\u00f3n emocional entre usted y el cliente o arruinar por completo su discurso de marketing.\n<\/p>\n<p>\n  Y cuando se trata de una buena tipograf\u00eda, es simple de entender pero no tanto de ejecutar. Cuanto m\u00e1s f\u00e1cil sea su texto de entender, m\u00e1s desarrollar\u00e1 un fuerte sentido del car\u00e1cter para que su audiencia se concentre.\n<\/p>\n<h5>\n  Tipograf\u00eda en Dise\u00f1o Web<br \/>\n<\/h5>\n<p>\n  Al dise\u00f1ar un sitio web, debe tener en cuenta que probablemente tendr\u00e1 mucha informaci\u00f3n all\u00ed, por lo que es una mejor idea mantener el tipo de letra y el estilo consistentes en lugar de tratar de mezclarlos demasiado, lo que simplemente ser un dolor de leer.\n<\/p>\n<p>\n  Una buena p\u00e1gina compuesta le dice al lector y al usuario exactamente d\u00f3nde comenzar a leer y c\u00f3mo avanzar en la p\u00e1gina. Lo que es importante y lo que no lo es se establece claramente no con palabras, sino simplemente por c\u00f3mo se presenta el texto en la p\u00e1gina del sitio web.\n<\/p>\n<p>\n  Los colores tambi\u00e9n son muy importantes y deben mantenerse al m\u00ednimo o solo debe usarse un conjunto en todo el sitio web. Saltar demasiado puede volver a confundir a sus lectores y hacer que el punto del sitio web o la p\u00e1gina sea m\u00e1s dif\u00edcil de entender.\n<\/p>\n<p>\n  Del mismo modo, no lo mantenga demasiado simple hasta el punto en que no haya diferencia entre el encabezado y el contenido del mismo.\n<\/p>\n<h5>\n  Tipograf\u00eda en Marketing de Contenidos<br \/>\n<\/h5>\n<p>\n  Impactar al lector y llamar a tu negocio a trav\u00e9s del contenido es de lo que se trata el marketing de contenidos. Es casi imposible leer cualquier tipo de texto sin que transmita una emoci\u00f3n, por lo que es mucho mejor saber qu\u00e9 emoci\u00f3n es la que desea transmitir, la mejor fuente para escribirla y todo lo dem\u00e1s que dibujar\u00e1. atenci\u00f3n.\n<\/p>\n<p>\n  Otro consejo para recordar es que la <strong>negrita llama la atenci\u00f3n<\/strong> mientras que la cursiva no causa mucho impacto en el lector. Pero poner el contenido en cursiva puede aportar un poco de elegancia y sofisticaci\u00f3n a su texto.\n<\/p>\n<p>\n  La informaci\u00f3n tambi\u00e9n es m\u00e1s f\u00e1cil de procesar cuando se establece en vi\u00f1etas que en grandes fragmentos de p\u00e1rrafos que, sinceramente, nadie tiene tiempo de leer.\n<\/p>\n<p>\n  Mientras que cuando usa un tipo de letra \u00abn\u00edtido\u00bb como Calibri, hace que su punto sea muy definido y s\u00f3lido.\n<\/p>\n<h3>\n  Empezando<br \/>\n<\/h3>\n<p>\n  Bueno, necesitas saber exactamente qu\u00e9 es lo que est\u00e1s tratando de lograr. El objetivo de su proyecto de tipograf\u00eda debe ser claro. Saber lo que quiere que sientan sus lectores es importante y luego trabajar manteniendo ese pensamiento en su mente lo ayudar\u00e1 a enfatizar claramente los elementos.\n<\/p>\n<p>\n  Pruebe diferentes estilos de fuente, tama\u00f1os, colores, subraye el texto, p\u00f3ngalo en negrita, en cursiva o lo que necesite hacer para que transmita ese estado de \u00e1nimo exacto que permitir\u00e1 que las personas conozcan su trabajo y no solo capten su atenci\u00f3n a primera vista sino mantenerlo all\u00ed por un tiempo. Si eres un laico, simplemente puedes probar una herramienta de dise\u00f1o de logotipos y ver qu\u00e9 funciona para ti y qu\u00e9 no.\n<\/p>\n<p>\n  Adem\u00e1s, no olvides que es muy importante que tu texto sea legible, incluso en fuentes peque\u00f1as. Los caracteres deben poder identificarse correctamente y hacer que el proceso de lectura de su texto sea fluido sin necesidad de invertir mucho esfuerzo en comprender solo la primera letra.\n<\/p>\n<p>\n  Los siguientes son algunos elementos que va a clavar en la aplicaci\u00f3n y la comprensi\u00f3n para mejorar sus habilidades tipogr\u00e1ficas.\n<\/p>\n<h5>\n  Elementos de tipograf\u00eda<br \/>\n<\/h5>\n<ul>\n<li>\n    <strong>Tipos<\/strong> de letra: estilo de texto que se utiliza (por ejemplo, Times New Roman, Calibri, Ariel, etc.).\n  <\/li>\n<li>\n    <strong>Fuentes<\/strong>: estilo espec\u00edfico de tipo de letra, as\u00ed como su ancho, alto y tama\u00f1o (por ejemplo, Century, tama\u00f1o 12, negrita), a menudo se usa como sin\u00f3nimo de tipo de letra.\n  <\/li>\n<li>\n    <strong>Seguimiento<\/strong>: Espacio entre caracteres en un texto.\n  <\/li>\n<li>\n    <strong>Interletraje<\/strong>: similar al seguimiento, pero tambi\u00e9n se refiere al espacio en blanco entre letras y caracteres en un texto.\n  <\/li>\n<li>\n    <strong>Interlineado<\/strong>: Medida de la distancia entre una l\u00ednea de texto con las l\u00edneas arriba y abajo.\n  <\/li>\n<li>\n    <strong>Longitud de L\u00ednea<\/strong>: Tal como su nombre lo dice, longitud del texto en una l\u00ednea.\n  <\/li>\n<\/ul>\n<h4>\n  En conclusi\u00f3n<br \/>\n<\/h4>\n<p>\n  La tipograf\u00eda es una forma de arte que se enfoca en el componente visual de la palabra escrita. Con solo visualizarlo adecuadamente para su p\u00fablico objetivo, puede crear un impacto inolvidable. Para cualquier dise\u00f1ador, es crucial prestar mucha atenci\u00f3n a la tipograf\u00eda y trabajar para dominar su habilidad si quiere desarrollar y mejorar su carrera en la industria del dise\u00f1o.\n<\/p>\n<p>\n  La tipograf\u00eda es lenguaje corporal y hace o deshace la primera impresi\u00f3n que un usuario tiene de su marca.\n<\/p>\n<p>\n  Y bueno, como dice Cyrus Highsmith, \u00abLa tipograf\u00eda es el detalle y la presentaci\u00f3n de una historia. Representa la voz de una atm\u00f3sfera o escenario hist\u00f3rico de alg\u00fan tipo. Puede hacer muchas cosas\u00bb.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Fuente de grabaci\u00f3n: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2018\/01\/19\/typography-effect-on-user-experience\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>La tipograf\u00eda es un arte y una t\u00e9cnica que est\u00e1 ganando cada vez m\u00e1s popularidad a medida que pasa el tiempo. Es una habilidad crucial que todo dise\u00f1ador debe tener sin importar cu\u00e1l sea su campo de enfoque. Si eres alguien que tiene un negocio, quiere hacerlo o simplemente eres dise\u00f1ador, no se habla tanto de la tipograf\u00eda sin motivo alguno. Con la ayuda de la tipograf\u00eda, puede tener un impacto duradero en sus lectores y usuarios. Aunque a algunas personas solo les puede parecer un mont\u00f3n de palabras juntas, ese grupo se junta de una manera muy l\u00f3gica y t\u00e9cnica&#8230;<\/p>\n","protected":false},"author":1,"featured_media":131571,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[151,203,60],"tags":[],"class_list":["post-263191","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-consejos-y-trucos-web","category-diseno-web","category-web-y-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/263191","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=263191"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/263191\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media\/131571"}],"wp:attachment":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media?parent=263191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/categories?post=263191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/tags?post=263191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}