{"id":257,"date":"2022-08-12T10:56:02","date_gmt":"2022-08-12T13:56:02","guid":{"rendered":"https:\/\/jupisa.net\/site\/?p=257"},"modified":"2022-08-12T16:14:45","modified_gmt":"2022-08-12T19:14:45","slug":"fonte-importa","status":"publish","type":"post","link":"https:\/\/jupisa.net\/site\/fonte-importa\/","title":{"rendered":"A fonte importa"},"content":{"rendered":"\n
\"\"\/<\/figure>\n\n\n\n

Mas pensando no digital, \u00e9 bem mais do que est\u00e9tica.<\/h2>\n\n\n\n

A fonte \u00e9 parte fundamental para representar a marca, d\u00e1 o tom do discurso, se \u00e9 leve ou pesado, est\u00e1vel e s\u00f3lido, incisiva ou suave.<\/p>\n\n\n\n

A\u00ed voc\u00ea encontra aquela fonte perfeita, que atende a tudo que precisa representar, e por isso mesmo, ela deve estar presente no site<\/em>, no impresso, nos e-mails<\/em>\u2026<\/p>\n\n\n\n

No trabalho tivemos esse problema, e eu e a @Stella Burin<\/a> conversamos muito a respeito, o que me fez come\u00e7ar a pesquisar sobre o assunto. Comecei com a acessibilidade, mas sabe como \u00e9… Um assunto puxa o outro e acabei descobrindo 6 pontos importantes a considerar quando se escolhe uma fonte:<\/p>\n\n\n\n

  1. Custo<\/li>
  2. Web Fonts<\/em><\/li>
  3. Acesso e seguran\u00e7a<\/li>
  4. E-mails<\/em><\/li>
  5. Tempo de carregamento<\/li>
  6. Acessibilidade<\/li><\/ol>\n\n\n\n

    Sei que virou um text\u00e3o, mas eu me diverti pesquisando, pode ser que possa ser \u00fatil para voc\u00ea =)<\/p>\n\n\n\n

    A seguir eu fa\u00e7o uma an\u00e1lise de cada um desses pontos:<\/p>\n\n\n\n

    1. Custo<\/h3>\n\n\n\n

    Uma fonte \u00e9 um software<\/em>, e a licen\u00e7a funciona do mesmo modo<\/a>. Cada criador de fonte pode escolher como vai cobrar a fonte. Outras empresas de software <\/em>costumam comprar pacotes de fontes e incluir nos seus produtos. A Microsoft faz isso com o Windows e com o Office, a Apple com macOS, assim como a Adobe tamb\u00e9m j\u00e1 carrega uma s\u00e9rie de fontes j\u00e1 licenciadas e embutidas nas aplica\u00e7\u00f5es.<\/p>\n\n\n\n

    Mas nem todas as fontes s\u00e3o assim. E o pre\u00e7o para ter no seu computador e usar na web <\/em>variam muito.<\/p>\n\n\n\n

    2. Web fonts<\/h3>\n\n\n\n

    Usar a fonte no site \u00e9 o segundo problema. A fonte precisa ser uma vers\u00e3o otimizada para web. O pre\u00e7o de licen\u00e7a de uma fonte propriet\u00e1ria pode chegar a US$ 200,000 (dependendo de quantos estilos e quantos acessos tem o site).<\/p>\n\n\n\n

    Ah, e tamb\u00e9m temos o OFL – Open Font License<\/em>, uma fonte open sourc<\/em>e, muito usada pelo Google, por exemplo. E eles at\u00e9 ajudam criando um link <\/em>para voc\u00ea n\u00e3o precisar nem copiar a fonte para o seu servidor web<\/em>!<\/p>\n\n\n\n

    Genial, n\u00e9? Se n\u00e3o fosse o terceiro ponto…<\/p>\n\n\n\n

    3. Acesso e seguran\u00e7a<\/h3>\n\n\n\n

    O servidor em que est\u00e1 o seu site <\/em>deve permitir voc\u00ea acessar sites <\/em>externos, sen\u00e3o n\u00e3o ir\u00e1 funcionar. Mas mesmo que o seu site <\/em>permita que voc\u00ea use a fonte de outro local, pode ser quem esteja acessando tenha um firewall <\/em>que n\u00e3o permita que o site <\/em>fa\u00e7a links <\/em>externos. E o que acontece? Sua fonte escolhida com carinho n\u00e3o aparece. E se no c\u00f3digo n\u00e3o foi definida uma fonte secund\u00e1ria, pode n\u00e3o dar para ler nada. E por falar em fonte secund\u00e1ria…<\/p>\n\n\n\n

    4. E-mails<\/h3>\n\n\n\n

    E-mail<\/em> s\u00e3o os mais dif\u00edceis de conseguir uma consist\u00eancia de fontes. \u00c9 poss\u00edvel usar fontes importadas hoje em dia, mas depende muito do cliente de e-mail<\/em> que o usu\u00e1rio estiver. A estrat\u00e9gia mais segura \u00e9 usar uma das famosas fontes de sistema<\/strong> fontes presentes em quase todos os sistemas operacionais, como Arial, Tahoma, Verdana e Times New Roman.<\/p>\n\n\n\n

    5. Tempo de carregamento<\/h3>\n\n\n\n

    De 2011 para 2018, houve um crescimento de 850% dos sites <\/em>usavam fontes customizadas.<\/a> E um impacto muito grande \u00e9 o tempo de carregamento (principalmente para fontes de outros servidores). O keycdn.com fez um teste de performance e apenas uma fonte inserida pode levar at\u00e9 200 ms a mais para carregar e renderizar na tela.<\/p>\n\n\n\n

    6. Acessibilidade<\/h3>\n\n\n\n

    Sabemos que os usu\u00e1rios l\u00eaem somente 28% das palavras numa p\u00e1gina<\/a> (isso quer dizer que, ao contr\u00e1rio de voc\u00ea, a maioria das pessoas n\u00e3o chegou at\u00e9 aqui). Com essa baixa taxa de leitura, qualquer dificuldade, por menor que seja, vai reduzir ainda mais a leitura.<\/p>\n\n\n\n

    Legibilidade \u00e9 o n\u00edvel mais baixo de acessibilidade de um texto:<\/a> \u00e9 o que permite que a pessoa consiga distinguir entre os caracteres facilmente para identificar palavras. (por curiosidade, os outros pontos de acessibilidade do texto s\u00e3o “n\u00edvel de leitura” – complexidade do texto  e “compreens\u00e3o” – que \u00e9 a interpreta\u00e7\u00e3o do texto).<\/p>\n\n\n\n

    Este estudo indica que fontes condensadas s\u00e3o mais dif\u00edceis de ler<\/a>, assim como textos em mai\u00fasculas. <\/p>\n\n\n\n

    E h\u00e1 um padr\u00e3o recomendado<\/a>:<\/p>\n\n\n\n

    Altura da linha (principal) pelo menos 1.5x o tamanho da fonte;<\/p>\n\n\n\n

    Espa\u00e7amento entre os par\u00e1grafos<\/strong> de pelo menos 2x<\/strong> o tamanho da fonte;<\/p>\n\n\n\n

    Espa\u00e7amento entre as letras (tracking) <\/strong>pelo menos 0.12x<\/strong> o  tamanho da fonte;<\/p>\n\n\n\n

    Espa\u00e7amento entre as palavras<\/strong> de pelo menos  0.16x<\/strong> o tamanho da fonte<\/p>\n\n\n\n

    Fontes e refer\u00eancias:<\/h3>\n\n\n\n

    Quando a refer\u00eancia est\u00e1 diretamente ligada, j\u00e1 coloquei o link no texto, mas li outras coisas que achei interessantes e deixei listado tudo aqui:<\/p>\n\n\n\n

    https:\/\/www.nngroup.com\/articles\/best-font-for-online-reading\/<\/a><\/p>\n\n\n\n

    https:\/\/www.nngroup.com\/articles\/legibility-readability-comprehension\/<\/a><\/p>\n\n\n\n

    https:\/\/dl.acm.org\/doi\/10.1145\/3502222<\/a><\/p>\n\n\n\n

    https:\/\/uxdesign.cc\/testing-fonts-for-accessibility-817f47011078<\/a><\/p>\n\n\n\n

    https:\/\/www.w3.org\/TR\/WCAG21\/#text-spacing<\/a><\/p>\n\n\n\n

    https:\/\/www.nngroup.com\/articles\/glanceable-fonts\/<\/a><\/p>\n\n\n\n

    https:\/\/designshack.net\/articles\/typography\/what-is-a-font-license-and-do-i-need-one\/<\/a><\/p>\n\n\n\n

    https:\/\/www.keycdn.com\/blog\/web-font-performance<\/a><\/p>\n\n\n\n

    \nhttps:\/\/meta.myfonts.com\/post\/86217566043\/usage-in-a-logo\n<\/div><\/figure>\n\n\n\n

    Imagem<\/strong>: https:\/\/www.reddit.com\/r\/memes\/comments\/cr840h\/font_matters\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    Mas pensando no digital, \u00e9 bem mais do que est\u00e9tica. A fonte \u00e9 parte fundamental para representar a marca, d\u00e1 o tom do discurso, se \u00e9 leve ou pesado, est\u00e1vel e s\u00f3lido, incisiva ou suave. A\u00ed voc\u00ea encontra aquela fonte perfeita, que atende a tudo que precisa representar, e por isso mesmo, ela deve estar… Continue a ler »A fonte importa<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":260,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"[\"title\",\"meta\",\"content\",\"tags\",\"post-navigation\"]","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-257","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/jupisa.net\/site\/wp-json\/wp\/v2\/posts\/257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jupisa.net\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jupisa.net\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jupisa.net\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jupisa.net\/site\/wp-json\/wp\/v2\/comments?post=257"}],"version-history":[{"count":6,"href":"https:\/\/jupisa.net\/site\/wp-json\/wp\/v2\/posts\/257\/revisions"}],"predecessor-version":[{"id":273,"href":"https:\/\/jupisa.net\/site\/wp-json\/wp\/v2\/posts\/257\/revisions\/273"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jupisa.net\/site\/wp-json\/wp\/v2\/media\/260"}],"wp:attachment":[{"href":"https:\/\/jupisa.net\/site\/wp-json\/wp\/v2\/media?parent=257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jupisa.net\/site\/wp-json\/wp\/v2\/categories?post=257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jupisa.net\/site\/wp-json\/wp\/v2\/tags?post=257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}