{"id":77121,"date":"2018-04-12T00:00:00","date_gmt":"2018-04-12T00:00:00","guid":{"rendered":"https:\/\/rockcontent.com\/br\/2018\/04\/12\/tipografia\/"},"modified":"2018-04-12T00:00:00","modified_gmt":"2018-04-12T00:00:00","slug":"tipografia","status":"publish","type":"post","link":"https:\/\/pingback.com\/br\/resources\/tipografia\/","title":{"rendered":"Tipografia: como usar um dos pilares do Design Gr\u00e1fico a seu favor"},"content":{"rendered":"\n<p>A tipografia \u00e9, sem d\u00favidas, uma das \u00e1reas mais importantes do <a href=\"https:\/\/rockcontent.com\/br\/blog\/design-grafico\/\" target=\"_blank\" rel=\"noopener noreferrer\">Design Gr\u00e1fico<\/a>. A sua aplica\u00e7\u00e3o possui uma abrang\u00eancia enorme! E seu conhecimento \u00e9 <b>crucial<\/b> para cria\u00e7\u00e3o de pe\u00e7as informativas que tenham texto como foco.<\/p>\n\n\n\n<p>Claro, como falamos em <a href=\"https:\/\/rockcontent.com\/br\/blog\/marketing-de-conteudo\/\" target=\"_blank\" rel=\"noopener noreferrer\">Marketing de Conte\u00fado<\/a>, um bom uso da tipografia pode ser fundamental para garantir um bom desempenho da sua estrat\u00e9gia.<\/p>\n\n\n\n<p>Neste artigo ensinarei alguns dos princ\u00edpios desse tipo de t\u00e9cnica para que voc\u00ea possa come\u00e7ar a criar textos e imagens tipogr\u00e1ficas incr\u00edveis para seu <a href=\"https:\/\/rockcontent.com\/br\/blog\/como-criar-um-blog\/\" target=\"_blank\" rel=\"noopener noreferrer\">blog<\/a>!<\/p>\n\n\n\n[post-table-index]\n\n\n\n[rock-convert-pdf id=&#8221;10129&#8243;]\n\n\n\n<h2 class=\"wp-block-heading\">O que \u00e9 tipografia?<\/h2>\n\n\n\n<p>Tipografia, na nomenclatura correta, <strong>\u00e9 a impress\u00e3o dos tipos<\/strong> (como s\u00e3o conhecidas as fontes). Por\u00e9m, como a maior parte da escrita hoje \u00e9 feita digitalmente, esse significado caiu em desuso e passou a <strong>abranger todo o estudo, cria\u00e7\u00e3o e aplica\u00e7\u00e3o dos caracteres, estilos, formatos e arranjos visuais das palavras<\/strong>.<\/p>\n\n\n\n<p>Por serem a base da comunica\u00e7\u00e3o escrita, os tipos precisam ser muito bem trabalhados para serem adequados \u00e0 mensagem que voc\u00ea deseja passar, o <b>modo<\/b> como voc\u00ea deseja passar essa mensagem, \u00e0 sua disposi\u00e7\u00e3o com os demais elementos gr\u00e1ficos e, claro, \u00e0 sua <b>boa legibilidade.<\/b><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Alguns Conceitos B\u00e1sicos<\/h2>\n\n\n\n<p>Vamos entender alguns conceitos b\u00e1sicos sobre tipografia:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Classifica\u00e7\u00e3o de fontes<\/h3>\n\n\n\n<p>Existem 4 classifica\u00e7\u00f5es prim\u00e1rias de estilo, nos quais a grande parte das <a href=\"https:\/\/rockcontent.com\/br\/blog\/baixar-fontes\/\" target=\"_blank\" rel=\"noopener noreferrer\">fontes<\/a> existentes se encaixam: &nbsp;(sem serifa), <em>Serif<\/em> (com serifa), <em>Script<\/em> (simula a escrita \u00e0 m\u00e3o) e <em>Dingbat<\/em> (composta por s\u00edmbolos diversos no lugar das letras do alfabeto).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-opt-id=508106292  fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/05\/tipografia-6.png\" alt=\"Tipografia: Sans Serif, serif, script e dingbat\" class=\"wp-image-10138\" \/><\/figure><\/div>\n\n\n\n<p>As fontes com serifa s\u00e3o as mais adequadas para livros e grandes volumes de texto impresso, j\u00e1 que auxiliam a leitura com maior continuidade e sem tanto cansa\u00e7o visual.<\/p>\n\n\n\n<p>As fontes sem serifa s\u00e3o mais utilizadas em t\u00edtulos, chamadas e nos textos digitais (neste caso, as serifas agem mais como um empecilho na visualiza\u00e7\u00e3o das letras nas telas).<\/p>\n\n\n\n<p>Cada estilo comporta in\u00fameras fam\u00edlias de fontes diferentes. Hoje em dia, com a tecnologia digital, \u00e9 praticamente imposs\u00edvel contar o n\u00famero de tipos, que cresce exponencialmente.<\/p>\n\n\n\n<p>Cada fam\u00edlia, por sua vez, pode abrigar algumas ou todas as varia\u00e7\u00f5es: Thin, Light, Regular, Medium ou Semi Bold, Bold e Black ou Extra Bold (todas com a varia\u00e7\u00e3o em It\u00e1lico tamb\u00e9m).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-opt-id=1731385333  fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/05\/tipografia-12.png\" alt=\"Tipografia\" class=\"wp-image-10132\" \/><\/figure><\/div>\n\n\n\n<p>Algumas fam\u00edlias tamb\u00e9m possuem varia\u00e7\u00f5es de largura para seus caracteres: Condensado, Regular ou Estendido. Mas aten\u00e7\u00e3o! Tente evitar de alongar ou contrair a fonte manualmente em softwares de edi\u00e7\u00e3o, j\u00e1 que pode deformar o tipo completamente. <strong>Use somente as varia\u00e7\u00f5es que j\u00e1 v\u00eam por padr\u00e3o<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-opt-id=1603835958  fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/05\/tipografia-8.png\" alt=\"Tipografia\" class=\"wp-image-10140\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Medidas tipogr\u00e1ficas<\/h3>\n\n\n\n<p>Existem alguns conceitos que acompanham as fontes na tipografia. Os caracteres possuem linhas de refer\u00eancia que delimitam o espa\u00e7o que eles podem alcan\u00e7ar. Cada fam\u00edlia de tipo tem as suas. Essas linhas s\u00e3o conhecidas como: ascendente, linha de caixa alta, linha de base e descendente.<\/p>\n\n\n\n<p><strong>Linha de caixa alta<\/strong> \u00e9 a altura correspondente \u00e0s letras em caixa alta (A, B, C etc).<\/p>\n\n\n\n<p><strong>Ascendente<\/strong> \u00e9 a linha que acompanha a altura dos caracteres <b>b<\/b>,<b> d<\/b>, <b>f<\/b>, <b>h<\/b>, <b>k<\/b>, <b>l<\/b> e <b>t<\/b>. E \u00e9 a altura m\u00e1xima do corpo da fonte.<\/p>\n\n\n\n<p><strong>Linha de base<\/strong> \u00e9 a linha na qual a maioria dos tipos (com exce\u00e7\u00e3o das partes descendentes) tem como base.<\/p>\n\n\n\n<p><strong>Descendente<\/strong> \u00e9 a linha que acompanha qu\u00e3o abaixo da linha de centro as letras <b>g<\/b>, <b>j<\/b>, <b>p<\/b> e <b>q<\/b> v\u00e3o.<\/p>\n\n\n\n<p>E n\u00e3o tem regras apenas para a altura do caractere n\u00e3o. Existem medidas conhecidas como leading, tracking e kerning.<\/p>\n\n\n\n<p>Leading \u00e9 a dist\u00e2ncia <b>entre linhas<\/b>;<\/p>\n\n\n\n<p>Tracking, por sua vez, \u00e9 a dist\u00e2ncia <b>entre palavras;<\/b><\/p>\n\n\n\n<p>Kerning \u00e9 a dist\u00e2ncia <b>entre caracteres.<\/b><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hierarquiza\u00e7\u00e3o visual<\/h3>\n\n\n\n<p>\u00c9 poss\u00edvel, tamb\u00e9m, criar <b>hierarquiza\u00e7\u00e3o visual<\/b> na escrita, como eu acabei de fazer e fa\u00e7o ao longo de todo o texto. O uso de diferentes tamanhos, fam\u00edlias, dist\u00e2ncias e varia\u00e7\u00f5es da mesma fonte, \u00e9 capaz de mudar toda a forma de como o texto ser\u00e1 lido.<\/p>\n\n\n\n<p>Os designers no processo de cria\u00e7\u00e3o de layouts, sejam digitais ou impressos, levam em conta a hierarquiza\u00e7\u00e3o do texto para priorizar frases ou conte\u00fados, tanto nas informa\u00e7\u00f5es mais importantes quanto nas menos importantes.<\/p>\n\n\n\n<p>Normalmente, as <strong>frases escritas com a fonte maior ou bold s\u00e3o lidas primeiro<\/strong> pois chamam mais a aten\u00e7\u00e3o do leitor.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-opt-id=662314560  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/05\/tipografia-9.png\" alt=\"Tipografia\" class=\"wp-image-10141\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Composi\u00e7\u00e3o gr\u00e1fica<\/h3>\n\n\n\n<p>Outro fator important\u00edssimo de se observar durante a escrita \u00e9 a composi\u00e7\u00e3o gr\u00e1fica do texto com os demais elementos. O espa\u00e7o dispon\u00edvel para acomodar o que ser\u00e1 escrito determinar\u00e1 como este texto ficar\u00e1 alinhado.<\/p>\n\n\n\n<p>Existem 4 tipos principais de alinhamento:<\/p>\n\n\n\n<p>Alinhado para Esquerda;<\/p>\n\n\n\n<p>Alinhado para Direita;<\/p>\n\n\n\n<p>Alinhado no Centro;<\/p>\n\n\n\n<p>E justificado, que \u00e9 o texto alinhado em toda a extens\u00e3o da p\u00e1gina e, muitas vezes, pode criar grandes espa\u00e7os entre as palavras para compensar o tamanho da folha.<\/p>\n\n\n\n<p>Alguns softwares que possuem a fun\u00e7\u00e3o de diagrama\u00e7\u00e3o de textos, como o <a href=\"https:\/\/www.adobe.com\/br\/products\/indesign.html\" target=\"_blank\" rel=\"noopener noreferrer\">InDesign<\/a> e <a href=\"https:\/\/www.adobe.com\/br\/products\/illustrator.html\" target=\"_blank\" rel=\"noopener noreferrer\">Illustrator<\/a> (Adobe), disponibilizam algumas op\u00e7\u00f5es de alinhamento que facilitam a nossa vida. No programa, \u00e9 poss\u00edvel tirar a hifeniza\u00e7\u00e3o e alinhar tamb\u00e9m a \u00faltima linha recuada, fazendo com que esses espa\u00e7os mostrados acima n\u00e3o apare\u00e7am.<\/p>\n\n\n\n<div class=\"wp-block-image wp-image-10133 size-full\"><figure class=\"aligncenter\"><img data-opt-id=1140092902  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/05\/tipografia-1.png\" alt=\"Tipografia: interface das ferramentas Adobe\" class=\"wp-image-10133\" \/><figcaption>Interface da caixa de ferramentas para par\u00e1grafo presente nos produtos da Adobe.<\/figcaption><\/figure><\/div>\n\n\n\n<p>Todos esses fatores v\u00e3o influenciar na <b>legibilidade<\/b> e <b>leiturabilidade<\/b> do seu texto. Legibilidade \u00e9 a facilidade de como as letras s\u00e3o diferenciadas uma das outras. J\u00e1 leiturabilidade diz respeito a leitura da mensagem e com a flu\u00eancia dos caracteres na frase.<\/p>\n\n\n\n<p>Juntos, <strong>esses conceitos formam os pilares da aplica\u00e7\u00e3o tipogr\u00e1fica<\/strong>. Se bem trabalhados, s\u00e3o respons\u00e1veis por tornar um texto prazeroso e confort\u00e1vel de ser lido.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como aplicar esses conceitos?<\/h2>\n\n\n\n<p>A escolha dessas vari\u00e1veis vai depender de qual mensagem voc\u00ea quer passar e de <b>como<\/b> voc\u00ea quer que ela seja recebida pelo leitor.<\/p>\n\n\n\n<p>Cada fonte reflete como sua mensagem ser\u00e1 lida. Ela pode passar alegria e euforia ou tristeza e melancolia (olha, at\u00e9 rimou!).<\/p>\n\n\n\n<p>E n\u00e3o somente emo\u00e7\u00f5es, elas tamb\u00e9m podem transmitir seguran\u00e7a, seriedade, instabilidade, descontra\u00e7\u00e3o e mais diversas sensa\u00e7\u00f5es. Poderia ficar o texto inteiro listando!<\/p>\n\n\n\n<p>Por isso \u00e9 muito importante escolher um tipo adequado para sua finalidade, j\u00e1 que muitas vezes pode ocorrer de causar estranhamento no leitor se essa combina\u00e7\u00e3o n\u00e3o acontecer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Erros mais comuns<\/h2>\n\n\n\n<p>Algumas coisas podem dar <b>bem<\/b> errado durante a escrita do seu texto. Por exemplo, se eu escrever uma frase s\u00e9ria com uma fonte brincalhona, o modo que eu gostaria que a mensagem fosse passada n\u00e3o vai acontecer.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/05\/tipografia-2.png\"><img data-opt-id=572160601  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/05\/tipografia-2.png\" alt=\"Tipografia\" class=\"wp-image-10134\" \/><\/a><\/figure><\/div>\n\n\n\n<p>N\u00e3o parece muito s\u00e9rio n\u00e3o \u00e9? Isso aconteceu porque o tipo que eu escolhi para a frase n\u00e3o era nada adequado para o sentimento que eu gostaria de passar. Ou pior, voc\u00ea pode escolher a fonte e a cor menos adequadas.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/05\/tipografia.png\"><img data-opt-id=1510817072  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/05\/tipografia.png\" alt=\"Tipografia\" class=\"wp-image-10143\" \/><\/a><\/figure><\/div>\n\n\n\n<p>A legibilidade e a leiturabilidade s\u00e3o fatores que tamb\u00e9m precisam ser sempre observados. Parece algo bem \u00f3bvio, n\u00e3o \u00e9? Mas na verdade \u00e9 bem f\u00e1cil se enganar nesse aspecto.<\/p>\n\n\n\n<p>\u00c0s vezes voc\u00ea v\u00ea uma fonte que gosta bastante e parece bem adequada ao seu texto, mas, quando coloca ele como fonte principal, a leitura vira um pesadelo.<\/p>\n\n\n\n<p>Outra coisa que pode ocorrer \u00e9, certas vezes, voc\u00ea escolher usar um tipo que \u00e9 bastante leg\u00edvel, mas que no texto fica sem leiturabilidade<b>. <\/b>Ou seja, torna a leitura mais lenta e dif\u00edcil.<\/p>\n\n\n\n<p>Isso pode ocorrer tanto pela escolha de um tipo n\u00e3o adequado, quanto pela falta de ritmo entre as letras.<\/p>\n\n\n\n<p>PoR eXeMpLo, EsSa FrAsE \u00e9 BeM SiMpLeS, mAs SuA lEiTuRa \u00c9 p\u00c9sSiMa (mas que faria um sucesso no nosso saudoso <a href=\"https:\/\/rockcontent.com\/br\/blog\/orkut\/\" target=\"_blank\" rel=\"noopener noreferrer\">Orkut<\/a>, faria).<\/p>\n\n\n\n<p>Textos com as letras muito pr\u00f3ximas umas das outras ficam densos e dif\u00edceis de ler, tornando o processo mais demorado tamb\u00e9m.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-opt-id=864408733  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/05\/tipografia-5.png\" alt=\"Tipografia\" class=\"wp-image-10137\" \/><\/figure><\/div>\n\n\n\n<p>\u00c9 importante tamb\u00e9m de frisar o bom <b>contraste<\/b> do seu texto. J\u00e1 me encontrei diversas vezes com frases que eu simplesmente n\u00e3o conseguia ler ou tinha muita dificuldade por conta das <a href=\"https:\/\/rockcontent.com\/br\/blog\/psicologia-das-cores\/\">cores usadas<\/a> oferecerem pouco contraste. Inclusive, j\u00e1 fiz isso bastante tamb\u00e9m. Fique sempre atento!<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-opt-id=1776358691  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/05\/tipografia-10.png\" alt=\"Tipografia\" class=\"wp-image-10130\" \/><\/figure><\/div>\n\n\n\n<p>Outro fator que pode atrapalhar sua mensagem \u00e9 o espa\u00e7amento das linhas. Se elas estiverem muito pr\u00f3ximas, a leitura fica cansativa e visualmente densa, deixando de se tornar uma experi\u00eancia agrad\u00e1vel.<\/p>\n\n\n\n<p>E acredite, nada \u00e9 pior do que n\u00e3o ter leitores para seu texto (ou ter e eles acharem sua escrita bem ruim).<\/p>\n\n\n\n<p>Uma maneira bem pr\u00e1tica de se evitar esses erros, \u00e9 o uso de uma ferramenta eficiente: a <a href=\"https:\/\/rockcontent.com\/br\/blog\/personas\/\" target=\"_blank\" rel=\"noreferrer noopener\">cria\u00e7\u00e3o de persona<\/a>. \u00c9 sempre importante saber exatamente para quem voc\u00ea escreve e escolher, assim, a melhor fonte para se comunicar com ela. Se quiser saber mais de personas, existe um \u00f3timo post <a href=\"https:\/\/rockcontent.com\/br\/blog\/persona-ou-seo\/\" target=\"_blank\" rel=\"noopener noreferrer\">aqui no blog<\/a>, n\u00e3o deixe de conferir!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cases de marcas que mudaram a tipografia e que deu certo (ou n\u00e3o!)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Uber:<\/h3>\n\n\n\n<p>Em 2016, a empresa de servi\u00e7os de transporte Uber anunciou que mudaria sua identidade visual inteira. E com seu <a href=\"https:\/\/rockcontent.com\/br\/blog\/como-criar-um-logotipo\/\" target=\"_blank\" rel=\"noopener noreferrer\">logotipo<\/a> n\u00e3o foi diferente. A mudan\u00e7a nele ocorreu porque a leitura de seu logo antigo era comprometida devido a utiliza\u00e7\u00e3o de uma fonte muito Thin.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-opt-id=1296014621  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/05\/tipografia-7.png\" alt=\"Tipografia: Uber\" class=\"wp-image-10139\" \/><\/figure><\/div>\n\n\n\n<p>O espa\u00e7amento entre as letras tamb\u00e9m foi alterado e, com esse estudo tipogr\u00e1fico, a nova identidade visual da empresa ficou bem mais agrad\u00e1vel para a leitura e utiliza\u00e7\u00e3o no ambiente mobile.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Netflix:<\/h3>\n\n\n\n<p>A empresa mudou seu logo em 2014 com uso de uma tipografia mais simples e flat que o visual que eles adotavam. Provavelmente seguiram essa linha j\u00e1 que \u00e9 uma tend\u00eancia no design nos \u00faltimos anos.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-opt-id=1611906085  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/05\/tipografia-11.png\" alt=\"Tipografia: Netflix\" class=\"wp-image-10131\" \/><\/figure><\/div>\n\n\n\n<p>A Netflix causou certas diverg\u00eancias apresentando essa nova tipologia. Eu particularmente gostei bastante, pois acredito que a suaviza\u00e7\u00e3o da fonte deixou o logo mais moderno e clean.<\/p>\n\n\n\n<p>Agora, se preparem porque v\u00eam a\u00ed alguns casos <b>graves<\/b>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Gap:<\/h3>\n\n\n\n<p>A Gap, empresa de vestu\u00e1rio, possui um logotipo bastante cl\u00e1ssico que muitas pessoas j\u00e1 se familiarizaram. Por\u00e9m, em 2010 a empresa decidiu colocar em seu site um novo logo com uma fonte bastante diferente.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-opt-id=87181717  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/05\/tipografia-4.png\" alt=\"Tipografia: GAP\" class=\"wp-image-10136\" \/><\/figure><\/div>\n\n\n\n<p>A rea\u00e7\u00e3o foi desastrosa. In\u00fameros usu\u00e1rios foram at\u00e9 as <a href=\"https:\/\/rockcontent.com\/br\/blog\/tudo-sobre-redes-sociais\/\">redes sociais<\/a> da empresa indignados com a mudan\u00e7a. Consideraram o novo design uma solu\u00e7\u00e3o pregui\u00e7osa e que n\u00e3o reflete a marca que eles conheciam. O resultado? A Gap voltou atr\u00e1s e continuou usando o logo antigo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Stock Car:<\/h3>\n\n\n\n<p>A empresa de competi\u00e7\u00f5es automotivas decidiu em 2013 mudar seu logo, principalmente na tipografia. E este foi o resultado:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-opt-id=1608136816  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/05\/tipografia-3.png\" alt=\"Tipografia: Stock Car\" class=\"wp-image-10135\" \/><\/figure><\/div>\n\n\n\n<p>Muitas pessoas ao verem a nova tipografia usada com os demais elementos considerou que a mudan\u00e7a com a fonte fez o logo parecer menos s\u00e9rio, como se fosse de uma empresa de brinquedos e n\u00e3o de uma competi\u00e7\u00e3o esportiva de fato.<\/p>\n\n\n\n<p>Apesar de todos esses casos, \u00e9 importante ressaltar: gosto \u00e9 pessoal. Claro que certas decis\u00f5es continuam ruins, mas todos os casos geraram diverg\u00eancias no p\u00fablico, inclusive os bons!<\/p>\n\n\n\n<p>Ent\u00e3o, pesquise bem e c<strong>onhe\u00e7a bastante seu p\u00fablico<\/strong> para usar a tipografia que definitivamente seja a mais adequada a ele.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como fazemos na Rock Content<\/h2>\n\n\n\n<p>Na Rock Content utilizamos algumas das fontes dispon\u00edveis no <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Fonts<\/a> para a produ\u00e7\u00e3o de nossas pe\u00e7as gr\u00e1ficas, escrita no blog e diagrama\u00e7\u00e3o de ebooks.<\/p>\n\n\n\n<p>Visamos proporcionar a melhor leitura para os diferentes meios, e as fontes dispon\u00edveis no site s\u00e3o excelentes nisso.<\/p>\n\n\n\n<p>Para os blogs usamo a fam\u00edlia Roboto. O tipo que mais usamos aqui. A Google, enquanto desenvolve o Android, pesquisa bastante a intera\u00e7\u00e3o do usu\u00e1rio com o smartphone. E trabalhando em cima disso eles desenvolveram a fonte que seria utilizada nos celulares rodando o sistema operacional.<\/p>\n\n\n\n<p>A fonte foi criada para ter <strong>boa leitura e ser neutra<\/strong>, podendo ser usada em qualquer frase ou momento.<\/p>\n\n\n\n<p>Al\u00e9m dela, usamos as seguintes fam\u00edlias de fontes: Roboto Slab, Roboto Mono e Raleway. Em cada caso utilizamos os tipos mais adequados, seja nos ebooks, posts ou nas imagens institucionais internas e externas da empresa.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-opt-id=1464926034  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2019\/11\/tipografia-da-rock.jpg\" alt=\"\" class=\"wp-image-43795\" \/><\/figure><\/div>\n\n\n\n<p>Como vimos, a tipografia \u00e9 um dos pilares do design gr\u00e1fico e tem uma import\u00e2ncia <b>extrema<\/b>, tanto para a produ\u00e7\u00e3o de imagens quanto para textos. As fontes podem mudar completamente a mensagem e como ela vai ser passada para o p\u00fablico.<\/p>\n\n\n\n<p>Por isso, guarde bem essas dicas! Pesquise bem seu p\u00fablico, use fontes com boa leiturabilidade, legibilidade, contraste, cor e espa\u00e7amento para uma leitura adequada e prazerosa.<\/p>\n\n\n\n<p>N\u00e3o deixe de pesquisar qual fam\u00edlia de fonte utilizar para comunicar sua mensagem de maneira eficiente, pois como vimos, muitas empresas se posicionam no mercado (e aos olhos dos consumidores) atrav\u00e9s de seu logo. Acredite, voc\u00ea n\u00e3o vai se arrepender de focar mais nessa \u00e1rea e s\u00f3 vai colher bons resultados!<\/p>\n\n\n\n<p>Espero que esse texto tenha sido de valor para quem quer se interessar mais pelos conceitos tipogr\u00e1ficos e quer aplic\u00e1-los na sua estrat\u00e9gia. Caso queira saber um pouco mais onde procurar por fontes,<a href=\"https:\/\/rockcontent.com\/br\/blog\/baixar-fontes\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong> recomendo este post com sites muito bons<\/strong><\/a>!<\/p>\n\n\n\n<p>E at\u00e9 a pr\u00f3xima!<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/materiais.rockcontent.com\/marketing-digital?utm_source=mktc&amp;utm_medium=banner-fim\" target=\"_blank\" rel=\"noopener noreferrer\"><img data-opt-id=125934978  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2018\/02\/CTA-marketing-digital-1.jpg\" alt=\"ebook marketing digital\" class=\"wp-image-14022\" \/><\/a><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Tipografia \u00e9 o estudo, cria\u00e7\u00e3o e aplica\u00e7\u00e3o dos caracteres, estilos, formatos e arranjos visuais das palavras. Os tipos, conhecidos como fontes ou tipos de letra, indicam a composi\u00e7\u00e3o visual de um texto.<\/p>\n","protected":false},"author":1,"featured_media":10822,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-77121","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>O que \u00e9 Tipografia e como us\u00e1-la a seu favor: aprenda aqui!<\/title>\n<meta name=\"description\" content=\"Entenda o que \u00e9 tipografia e saiba como usar um dos pilares do design gr\u00e1fico a favor do seu site ou blog.Veja os principais tipos de letras!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pingback.com\/br\/resources\/tipografia\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"O que \u00e9 Tipografia e como us\u00e1-la a seu favor: aprenda aqui!\" \/>\n<meta property=\"og:description\" content=\"Entenda o que \u00e9 tipografia e saiba como usar um dos pilares do design gr\u00e1fico a favor do seu site ou blog.Veja os principais tipos de letras!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pingback.com\/br\/resources\/tipografia\/\" \/>\n<meta property=\"og:site_name\" content=\"Pingback\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-12T00:00:00+00:00\" \/>\n<meta name=\"author\" content=\"Pingback\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pingbackoficial\" \/>\n<meta name=\"twitter:site\" content=\"@pingbackoficial\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pingback\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/tipografia\/\",\"url\":\"https:\/\/pingback.com\/br\/resources\/tipografia\/\",\"name\":\"O que \u00e9 Tipografia e como us\u00e1-la a seu favor: aprenda aqui!\",\"isPartOf\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/tipografia\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/tipografia\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2018-04-12T00:00:00+00:00\",\"author\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66\"},\"description\":\"Entenda o que \u00e9 tipografia e saiba como usar um dos pilares do design gr\u00e1fico a favor do seu site ou blog.Veja os principais tipos de letras!\",\"breadcrumb\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/tipografia\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pingback.com\/br\/resources\/tipografia\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/tipografia\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/tipografia\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/pingback.com\/br\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tipografia: como usar um dos pilares do Design Gr\u00e1fico a seu favor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#website\",\"url\":\"https:\/\/pingback.com\/br\/resources\/\",\"name\":\"Pingback Blog\",\"description\":\"Marketing for builders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pingback.com\/br\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66\",\"name\":\"Pingback\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"caption\":\"Pingback\"},\"description\":\"Pingback: Marketing for builders.\",\"sameAs\":[\"https:\/\/pingback.com\",\"https:\/\/www.instagram.com\/pingbackoficial\/\",\"https:\/\/www.linkedin.com\/company\/pingbackoficial\/\",\"https:\/\/x.com\/pingbackoficial\",\"https:\/\/www.youtube.com\/@pingbackoficial\"],\"url\":\"https:\/\/pingback.com\/br\/resources\/author\/adm1n\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"O que \u00e9 Tipografia e como us\u00e1-la a seu favor: aprenda aqui!","description":"Entenda o que \u00e9 tipografia e saiba como usar um dos pilares do design gr\u00e1fico a favor do seu site ou blog.Veja os principais tipos de letras!","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:\/\/pingback.com\/br\/resources\/tipografia\/","og_locale":"pt_BR","og_type":"article","og_title":"O que \u00e9 Tipografia e como us\u00e1-la a seu favor: aprenda aqui!","og_description":"Entenda o que \u00e9 tipografia e saiba como usar um dos pilares do design gr\u00e1fico a favor do seu site ou blog.Veja os principais tipos de letras!","og_url":"https:\/\/pingback.com\/br\/resources\/tipografia\/","og_site_name":"Pingback","article_published_time":"2018-04-12T00:00:00+00:00","author":"Pingback","twitter_card":"summary_large_image","twitter_creator":"@pingbackoficial","twitter_site":"@pingbackoficial","twitter_misc":{"Escrito por":"Pingback","Est. tempo de leitura":"15 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pingback.com\/br\/resources\/tipografia\/","url":"https:\/\/pingback.com\/br\/resources\/tipografia\/","name":"O que \u00e9 Tipografia e como us\u00e1-la a seu favor: aprenda aqui!","isPartOf":{"@id":"https:\/\/pingback.com\/br\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pingback.com\/br\/resources\/tipografia\/#primaryimage"},"image":{"@id":"https:\/\/pingback.com\/br\/resources\/tipografia\/#primaryimage"},"thumbnailUrl":"","datePublished":"2018-04-12T00:00:00+00:00","author":{"@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66"},"description":"Entenda o que \u00e9 tipografia e saiba como usar um dos pilares do design gr\u00e1fico a favor do seu site ou blog.Veja os principais tipos de letras!","breadcrumb":{"@id":"https:\/\/pingback.com\/br\/resources\/tipografia\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pingback.com\/br\/resources\/tipografia\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/br\/resources\/tipografia\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/pingback.com\/br\/resources\/tipografia\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/pingback.com\/br\/resources\/"},{"@type":"ListItem","position":2,"name":"Tipografia: como usar um dos pilares do Design Gr\u00e1fico a seu favor"}]},{"@type":"WebSite","@id":"https:\/\/pingback.com\/br\/resources\/#website","url":"https:\/\/pingback.com\/br\/resources\/","name":"Pingback Blog","description":"Marketing for builders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pingback.com\/br\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66","name":"Pingback","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","caption":"Pingback"},"description":"Pingback: Marketing for builders.","sameAs":["https:\/\/pingback.com","https:\/\/www.instagram.com\/pingbackoficial\/","https:\/\/www.linkedin.com\/company\/pingbackoficial\/","https:\/\/x.com\/pingbackoficial","https:\/\/www.youtube.com\/@pingbackoficial"],"url":"https:\/\/pingback.com\/br\/resources\/author\/adm1n\/"}]}},"_links":{"self":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/77121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/comments?post=77121"}],"version-history":[{"count":0,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/77121\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/media?parent=77121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/categories?post=77121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/tags?post=77121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}