Uma tipografia bem pensada e bem escolhida é a chave para alcançar um site esteticamente agradável e, o mais importante - facilmente legível. Mas você sabe como deixar o texto do site claro e consistente com a identidade da sua marca?
Não se preocupe. Reuni as 8 regras de tipografia mais importantes que tornarão todo o processo de criação da tipografia perfeita para o seu site fácil e eficaz. Certifique-se de seguir todas as regras e você será recompensado com um sistema de tipografia transparente que fará com que seu projeto pareça profissional e melhore seu UX.
8 princípios de tipografia a seguir
1. Escolha a fonte certa
O mais importante é que sua tipografia reflita a verdadeira natureza do seu setor. Portanto, escolher a tipografia certa para o site não pode ser uma questão de sorte. Só porque uma fonte é popular e você gosta dela, não significa que ela será apropriada para sua marca. Preste atenção ao que a fonte comunica e se ela combina com o estilo da sua marca.
Preste atenção ao que a fonte comunica e se ela combina com o estilo da sua marca. Se você administra uma loja infantil, não usará fontes comerciais simples e elegantes e vice-versa. Sempre combine as fontes com a comunicação da sua marca para ser consistente com ela.
Se você quiser saber o que procurar ao escolher a melhor fonte para o seu site , confira nosso artigo sobre fontes do site .
2. Selecione o tamanho da fonte
O tamanho da fonte na página é importante! Se você escolher uma fonte que não seja muito pequena ou muito grande, facilitará muito a leitura para seus usuários. Uma unidade especial que os tipógrafos usam para descrever as fontes é "pt" ou "ponto".
O intervalo preferido de tamanhos de fonte padrão para sites é entre 14 e 25 pt. Fontes maiores podem ser reservadas para títulos - 20pt e acima , e para texto simples, o melhor intervalo é 14-18pt.
Independentemente do tamanho da fonte escolhido, certifique-se de que o tamanho da fonte:
a) torna o texto legível - tamanho de fonte de 12pt e inferior pode prejudicar significativamente a legibilidade;
b) corresponde ao tipo de letra - por exemplo, para sua fonte do sistema Roboto Google recomenda um mínimo de 16 pt. Por outro lado, San Francisco - a fonte utilizada, entre outras, em dispositivos Apple, deve ter no mínimo 18pt;
c) reflete o propósito do site - se a página não for dominada pelo texto, mas pelo design, você pode usar uma fonte menor. Também no caso de páginas interativas que incentivam o usuário a clicar em cada etapa, essa solução pode ser oferecida. Se, por outro lado, você está lidando com um site onde o texto domina, e a principal tarefa do usuário é ler (por exemplo, área do blog, portal de informações) - é melhor escolher uma fonte um pouco maior.
Como escolher o tamanho do cabeçalho?
Você já decidiu o tamanho da fonte do seu corpo de texto, mas não sabe como manter o tamanho dos títulos em proporção ao restante do conteúdo? Existem várias práticas recomendadas para isso:
a) O cabeçalho H1 deve ter 300% do tamanho da fonte usada no corpo do texto. Por exemplo, se seu site usa uma fonte de 18 pt para o corpo do texto, o tamanho ideal para seus títulos é 54 pt.
b) O cabeçalho H2 deve ter 200% do tamanho da fonte do corpo do texto. Neste caso, com um tamanho de fonte base de 18pt, o cabeçalho H2 ideal seria 36pt.
⚡ BOWWE Tip:
Para títulos sucessivos, você pode diminuir gradualmente a porcentagem; por exemplo, para o cabeçalho H4, você pode multiplicar o tamanho da fonte primária por 130-150%.
Fontes na versão móvel
Ao escolher o tamanho da fonte, você deve responder à pergunta em quais dispositivos o texto será exibido. O tamanho da fonte será diferente em monitores de laptop e em dispositivos móveis. Se você preferir focar na aparência do site em dispositivos móveis, lembre-se dessas duas regras importantes:
a) Em telas de smartphones, uma fonte grande não ficará legal,
b) Os títulos não devem ter mais de duas linhas.
Portanto, ao projetar um site para dispositivos móveis, vale a pena verificar a aparência do texto e verificar se a fonte é muito grande.
⚡ BOWWE Tip:
Ao criar um site no construtor BOWWE , ele é responsivo automaticamente. Isso significa que, em primeiro lugar, você não precisa criar um site separado adaptado para dispositivos móveis. Em segundo lugar, a edição do site pode alternar entre a visualização de desktop e móvel em alguns segundos. Graças a isso, você pode controlar facilmente como a fonte de sua escolha se comporta em dispositivos móveis.
3. Use o princípio: menos é mais
Ao projetar sites, é melhor seguir o princípio do minimalismo. Usar mais de dois tipos de fontes em um projeto pode atrapalhar a estética do projeto. A solução mais segura é escolher dois tipos de fonte: títulos e texto simples.
No entanto, você também precisa ter em mente o contraste. Se você usar duas fontes muito semelhantes, elas não chamarão totalmente a atenção dos usuários. Tente não escolher duas fontes Sans Serif, mas escolha uma combinação de Serif e Sans Serif, tornando seu conteúdo ainda mais atraente.
Além disso, lembre-se de que nem todas as fontes podem funcionar juntas. Existem pares de fontes que se gostam mais e algumas são incompatíveis. Vale a pena conhecê-los antes de fazer sua escolha final!
⚡ BOWWE Tip:
Se você quiser ter 100% de certeza de que escolheu o melhor emparelhamento de fontes , sempre poderá se inspirar no emparelhamento de fontes em fontpair.co .
4. Desenvolva a estrutura do conteúdo
Um aspecto da tipografia tão importante quanto a escolha da fonte é o layout e a estrutura de todo o conteúdo da página. Não importa se é uma breve descrição do seu negócio ou um extenso artigo na seção do blog - a estrutura de cada tipo de conteúdo impacta drasticamente a percepção dos usuários sobre o seu site. Quais são as regras de tipografia para melhor legibilidade?
Altura da linha ou entrelinha
Manter uma altura de linha suficiente (ou entrelinha) e o espaço entre as linhas é essencial. Uma distância muito curta fará com que as linhas de texto praticamente se sobreponham. Por outro lado, um leitor muito alto será "explodido". Portanto, é melhor encontrar uma proporção áurea.
Parágrafos e comprimento da linha
Já se sabe há muito tempo que fragmentos de texto curtos são muito melhor lidos. Linhas ou parágrafos muito longos podem cansar os olhos e atrapalhar o ritmo de leitura. O comprimento da linha deve ser em torno de 50-75 caracteres para não esgotar o usuário. O mesmo se aplica aos parágrafos - eles facilitam a leitura de textos mais longos.
Alinhamento
Na tipografia, alinhamento é o posicionamento do texto em relação a uma margem, borda de uma página ou outro ponto de referência.
⚡ BOWWE Tip:
Embora pareça conveniente alinhar todas as bordas do texto, não recomendamos que você justifique o conteúdo da página. Leitores justificados na Internet simplesmente não parecem bons e, ao contrário das aparências, interferem na legibilidade. Quando alinhado à borda esquerda, você pode mover palavras que não se encaixam na linha seguinte, mantendo o mesmo espaçamento. Isso é mais natural para os olhos e dá o ritmo de leitura correto.
5. Combine as cores
A cor da fonte é um elemento da tipografia intimamente relacionado à identidade visual da sua marca na Internet. No entanto, assim como na combinação de fontes, você também deve ter cuidado ao escolher suas cores. Aqui estão os padrões mais essenciais para a cor da fonte:
Selecione no máximo 3 cores
Você já sabe que é melhor seguir o minimalismo na tipografia. O mesmo vale para as cores. Tente não usar mais de três cores no texto porque mais pode causar caos no site e torná-lo infantil.
Cuidado com o contraste
O texto deve ter contraste adequado com o fundo. Obviamente, a combinação mais segura é a cor da fonte preta em um fundo branco ou cinza claro. É a combinação de cores mais natural e não cansa os olhos do usuário durante a leitura.
Combine apenas as cores correspondentes
Lembre-se de que algumas cores, como vermelho e verde, não combinam. Quebrar esquemas de cores no caso de fontes geralmente não funciona.
⚡ BOWWE Tip:
Para selecionar a cor da fonte com mais rapidez e eficiência, você pode usar a Color Tool do material.io . Graças a isso, você poderá ver se a cor da fonte selecionada se encaixará bem, por exemplo, com a cor de fundo do seu site.
6. Destaque-se
Com uma hierarquia de importância em seu texto, você pode enfatizar que uma palavra é mais importante que outra. Portanto, as palavras mais críticas do seu site devem ser destacadas. Você pode torná-los maiores, colorir ou usar negrito ou itálico.
⚡ BOWWE Tip:
Destacar palavras mais essenciais ou fragmentos de texto é muito importante no caso de materiais de blog. Tal procedimento os torna mais legíveis e fáceis de lembrar. Também vale a pena colocá-los em negrito para palavras-chave necessárias para o alto posicionamento do site nos resultados de busca.
7. Crie sua escala de fonte
O dimensionamento de fontes é o processo de aumentar ou diminuir o tamanho do texto em um site.
Você pode querer criar uma escala de fonte por alguns motivos. Uma razão é garantir que todo o texto da sua página tenha o mesmo tamanho. Isso pode ser importante para a usabilidade, principalmente se você usar texto para transmitir informações importantes para seus visitantes. Também pode tornar sua página mais uniforme e profissional.
Outra razão para usar uma escala de fonte é tornar o texto mais fácil de ler. Você pode achar que algumas fontes são muito pequenas ou muito grandes quando você as visualiza em seu tamanho padrão. Ao dimensionar o texto, você pode torná-lo mais confortável de ler.
There are a few things to remember when creating a font scale.
a) Certifique-se de que todo o texto da sua página tenha o mesmo tamanho. Isso inclui o corpo do texto e quaisquer títulos ou outros elementos de texto.
b) Escolha um tamanho de fonte que seja confortável e fácil de ler. Você pode precisar experimentar diferentes tamanhos de fonte para encontrar o que é certo para você. Algumas fontes podem parecer boas em tamanho grande, mas tornam-se difíceis de ler quando são reduzidas.
⚡ BOWWE Tip:
Existem muitas ferramentas online gratuitas com as quais você pode criar facilmente uma escala de fonte. Um deles é type-scale.com .
8. Pesquise e busque inspiração
Encontre os melhores designs de sites com exemplos de tipografia empolgante. Em sites como Dribbble você pode encontrar muita inspiração. Você também pode usar plataformas como Pinterest que permitem criar os chamados Boards , onde você pode coletar qualquer coisa que o inspire e compartilhá-lo com seus amigos ou colegas de trabalho.
Também vale a pena fazer pesquisas entre sites semelhantes ao seu ou de seus concorrentes. Então você aprenderá como outros implementam os melhores princípios de tipografia e como você também pode fazer isso!
Pronto para criar seu site?
Use o mais conveniente construtor de sites confiável por milhares de designers e crie sites que fornecerão clientes!
Comece agora!
Melhores regras de tipografia - resumo
Lembre-se de que a tipografia é a chave para o sucesso de qualquer design de site de sucesso. Seguindo os princípios da tipografia , você pode ter certeza de que o texto não será apenas legível, mas, acima de tudo, criará o clima certo e refletirá fielmente o estilo da sua marca.
Seguindo as melhores práticas de boa tipografia encontradas neste artigo, você pode melhorar rapidamente a aparência do seu site e, o mais importante, a experiência do usuário.
Leia também:
Karol é empreendedor serial, palestrante de e-commerce, entre outros para o Banco Mundial, e fundador de 3 startups, das quais já assessorou várias centenas de empresas. Foi também responsável por projetos das maiores instituições financeiras da Europa, no valor superior a 50 milhões de euros.
Obteve dois mestrados, um em Informática e outro em Gestão de Marketing, durante os seus estudos na Polónia e em Portugal. Ele ganhou experiência no Vale do Silício e enquanto dirigia empresas em muitos países, incluindo Polônia, Portugal, Estados Unidos e Grã-Bretanha. Há mais de dez anos, ele ajuda startups, instituições financeiras, pequenas e médias empresas a melhorar seu funcionamento por meio da digitalização.
