Quem trabalha com sites, principalmente com blogs, deve-se focar muito na facilidade da leitura. Por isso, resolvemos separar para vocês algumas dicas para quem trabalhar com templates ou blogs otimizarem seus textos de forma a ficar melhor para o leitor.
1 – Tamanhos de Fontes, Espaçamentos e Entre Linhas
Uma das coisas mais irritantes em blogs e sites de notícia é a forma como as vezes eles comprimem as fontes para poder encaixar mais anúncios. Esses textos acabam por ser cansativos de ler e, por conta disso, vale a pena investir um pouco de tempo e cuidado para melhorar essa leitura.
Cada família tipográfica possui seu próprio espaçamento e tamanho, por isso, as medidas podem variar de acordo com a que você escolher usar. Muitos sites utilizam tamanhos de 12px com line-height normal. Apesar de caber mais informações dessa forma, isso causa uma péssima experiência.
No geral, devemos aumentar o espaçamento entre-linhas e manter um bom tamanho de fonte.
Obs. É importante declarar a metatag para o escalonamento, em seu <header>:
<meta name="viewport" content="width=device-width, initial-scale=1">
O espaçamento e tamanho da fonte pode variar dependendo de sua preferência. O blog do Google, por exemplo, usa algo como:
.post p{
font-size: 16px;
letter-spacing: 0;
line-height: 26px;
}
O importante é que se caso você queira aumentar ou diminuir a fonte, por algum motivo, você deve proporcionalmente alterar também o line-height.
Em algumas tipografias, pode ser necessário diminuir ou aumentar o letter-spacing. Essa propriedade indica o espaçamento entre as letras. Sites que usam uma tipografia serifada pode se beneficiar, em alguns casos, do aumento do letter-spacing. O contrário para algumas famílias sem serifa e scripts.
.post p{
font-size: 17px;
line-height: 1.52947;
letter-spacing: -.021em;
}
Não há problemas em usar frações ou unidades de medida quebradas. Ao contrário, geralmente esses pequenos pontos o ajudam a fazer a tipografia melhor.
Para testar com mais facilidade, você pode usar o console do Google Chrome (botão direito e inspecionar elemento), mudando os valores em tempo real.
2 – Justificação de Texto e Separação Silábica
Sabemos que em desktops e laptops, temos espaço horizontal sobrando. Tanto que restringimos o espaço da leitura para evitar ficar linhas muito longas. Por conta disso, não utilizamos textos justificados para essas mídias.
Porém, dispositivos móveis, como tablets e smartphones, a coisa muda de figura. Estamos acostumados a ler textos justificados em ambientes que estão a certa distância e pouco espaço horizontal, por uma questão organizacional da própria vista. Com o CSS3, e adoção de certas propriedades pelos principais navegadores para dispositivos móveis, podemos adicionar separação silábica na justificação, deixando o texto mais simples de ler e sem espaçamentos perturbadores entre as palavras.
Para isso, basta adicionar, através de media-queries:
/**Apenas em Dispositivos Móveis**/
only screen
and (-webkit-min-device-pixel-ratio: 1)
and (max-device-width: 640px)
and (min-device-width: 320px),
screen and (max-width: 600px){
.post p{
text-align: justify;
-webkit-hyphens: auto; /**Chrome/Android**/
-moz-hyphens: auto; /**Firefox**/
-ms-hyphens: auto; /**Edge**/
hyphens: auto; /**Outros**/
}
}
Obs. Algumas versões do Android não são compatíveis com o hyphens. Então verifique se vale a pena para você de acordo com seu público.
3 – Tipografias Especiais (WebFonts)
A maioria das tipografias funcionam de forma razoável, mas você pode querer personalizar para se adequar mais ao seu blog, site ou sistema.
A forma mais barata e simples de fazer isso é através do site Google WebFonts. Lá você pode encontrar as fonts de forma bem simples e implementar facilmente em seu código.
Basta escolher uma font desejada e clicar no +, no canto superior direito do bloco específico.
Uma vez escolhida a(s) font(s) desejada(s), basta você clicar na janela que abre na parte inferior e seguir as instruções. Basicamente, você deve adicionar a tag de <script> em seu <header>. Uma vez feito isso, basta chamar a font-family, no CSS, no modo que está no exemplo.
Obs. É recomendável que você vá na aba Customize (Personalizar) para que você desmarque as fonts não desejadas. Lembre-se que quanto maior a quantidade de variações, mais pesado vai ser para abrir seu site.
Outra opção, que segue mais ou menos a mesma lógica do Google Webfonts é o Adobe Typekit. O Adobe Typekit está disponível para todos os usuários pagantes da suite Adobe. Ele pode ser acessado simplesmente abrindo janela do CreativeCloud, no Mac ou Windows, e clicando no botão Gerenciar fontes.
Ao fazer isso, o usuário é automaticamente encaminhado para o site do Typekit da Adobe, onde ele pode criar um novo Webkit. Nele você pode criar ou manipular um kit já existente.
Caso você clique em + Create new kit, você será direcionado a um popup com as instruções para você preencher seu site ou IP para trabalhar com a tipografia. Esse cadastro é necessário pois você tem um número limitado de kits que você pode aplicar em sua conta da Adobe.
Uma vez confirmado, o site te encaminhará para a página onde você receberá a tag <link> que você deverá colocar em seu <header>. Uma vez feito isso, você já pode começar a escolher as fonts que vai usar na página. Por fim, você pode visualizar a forma de aplicação e demais opções no menu no canto esquerdo. Ao finalizar, lembre-se de clicar no botão PUBLISH, pois só então ele ficará disponível no seu site.
Agora, se você já tem uma font legal ou a encontrou em um site como o DaFont, você pode utilizá-la também em seu site ou blog. Para preparar um pacote com sua fonte personalizada, para ser usada em um site, o site FontSquirrel disponibiliza o WebfontGenerator. Para usá-lo basta enviar a sua fonte em OTF ou TTF, concorde com os termos e gere o kit.
Feito o download, está na hora de incorporamos a fonte no seu CSS. Para isso, basta você copiar as fonts que foram geradas no kit para uma pasta font (ou outra de sua preferência), em seu site. Caso esteja usando o WordPress, coloque dentro da pasta dos eu tema. Em seguida, é só chamar via CSS.
@font-face {
font-family: "minhafonteregular";
src: url("fonts/minhafonte-webfont.eot");
src: url("fonts/minhafonte-webfont.eot?#iefix") format("embedded-opentype"),
url("fonts/minhafonte-webfont.woff") format("woff"),
url("fonts/minhafonte-webfont.ttf") format("truetype"),
url("fonts/minhafonte-webfont.svg#minhafonteregular") format("svg");
font-weight: normal; /**Você vai precisar especificar o weight para cada espessura de font diferente**/
font-style: normal;
}
Para usar onde você quiser, basta chamar o font-family, através do nome que você determinou no font-face.
.post h1,
.post h2{
font-family: "minhafonteregular";
}
Outras Dicas
- Evite contrastes de cores. Nunca deixe o branco sobre preto ou vice-versa, use tons cinzas ou ton sur ton. Altos contrastes pode deixar a leitura mais cansativa.
- Evite cores intensas. Não use cores berrantes na tipografia. Se precisar destacar algo opte sempre por algo mais pastel ou sereno.
- Abuse dos espaçamentos. Tome cuidado ao deixar imagens muito próximas do texto, principalmente de anúncios, para não confundir. Lembre-se, a boa tipografia não é definida pelo espaço em que ela ocupa, mas pelo espaço entre ela.
Então, o que achou dessas três dicas? Gostaria de outras dicas como essa? Então compartilhe com quem você acha que se interesse e deixe um comentário.
