\n Aqui estamos discutindo apenas o link UX e tipografia, sem mencionar o papel da tipografia na forma\u00e7\u00e3o da personalidade visual do site, definindo sua marca e chamando a aten\u00e7\u00e3o do leitor. Confira este artigo<\/a> para saber mais.\n<\/p>\n \n A escolha da tipografia para o site desta igreja n\u00e3o apenas impulsiona o UX no site, mas tamb\u00e9m ajuda a moldar a identidade visual da marca).\n<\/p>\n \n Como impulsionar o UX em seu site otimizando a tipografia?\n<\/p>\n \n Existem v\u00e1rias maneiras de aumentar a experi\u00eancia do usu\u00e1rio em seu site, otimizando a tipografia. Como o UX e a tipografia est\u00e3o intimamente conectados, ao otimizar a tipografia, voc\u00ea tamb\u00e9m otimiza a legibilidade do seu texto e, assim, adiciona ao UX geral do seu site. Vejamos quais s\u00e3o as regras para otimizar a tipografia:\n<\/p>\n \n Se voc\u00ea deseja que seu site pare\u00e7a coerente e profissional, use at\u00e9 tr\u00eas fontes (n\u00e3o mais). Fontes diferentes em um site se chocam e distraem o usu\u00e1rio da leitura do texto. O emprego de v\u00e1rias fontes de apar\u00eancia semelhante ajuda a criar coer\u00eancia de UX em todas as p\u00e1ginas do site e libera os usu\u00e1rios da ado\u00e7\u00e3o de mudan\u00e7as frequentes de estilo.\n<\/p>\n \n Isso \u00e9 exatamente o que voc\u00ea deve evitar em seu site.\n<\/p>\n \n Muitas vezes, o emprego de apenas uma fonte \u00e9 suficiente. Se voc\u00ea ainda achar que precisa de algumas fontes, escolha fontes que tenham a mesma largura de caractere. Nesse caso, as fontes n\u00e3o v\u00e3o diferir muito umas das outras e distrair o leitor.\n<\/p>\n \n Este site de remodela\u00e7\u00e3o usa a fonte n\u00e3o convencional Six Caps para aumentar a identidade visual do site. Esta fonte \u00e9 combinada com Roboto Condensed para ter duas fontes, cujas larguras de caracteres correspondem.\n<\/p>\n \n Mais uma \u00f3tima ideia sobre como combinar algumas fontes \u00e9 casar as fontes que imitam a caligrafia com as regulares. A tipografia manuscrita adiciona um toque pessoal ao design geral do site e desenvolve o car\u00e1ter visual do site.\n<\/p>\n \n Este site tem um toque suave e feminino com a fonte Caveat Handwriting.\n<\/p>\n \n As serifas s\u00e3o as pequenas linhas nas extremidades dos tra\u00e7os das letras. Na tipografia impressa, as serifas ajudam as pessoas a reconhecer as letras impressas com mais rapidez e efici\u00eancia. Por\u00e9m, na tela, principalmente em tela n\u00e3o Retina, as serifas n\u00e3o ficam t\u00e3o bem delineadas como no papel, o que prejudica em parte a leitura.\n<\/p>\n \n Al\u00e9m de garantir melhor legibilidade, as fontes sem serifa falam de maneira mais ousada e minimalista.\n<\/p>\n \n Aqui, n\u00e3o estou argumentando que voc\u00ea deve abandonar completamente as fontes com serifa. Um conselho melhor seria ser mais cauteloso com eles e usar os que s\u00e3o limpos e precisos.\n<\/p>\n \n Por exemplo, este site de fotografia criativa usa a fonte Open Sans sans serif que ajuda o site a fazer uma declara\u00e7\u00e3o ousada, elegante e decisiva.\n<\/p>\n \n O espa\u00e7o na Internet \u00e9 ilimitado. \u00c9 por isso que n\u00e3o h\u00e1 necessidade de salv\u00e1-lo e optar por tamanhos de fonte pequenos que imp\u00f5em fadiga ocular adicional aos usu\u00e1rios. Leitores com vis\u00e3o prejudicada podem ter dificuldade em ler textos pequenos, enquanto mesmo os leitores com vis\u00e3o boa sentem fadiga e precisam fazer pausas para chegar ao final de, digamos, texto de 10 pontos.\n<\/p>\n \n Se n\u00e3o quiser que seus usu\u00e1rios se esforcem para ler o texto que voc\u00ea apresenta ou ampli\u00e1-lo, escolha 16pt + tamanhos de fonte. Esses tamanhos de fonte minimizam a fadiga ocular e ajudam os usu\u00e1rios a atingir seu objetivo em seu site sem exaust\u00e3o visual.\n<\/p>\n \n O site Malcolmy usa tipografia 16pt leg\u00edvel para suas p\u00e1ginas iniciais e do blog.\n<\/p>\n \n Em seu site, voc\u00ea n\u00e3o deve sobrecarregar todo o espa\u00e7o dispon\u00edvel com seu texto. Ao cuidar de um comprimento de linha ideal, voc\u00ea mant\u00e9m altos padr\u00f5es de experi\u00eancia de leitura. Se as linhas forem muito curtas, os olhos do leitor ter\u00e3o que ir para frente e para tr\u00e1s ao ler o texto, o que imp\u00f5e um cansa\u00e7o visual adicional. Se as linhas forem muito longas, \u00e9 muito dif\u00edcil se concentrar na palavra exata que voc\u00ea est\u00e1 lendo e muito f\u00e1cil de se perder.\n<\/p>\n \n Para evitar ambas as situa\u00e7\u00f5es adversas, limite-se a 60 caracteres por linha (para telas de tablet\/PC).\n<\/p>\n \n Esta imagem ilustra que os textos com linhas muito curtas ou muito longas s\u00e3o mais dif\u00edceis de ler do que os textos que se at\u00eam ao comprimento da linha ‘meio dourado' de ~ 60pt.\n<\/p>\n \n O comprimento de linha ideal para dispositivos m\u00f3veis (por exemplo, smartphones) \u00e9 menor. Para que o texto seja leg\u00edvel em telas pequenas, a linha deve conter em torno de 30 a 40 caracteres.\n<\/p>\n \n Como voc\u00ea sabe, o tamanho da letra para t\u00edtulos geralmente \u00e9 maior do que para o corpo do texto. Os t\u00edtulos tamb\u00e9m diferem em tamanho, variando do menor ao maior. Em seu site, voc\u00ea ter\u00e1 que escolher diferentes tamanhos de fonte para v\u00e1rios elementos (por exemplo, bot\u00f5es, legendas, itens de navega\u00e7\u00e3o, etc.), bem como diferentes pesos de fonte para dar \u00eanfase.\n<\/p>\n \n Para garantir a distin\u00e7\u00e3o dos elementos do seu site, escolha uma fonte que venha em v\u00e1rios tamanhos e pesos. Se voc\u00ea optar por uma das fontes padr\u00e3o, por exemplo, o tipo de letra Roboto do Google Fonts, ver\u00e1 todas as varia\u00e7\u00f5es que ela possui. Algumas fontes v\u00eam em mais de 10 varia\u00e7\u00f5es, algumas t\u00eam apenas algumas. Escolha uma fonte que tenha um rico conjunto de varia\u00e7\u00f5es para garantir uma representa\u00e7\u00e3o diversificada de conte\u00fado em seu site.\n<\/p>\n \n Diferentes estilos de fonte da fonte Roboto Google.\n<\/p>\n \n Os tempos dos sites multicoloridos e barulhentos j\u00e1 passaram. Agora, legibilidade e contraste s\u00e3o as for\u00e7as dominantes que determinam as escolhas de cores. Antes de tudo, seu conte\u00fado deve ser leg\u00edvel, e a combina\u00e7\u00e3o que por muitos anos foi considerada a melhor \u00e9 o texto preto sobre fundo branco. Essa combina\u00e7\u00e3o garante o m\u00e1ximo contraste e remonta aos tempos cl\u00e1ssicos da tipografia.\n<\/p>\n \n No entanto, recentemente, \u00e9 frequentemente argumentado que a cor preta imp\u00f5e mais cansa\u00e7o visual do que o cinza escuro. Os tons de cinza escuro tamb\u00e9m contrastam bem com o fundo branco, mas s\u00e3o um pouco menos densos e proporcionam uma experi\u00eancia de leitura mais confort\u00e1vel.\n<\/p>\n \n Esses s\u00e3o os tons de cinza que superam o preto para garantir uma experi\u00eancia de leitura confort\u00e1vel.\n<\/p>\n \n Uma p\u00e1gina de site que utiliza cinza escuro como a cor do texto do controle deslizante.\n<\/p>\n \n Ao fazer sua escolha de cores, certifique-se de test\u00e1-la em diferentes dispositivos e em diferentes ambientes. O texto que \u00e9 bom de ler em um ambiente t\u00edpico de escrit\u00f3rio pode ser dif\u00edcil de distinguir em um smartphone, especialmente quando usado ao ar livre. \u00c9 dif\u00edcil contabilizar todos os fatores, mas seu objetivo deve ser contabilizar a maioria dos ambientes e proporcionar a diferentes grupos de usu\u00e1rios uma experi\u00eancia de navega\u00e7\u00e3o confort\u00e1vel.\n<\/p>\n \n Minimizar a altura da linha para caber mais conte\u00fado n\u00e3o \u00e9 uma boa pr\u00e1tica. Se as linhas estiverem muito pr\u00f3ximas umas das outras, \u00e9 mais prov\u00e1vel que o leitor pule para a linha anterior ou posterior e fique preso. O espa\u00e7o entre as linhas (entrelinhas) deve ser 30% maior que a altura dos caracteres utilizados. Essa lideran\u00e7a garante melhor legibilidade do conte\u00fado e sua percep\u00e7\u00e3o visual clara.\n<\/p>\n\n 1: Minimize o n\u00famero de fontes usadas
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6732fd6.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db69aa1c0.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6be2a86.webp\")
<\/a><\/p>\n\n 2: Opte por fontes Sans Serif para melhorar a legibilidade
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6dd779a.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6fd1dae.webp\")
<\/a><\/p>\n\n 3: Tenha em mente um tamanho de fonte decente
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7281e6e.webp\")
<\/a><\/p>\n\n 4: Observe o comprimento ideal da linha
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db74aca13.webp\")
<\/a><\/p>\n\n 5: Opte por fontes que funcionem bem em tamanhos diferentes
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db76e5445.webp\")
<\/a><\/p>\n\n 6: Fa\u00e7a escolhas inteligentes de cores
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7896ca6.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7ad9849.webp\")
<\/a><\/p>\n\n 7: N\u00e3o experimente a altura da linha
\n<\/h5>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7de6206.webp\")
<\/a><\/p>\n