A Criativosfera será fechada dia 01 de Maio de 2017. Obrigado a todos!

Aula 03 – Tipografia na web

Curso: Web Design Básico

Enquanto no design impresso é possível “pirar a cabeça” com a tipografia - criar blocos de texto na vertical ou em um certo ângulo, usar várias fontes mirabolantes, entre outros exemplos - no web design a coisa é mais básica. Existe um limite de fontes que podem ser utilizadas no texto corrido, por exemplo. E só por que você tem uma determinada família tipográfica no seu computador, não quer dizer que seu site pode utilizar essa mesma. É aí que entram as “fontes seguras”.

A primeira coisa que devemos nos preocupar ao implementar a tipografia na web é se a fonte é segura para o uso na web. Isto não significa se é necessário algum tipo de proteção, mas se a fonte vai ou não aparecer no navegador do usuário.

Fontes seguras para uso na web (Fonte: W3Schools)

Fontes seguras para uso na web (Fonte: W3Schools)

Como mencionei, só por que você tem uma gama enorme de fontes, não quer dizer que todas irão aparecer nas telas de outros usuários. É por isto que a maioria dos web designers optam por utilizar “fontes seguras” que eles sabem que serão mostrados da maneira correta independente de qual fonte estiver instalada no computador do usuário.

Pilhas de fontes

Como fontes de uso web seguras dependem ainda do sistema operacional utilizado pelo usuário, alguns designers pilham fontes para dar mais flexibilidade no seu design. Estas pilhas permitem que você use um certo número de famílias tipográficas diferentes em ordem, caso a anterior não existe no sistema do usuário.

A maioria das pilhas contem em torno de quatro fontes, arranjadas por preferência, com a escolha principal sendo mostrada primeira, seguida de uma alternativa, depois uma fonte mais comum e finalmente uma genérica que é garantida existir em qualquer máquina. Por exemplo: Helvetica Neue (pouco comum, mas preferida pelo designer), Helvetica (uma alternativa segura), Arial (que muitos possuem) e “sans-serif” (um jeito de dizer que qualquer fonte sem serifa serve).

Uma maneira de forçar uma fonte incomum no navegador do usuário é utilizar de imagens com texto. Mas isso gera uma gama de problemas: a impossibilidade de aumentar o tamanho da fonte por parte do usuário, problemas de visualização em monitores menores, peso excessivo da página custando o tempo de carregamento, dificuldade em otimizar para sistemas de busca (como o Google) e por aí vai. Ou seja, você deve evitar de fazer um site usando apenas imagens apenas para utilizar uma fonte específica.

Mas é possível utilizar outras fontes sem gerar esses problemas todos, através do @font-face ou Typekit. Isso será discutido mais a fundo nas próximas aulas, mas basta dizer que é possível usar outras fontes, mas você deve tomar cuidado para usar de forma responsável e sem abusar. Idealmente, texto corrido deve ser feito para funcionar com as fontes seguras.

E voltando a falar delas, confira essa lista de fontes que você pode usar nos seus projetos web que garantidamente vão funcionar em qualquer navegador.

Cuidados com a tipografia

Ter blocos de texto em um certo ângulo, ou até mesmo totalmente na vertical é possível mas muito difícil e pouco recomendado. Existem certas guias de design na web, e uma delas é não “pirar” demais.

Na nossa cultura ocidental, lemos da esquerda para a direita, de cima para baixo. Ao alterar essa ordem, você dificulta a leitura e perde acessos. Basta ver quantos sites que você conhece que colocam todo o texto alinhado a direita da tela ou com textos inteiros na vertical; idealmente, este número deverá ser zero.

E quanto a cores? O padrão na internet parece ser fundo claro, fonte escura para textos corridos. Existem designers que defendem que, pela tela ser emissora de luz (ao contrário do papel), o melhor jeito de ler um texto é com fundo escuro e letras claras, mas não é o que estudos apontam.

Forçar que usuários fixem em texto branco por muito tempo pode causar tensão nos olhos. Isto ocorre pois o branco estimula igualmente todos os três tipos de receptores visuais no olho humano”, explica Anthony do “UX Movement”. Ele ainda explica que a melhor escolha é um fundo cinza bem leve com letra escura, pois menos luz branca reflete ao fundo da fonte escura, gerando menos tensão.

Já quando o texto é apenas uma chamada ou o foco dela é ser escaneada (ao contrário de lida), é possível mudar o estilo para “travar” o olho e fazer o usuário focar temporariamente naquele ítem. Um exemplo disto são títulos ou sub-títulos de páginas; um texto branco em um fundo escuro chama a atenção do usuário e faz ele notar que o assunto mudou. Neste caso não é necessário se preocupar em gerar stress visual ao usuário, pois ele só vai bater o olho momentâneamente.

A regra é simples: se você não vê algo sendo feito com frequência, provavelmente é pelo motivo de que já testaram isso e viram que não dá certo.

Usando a tipografia

Este conteúdo é exclusivo para os Alunos Criativosfera.

Nossos Alunos desfrutam de várias vantagens, como poder tirar dúvidas com o professor, download das aulas em formato de eBook, acesso a palestras exclusivas além de visualizar o conteúdo que está aqui. Além disto, os Alunos Criativosfera também ajudam a manter o site no ar, possibilitando disseminar o conhecimento.

Está esperando o que? Confira as vantagens e torne-se um Alunos Criativosfera hoje!

Leitura adicional

Este conteúdo é exclusivo para os Alunos Criativosfera.

Nossos Alunos desfrutam de várias vantagens, como poder tirar dúvidas com o professor, download das aulas em formato de eBook, acesso a palestras exclusivas além de visualizar o conteúdo que está aqui. Além disto, os Alunos Criativosfera também ajudam a manter o site no ar, possibilitando disseminar o conhecimento.

Está esperando o que? Confira as vantagens e torne-se um Alunos Criativosfera hoje!

Até a próxima aula!

« Anterior: Aula 02 – Layout na web    |    Próxima: Aula 04 – Seções de uma página web »

Professor

Canha - Fundador da Criativosfera, Sean "Canha" tem mais de 10 anos de experiência no mercado de design. Além de ser UX Designer, também é sócio do Choco La Design e fundador do antigo Design Blog. Você pode encontrá-lo no Facebook ou Twitter.

Alunos cadastrados podem tirar suas dúvidas com o professor. Cadastre-se hoje e aproveite as vantagens de ser um Aluno Criativosfera