{"id":260861,"date":"2023-07-10T06:40:00","date_gmt":"2023-07-10T03:40:00","guid":{"rendered":"https:\/\/inform.click\/efeitos-da-tipografia-na-experiencia-do-usuario\/"},"modified":"2023-07-10T07:12:00","modified_gmt":"2023-07-10T04:12:00","slug":"efeitos-da-tipografia-na-experiencia-do-usuario","status":"publish","type":"post","link":"https:\/\/inform.click\/pt-pt\/efeitos-da-tipografia-na-experiencia-do-usuario\/","title":{"rendered":"Efeitos da tipografia na experi\u00eancia do usu\u00e1rio"},"content":{"rendered":"<p>\n  A tipografia \u00e9 uma arte e t\u00e9cnica que est\u00e1 ganhando popularidade cada vez mais com o passar do tempo. \u00c9 uma habilidade crucial que todo designer deve ter, n\u00e3o importa qual seja seu campo de atua\u00e7\u00e3o.\n<\/p>\n<p>\n  Se voc\u00ea \u00e9 algu\u00e9m que tem um neg\u00f3cio, quer ou \u00e9 simplesmente um designer, n\u00e3o se fala tanto em tipografia sem motivo. Com a ajuda da tipografia, voc\u00ea pode causar um impacto duradouro em seus leitores e usu\u00e1rios.\n<\/p>\n<p>\n  Embora possa parecer apenas um monte de palavras reunidas para algumas pessoas, esse monte \u00e9 montado de maneira muito l\u00f3gica e t\u00e9cnica, onde cada elemento \u00e9 prestado aten\u00e7\u00e3o ao ch\u00e1. \u00c9 um fator importante no design que n\u00e3o deve e n\u00e3o deve ser ignorado.\n<\/p>\n<p>\n  Se voc\u00ea n\u00e3o sabe por que deve prestar aten\u00e7\u00e3o \u00e0 tipografia, para simplificar, \u00e9 assim que voc\u00ea pode manter a aten\u00e7\u00e3o do leitor em sua ilustra\u00e7\u00e3o, marca ou design. Sim, as imagens valem mais que mil palavras, assim como seu logotipo e outras ilustra\u00e7\u00f5es. Mas a tipografia influencia bastante em quanto tempo eles ficam olhando para o seu trabalho e no impacto que isso causa neles.\n<\/p>\n<p>\n  Import\u00e2ncia no Design Gr\u00e1fico\n<\/p>\n<p>\n  No design gr\u00e1fico, a tipografia relaciona-se com as t\u00e9cnicas e os resultados de organizar o tipo de maneira que represente a marca e o neg\u00f3cio em que voc\u00ea est\u00e1 trabalhando o mais pr\u00f3ximo poss\u00edvel e d\u00ea \u00e0s pessoas uma ideia do que realmente se trata.\n<\/p>\n<p>\n  Quanto melhor for a sua tipografia, mais chances voc\u00ea ter\u00e1 de ser notado. Tanto \u00e9 assim que, especialmente com logotipos, algumas empresas deixaram imagens para tr\u00e1s e fizeram seu logotipo com letras estilizadas de uma maneira muito espec\u00edfica.\n<\/p>\n<p>\n  Isso torna as marcas mais f\u00e1ceis de lembrar, sendo um dos exemplos mais comuns a Coca Cola. H\u00e1 uma <a href=\"http:\/\/www.coca-cola.co.uk\/stories\/the-logo-story\" target=\"_blank\" rel=\"noopener\">hist\u00f3ria<\/a> por tr\u00e1s do logotipo da Coca Cola, que mostra exatamente como tudo surgiu e o impacto que teve em todas as partes do mundo \u00e9 bastante \u00f3bvio.\n<\/p>\n<p>\n  O logotipo da Coca Cola \u00e9 o melhor exemplo, pois voc\u00ea pode ver exatamente quanto de seus elementos est\u00e3o associados \u00e0 pr\u00f3pria marca.\n<\/p>\n<p>\n  Um designer gr\u00e1fico inteligente sabe como explorar a tipografia de uma maneira que comunique claramente os aspectos visuais e verbais do design e da marca.\n<\/p>\n<p>\n  Agora, o que exatamente se entende por &#8221; <strong>aspectos visuais e verbais<\/strong> &#8220;?\n<\/p>\n<ul>\n<li>\n    <strong>Visual<\/strong> \u2013 O significado criado pela apar\u00eancia visual da ilustra\u00e7\u00e3o; tanto texto quanto imagem. O car\u00e1ter que a tipografia tem e como ela faz voc\u00ea se sentir contribui para sua qualidade visual.\n  <\/li>\n<li>\n    <strong>Verbal<\/strong> \u2013 Significado literal das palavras ou frases usadas na ilustra\u00e7\u00e3o.\n  <\/li>\n<\/ul>\n<p>\n  Quando combinados da maneira certa, os aspectos visuais e verbais podem ter um grande impacto na experi\u00eancia do usu\u00e1rio e demonstrar e transmitir uma variedade de mensagens.\n<\/p>\n<p>\n  Outro exemplo de logotipo muito forte com aspectos visuais e verbais equilibrados \u00e9 o <a href=\"https:\/\/www.nestle.co.uk\/aboutus\/history\/blog\/posts\/kitkatnohyphen\" target=\"_blank\" rel=\"noopener\">Logo 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 estudo, <a href=\"http:\/\/sheltonography.com\/resources\/Articles\/thangaraj.pdf\" target=\"_blank\" rel=\"noopener\">aqui<\/a>, mostra muito claramente como a tipografia pode ter um efeito sobre n\u00f3s e como os profissionais de marketing podem us\u00e1-la a seu favor. Isso mostra que as fontes usadas por algumas empresas populares como IBM, Mercedes, Nivea e Marlboro s\u00e3o reconhecidas internacionalmente e \u00e9 exatamente por isso que essas empresas investiram em design e direitos autorais de fontes com marcas registradas.\n<\/p>\n<p>\n  Se voc\u00ea n\u00e3o acredita, d\u00ea uma olhada na imagem abaixo de uma campanha publicit\u00e1ria do 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  Embora n\u00e3o diga KitKat, sua mente cria instantaneamente uma conex\u00e3o reconhec\u00edvel com a marca.\n<\/p>\n<h3>\n  Efeitos da Tipografia<br \/>\n<\/h3>\n<p>\n  Kevin Larson e Rosalind Picard apresentaram suas descobertas sobre como a tipografia afeta os humores em seu artigo, The Aesthetics of Reading, que tamb\u00e9m tratou dos benef\u00edcios de uma boa tipografia.\n<\/p>\n<p>\n  A seguir, um exemplo muito simples, o primeiro do estudo. Qual voc\u00ea acha que parece melhor e mais agrad\u00e1vel de ler?\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  A \u00fanica coisa diferente em ambos os documentos \u00e9 o layout e a coloca\u00e7\u00e3o do texto. A segunda imagem \u00e9 claramente mais f\u00e1cil de ler e a maioria ficaria animada em l\u00ea-la. \u00c9 n\u00edtido e claro, e o layout \u00e9 muito preferido em rela\u00e7\u00e3o ao outro.\n<\/p>\n<p>\n  A primeira imagem parece bastante confusa e quase como se fosse demais para processar. Pode confundir sua mente e simplesmente n\u00e3o \u00e9 agrad\u00e1vel de se olhar.\n<\/p>\n<p>\n  Esses processos acontecem o tempo todo em nossos c\u00e9rebros e refletem muito em nosso humor e nas escolhas que fazemos depois.\n<\/p>\n<p>\n  Da mesma forma, o artigo tamb\u00e9m testa a maneira como um texto \u00e9 escrito, incluindo ligaduras, versaletes, numerais, recursos sub\/sobrescrito e assim por diante.\n<\/p>\n<p>\n  Mesmo os espa\u00e7os entre cada letra, palavra, frase e par\u00e1grafo afetam seu humor e produtividade em certas tarefas cognitivas.\n<\/p>\n<p>\n  O artigo mostra que a simetria \u00e9 muito mais preferida do que o peso do tra\u00e7o irregular e o espa\u00e7amento entre e dentro dos caracteres.\n<\/p>\n<p>\n  Todos esses s\u00e3o fatores que precisam ser considerados ao trabalhar online e offline.\n<\/p>\n<p>\n  Dito isto, \u00e9 uma boa regra ter seu logotipo ou ilustra\u00e7\u00e3o espa\u00e7ado opticamente, em vez de matematicamente. A imagem abaixo demonstra a diferen\u00e7a entre os dois.\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  Humor Positivo, Melhores Resultados<br \/>\n<\/h5>\n<p>\n  \u00c9 \u00f3bvio que quanto mais positividade sua ilustra\u00e7\u00e3o induzir, mais eles ser\u00e3o atra\u00eddos para sua marca e seu neg\u00f3cio. O estudo acima prova que uma boa tipografia tamb\u00e9m aumenta o desempenho cognitivo.\n<\/p>\n<p>\n  A verdade \u00e9 que a tipografia tamb\u00e9m pode afetar o julgamento. O New York Times conduziu um estudo: &#8220;Voc\u00ea \u00e9 otimista ou pessimista?&#8221; Embora o estudo tenha discutido os sentimentos de seguran\u00e7a dos participantes durante eventos catastr\u00f3ficos, foi mais sobre os efeitos que o tipo de letra pode ter sobre voc\u00ea. E como nenhum dano foi causado, talvez tamb\u00e9m pudesse ser chamado de \u00e9tico.\n<\/p>\n<p>\n  As fontes utilizadas foram Comic Sans, Computer Modern, Trebuchet, Helvetica, Georgia e Baskerville. O estudo foi conduzido com cerca de 45.000 participantes e os resultados mostraram que as pessoas tendiam a concordar com a fonte Baskerville 1,5% mais do que o resto.\n<\/p>\n<p>\n  1,5% pode parecer uma porcentagem pequena, mas \u00e9 substancial o suficiente para mostrar que o tipo de letra, afinal, afeta o julgamento.\n<\/p>\n<p>\n  Quanto mais fontes voc\u00ea usar no mesmo texto, mais voc\u00ea o estar\u00e1 personalizando e mais expressivo e criativo ele ser\u00e1. Honestamente, seu tipo de letra atua como sua linguagem corporal e todos n\u00f3s sabemos o qu\u00e3o importante \u00e9 a linguagem corporal. Isso pode criar uma conex\u00e3o emocional entre voc\u00ea e o cliente ou arruinar completamente seu discurso de marketing.\n<\/p>\n<p>\n  E quando se trata de boa tipografia, \u00e9 simples de entender, mas nem tanto de executar. Mais f\u00e1cil ser\u00e1 o seu texto entender, e assim ele desenvolver\u00e1 um forte senso de car\u00e1ter para o seu p\u00fablico se concentrar.\n<\/p>\n<h5>\n  Tipografia em Web Design<br \/>\n<\/h5>\n<p>\n  Ao criar um site, voc\u00ea precisa ter em mente que provavelmente ter\u00e1 muitas informa\u00e7\u00f5es nele, ent\u00e3o \u00e9 uma ideia melhor manter o tipo de letra e o estilo consistentes em vez de tentar mistur\u00e1-los demais, o que apenas ser uma dor de ler.\n<\/p>\n<p>\n  Uma boa p\u00e1gina tipogr\u00e1fica informa ao leitor e ao usu\u00e1rio exatamente onde come\u00e7ar a ler e como prosseguir na p\u00e1gina. O que \u00e9 importante e o que n\u00e3o \u00e9 \u00e9 claramente declarado n\u00e3o em palavras, mas apenas pela forma como o texto \u00e9 apresentado na p\u00e1gina do site.\n<\/p>\n<p>\n  As cores tamb\u00e9m s\u00e3o muito importantes e devem ser mantidas no m\u00ednimo ou apenas um conjunto deve ser usado em todo o site. Saltar demais pode, novamente, apenas confundir seus leitores e tornar o ponto do site ou p\u00e1gina mais dif\u00edcil de entender.\n<\/p>\n<p>\n  Da mesma forma, n\u00e3o o mantenha t\u00e3o simples a ponto de n\u00e3o haver diferen\u00e7a entre o t\u00edtulo e o conte\u00fado dele.\n<\/p>\n<h5>\n  Tipografia no Marketing de Conte\u00fado<br \/>\n<\/h5>\n<p>\n  Causar impacto no leitor e chamar sua empresa por meio do conte\u00fado \u00e9 o objetivo do marketing de conte\u00fado. \u00c9 quase imposs\u00edvel ler qualquer tipo de texto sem que ele transmita uma emo\u00e7\u00e3o, por isso \u00e9 muito melhor saber qual \u00e9 a emo\u00e7\u00e3o que voc\u00ea deseja transmitir, a melhor fonte para escrever e tudo mais que atrair\u00e1 aten\u00e7\u00e3o.\n<\/p>\n<p>\n  Outra dica a ser lembrada \u00e9 que o <strong>negrito chama a aten\u00e7\u00e3o<\/strong> enquanto o it\u00e1lico n\u00e3o causa muito impacto no leitor. Mas colocar o conte\u00fado em it\u00e1lico pode trazer um pouco de eleg\u00e2ncia e sofistica\u00e7\u00e3o ao seu texto.\n<\/p>\n<p>\n  As informa\u00e7\u00f5es tamb\u00e9m s\u00e3o mais f\u00e1ceis de processar quando definidas em marcadores do que em grandes blocos de par\u00e1grafos que, honestamente, ningu\u00e9m tem tempo de ler.\n<\/p>\n<p>\n  Considerando que, ao usar um tipo de letra &#8220;n\u00edtido&#8221;, como Calibri, voc\u00ea torna seu ponto de vista muito definido e s\u00f3lido.\n<\/p>\n<h3>\n  Come\u00e7ando<br \/>\n<\/h3>\n<p>\n  Bem, voc\u00ea precisa saber exatamente o que est\u00e1 tentando alcan\u00e7ar. O objetivo do seu projeto de tipografia deve ser claro. Saber o que voc\u00ea deseja que seus leitores sintam \u00e9 importante e, em seguida, trabalhar mantendo esse pensamento em sua mente o ajudar\u00e1 a enfatizar claramente os elementos.\n<\/p>\n<p>\n  Experimente diferentes estilos de fonte, tamanhos, cores, sublinhe o texto, coloque-o em negrito, it\u00e1lico ou o que voc\u00ea precisar fazer para transmitir aquele clima exato que permitir\u00e1 que as pessoas conhe\u00e7am seu trabalho e n\u00e3o apenas prendam sua aten\u00e7\u00e3o \u00e0 primeira vista, mas mant\u00ea-lo l\u00e1 por um tempo. Se voc\u00ea \u00e9 um leigo, pode simplesmente experimentar uma ferramenta de design de logotipo e ver o que funciona para voc\u00ea e o que n\u00e3o funciona.\n<\/p>\n<p>\n  Al\u00e9m disso, n\u00e3o se esque\u00e7a que \u00e9 muito importante que seu texto seja leg\u00edvel, mesmo em fontes pequenas. Os caracteres precisam ser identificados corretamente e facilitar o processo de leitura do seu texto, sem que seja necess\u00e1rio investir muito esfor\u00e7o para entender apenas a primeira letra.\n<\/p>\n<p>\n  A seguir est\u00e3o alguns elementos que voc\u00ea vai dominar na aplica\u00e7\u00e3o e compreens\u00e3o para melhorar suas habilidades de tipografia.\n<\/p>\n<h5>\n  Elementos de Tipografia<br \/>\n<\/h5>\n<ul>\n<li>\n    <strong>Tipos<\/strong> de letra: estilo de texto usado (por exemplo, Times New Roman, Calibri, Ariel etc.).\n  <\/li>\n<li>\n    <strong>Fontes<\/strong>: Estilo espec\u00edfico de tipo de letra, bem como sua largura, altura e tamanho (por exemplo, Century, tamanho 12, negrito), muitas vezes usado como sin\u00f4nimo de tipo de letra.\n  <\/li>\n<li>\n    <strong>Rastreamento<\/strong>: Espa\u00e7o entre os caracteres em um texto.\n  <\/li>\n<li>\n    <strong>Kerning<\/strong>: semelhante ao rastreamento, mas tamb\u00e9m se refere ao espa\u00e7o em branco entre letras e caracteres em um texto.\n  <\/li>\n<li>\n    <strong>Entrelinhas<\/strong>: Medida da dist\u00e2ncia entre uma linha de texto com as linhas acima e abaixo dela.\n  <\/li>\n<li>\n    <strong>Comprimento da linha<\/strong>: Assim como o nome diz, comprimento do texto em uma linha.\n  <\/li>\n<\/ul>\n<h4>\n  Para concluir<br \/>\n<\/h4>\n<p>\n  A tipografia \u00e9 uma forma de arte que se concentra no componente visual da palavra escrita. Apenas visualizando-o adequadamente para seu p\u00fablico-alvo, voc\u00ea pode criar um impacto inesquec\u00edvel. Para qualquer designer, \u00e9 crucial prestar muita aten\u00e7\u00e3o \u00e0 tipografia e trabalhar para dominar sua habilidade se quiser desenvolver e aprimorar sua carreira na ind\u00fastria do design.\n<\/p>\n<p>\n  A tipografia \u00e9 a linguagem corporal e cria ou quebra a primeira impress\u00e3o que um usu\u00e1rio tem de sua marca.\n<\/p>\n<p>\n  E bem, como diz Cyrus Highsmith, &#8220;Tipografia \u00e9 o detalhe e a apresenta\u00e7\u00e3o de uma hist\u00f3ria. Representa a voz de uma atmosfera ou cen\u00e1rio hist\u00f3rico de algum tipo. Pode fazer muitas coisas.&#8221;\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Fonte de grava\u00e7\u00e3o: <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>A tipografia \u00e9 uma arte e t\u00e9cnica que est\u00e1 ganhando popularidade cada vez mais com o passar do tempo. \u00c9 uma habilidade crucial que todo designer deve ter, n\u00e3o importa qual seja seu campo de atua\u00e7\u00e3o. Se voc\u00ea \u00e9 algu\u00e9m que tem um neg\u00f3cio, quer ou \u00e9 simplesmente um designer, n\u00e3o se fala tanto em tipografia sem motivo. Com a ajuda da tipografia, voc\u00ea pode causar um impacto duradouro em seus leitores e usu\u00e1rios. Embora possa parecer apenas um monte de palavras reunidas para algumas pessoas, esse monte \u00e9 reunido de maneira muito l\u00f3gica e t\u00e9cnica\u2026<\/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":[202,150,59],"tags":[],"class_list":["post-260861","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-designer-de-web","category-dicas-e-truques-da-web","category-web-e-wordpress-2"],"_links":{"self":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/260861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=260861"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/260861\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/131571"}],"wp:attachment":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=260861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=260861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=260861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}