A Tipografia é a arte e o processo de criação na composição de um texto, de forma física ou digital. Assim como no design gráfico em geral, o objectivo principal da tipografia é dar ordem estrutural e forma à comunicação impressa.
Uma composição tipográfica deve ser especialmente legível e visualmente envolvente, sem desconsiderar o contexto em que é lido e os objectivos primordiais da sua publicação.
No uso da tipografia, o interesse visual é realizado através da escolha adequada de fontes tipográficas, composição (ou layout) de texto, a sensibilidade para o tom do texto e a relação entre texto e os elementos gráficos na página. Todos esses factores são combinados para que o layout final tenha uma “atmosfera” apropriada ao conteúdo abordado.
Erros Comuns
Abaixo segue-se uma lista de 5 erros comuns que “web-designers” cometem nos seus designs.
1. Mistura de Fonts
Por vezes ao navegar pela net, deparo-me com websites em que o aspecto gráfico a nível de fonts parece uma árvore de natal. Porquê utilizar tantas fonts no mesmo design? Na minha opinião, uma font para títulos e outra para o corpo de texto chega perfeitamente. Não é recomendado o uso de mais de 3 fonts na mesma página!
2. Serif VS Sans Serif
Se é inexperiente na área de design, não é recomendado a mistura de fonts com serifa e fonts sem serifa… Mais tarde, quando tiver bastante conhecimento das fonts, poderá mistura-las, pois já conhecerá os seus tamanhos e aspecto.
3. Tamanho
Os tamanhos que utiliza nas fonts devem ser coerentes e respeitar-se sempre as suas respectiva proporções entre os diversos elementos que compõem uma página web. Quando se escolhe um tamanho de font, é necessário prestar atenção ao equilíbrio geral da composição e à legibilidade de todos os blocos de texto.
4. Distância entre linhas
No CSS existe uma propriedade “line-height”, que é muitas vezes esquecida por web-designers. O que esta propriedade faz é ajustar os tamanhos entre linhas no mesmo paragrafo, ajudando o leitor a ter uma melhor leitura do texto.
5. Cor
A palavra-chave que me vem à cabeça é Contraste. Para que um texto seja facilmente lido é necessário haver contraste da cor da font e o fundo em que se encontra.
Melhorar a Tipografia
Depois de me basear num artigo escrito por Antonio Carusone no website Smashing Magazine, segue-se 7 formas de melhorar a sua tipografia nos seus designs.
1. Medida do Bloco de Texto
A medida é o comprimento de uma linha de tipo. Para o olho de um leitor, linhas longas ou curtas pode ser cansativo e perturbador. Uma medida muito comprida, perturba o ritmo porque o leitor tem dificuldade em localizar a próxima linha de tipo. Para uma quantidade pouca de texto é recomendado uma medida estreita. Para facilitar a leitura terá quer a melhor medida, entre 40-80 caracteres, incluindo espaços.
CSS:
p {
font-size: 12px;
width: 350px;
}
2. Espaçamento entre linhas
Para que um bloco de texto seja facilmente legível, é necessário recorrer ao CSS “line-height” para que haja altura entre linhas no mesmo paragrafo. Quando bem utilizado, esta propriedade torna a leitura do leitor mais fluída, dando também uma melhor aparência geral do texto.
Quanto maior for o tamanho da font, maior o tamanho do “line-height“, quanto menor for a font, menor o “line-height“. Uma regra bastante utilizada que funciona bem é utilizar um line-height de +/- mais 4/5pt do que o tamanho da font, por exemplo, se utilizar a font do tamanho 12pt, o line-height que funciona bem seria 15/16pt.
CSS:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
}
3. Citações ou Blockquotes
Existe uma tag em HTML que é o “blockquote”. É usado para quando quiser citar alguém no seu website. Para ajudar a legibilidade das citações, recomendo que coloquem as aspas fora da linha de leitura, como se pode ver na seguinte imagem:
CSS:
blockquote {
text-indent: -0.8em;
font-size: 12px;
}
4. Ritmo Vertical
Mais uma vez, para facilitar a legibilidade numa página, é necessário definir uma altura constante em todos os nossos parágrafos de texto, dando maior fluidez ao aspecto geral da página.
CSS: (Reparem que o line-height e o margin-bottom é igual)
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
}
p {
margin-bottom: 15px;
}
5. Realçar Texto
Por vezes é necessário dar-se ênfase a uma palavra ou frase no texto. Para que isto não interrompa a leitura fluida do texto, recomenda-se o uso do itálico, negrito, caps, small caps, mudança de cor, etc. Não importa o que escolhe, tente limitar-se a utilizar apenas um. Combinações como caps-negrito-itálico são perturbadores e um pouco desajeitados.
CSS:
span { font-style: italic; }
h1 { font-weight: bold; }
h2 { text-transform: uppercase; }
b, strong { font-variant: small-caps; }
6. Escala do Texto
Sempre compor os títulos e o texto com uma escala. A escala é importante porque estabelece uma hierarquia tipográfica que melhora a legibilidade e cria harmonia e coesão dentro do texto.
CSS:
h1 { font-size: 48px; }
h2 { font-size: 36px; }
h3 { font-size: 24px; }
h4 { font-size: 21px; }
h5 { font-size: 18px; }
p { font-size: 14px; }
7. Optimizar Parágrafos
Ao definir um bloco de texto, não-justificado com um alinhamento a esquerda ou direita, não se esqueça de manter o pano (lado ímpar) equilibrado, sem qualquer “buracos” ou formas inábeis. Evite o uso de linhas muito longas e muito curtas, para que o texto não perca a fluidez de leitura. Não existe nenhuma forma de controlar isso no CSS, por isso é necessário que terá que fazer os seus próprios ajustes manuais para cada bloco de texto.
Fonts Gratuitas
Segue-se uma enorme lista de 50 fonts gratuitas que pode adicionar à sua biblioteca de tipos de letra.
1. Gayatri
2. Gradualism
3. VAL
4. Faramir Black
5. 2006
6. willygrace
7. Suede
8. ariapenciroman
9. ThM_Freaktur
10. Soopafresh font
11. Razz
12. Wrexham Script
13. mia’s scribbling
14. Back to school
15. Katy Berry
16. kravitz
17. Locomotion
18. Clutchee
19. Saginaw
20. Zeta Original
21. Zeta Redux
22. Caprica
23. Samoa
24. Kunchey
25. a Morris line
26. Chocobot Stacked
27. In its right place
28. Ornatix
29. Luna Bar
30. Encyclic
31. Complete in him
32. Action Jackson
33. DeLarge
34. Baron condensed
35. IR Summer Games
36. Heavy Diacritics
37. Medio
38. Ferrum
39. Gadolinium Rounded
40. Goudy
41. Bellerose
42. Portal
43. M+ Fonts
44. New Romantics
45. Zephyr
46. CircleD Font
47. Technical forest v2
48. Marcelle Script
49. Resonance Bold
50. Nilland
* NOTA: Para fazer o download de algumas das fonts acima referidas, é necessário efectuar um registo no site que as hospeda.
@ Fontes: 36 High-Quality Latest Free Fonts To Enhance Your Designs e 35 High-Quality Free Fonts For Your Designs.
Excelente todo o artigo! Tando as dicas como a disponibilização de fontes para fazer o download. Parabéns pelo trabalho
Continua
Vou fazer o meu melhor para continuar a publicar artigos bons!
Um abraço para ti!
Sim sr. muito bem gostei muito… já vou sacar estas fontes
=D eheheh
Muito obrigado Mónica! Continua a vir aqui!
Parabéns!
Algumas das fonts são excelentes.
Continua com o bom trabalho
I’m impressed by your writing. Are you a professional or just very kwnoledgaeble?
Ótimo artigo, agora entendi a sacada do line-height !
cara curti seu post, porém não consigo fazer os downloads das fonts..