SlideShare une entreprise Scribd logo
1  sur  125
Télécharger pour lire hors ligne
Comunicação Visual          Escolhendo tipos


segunda-feira, 21 de janeiro de 13
Existe receita de bolo?


segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
Fique atento a qualquer forma de adquirir
       repertório visual. 




segunda-feira, 21 de janeiro de 13
Ainda assim, existe
                                      uma regra de ouro

segunda-feira, 21 de janeiro de 13
1
       Faça uma lista de tipos “familiares” que você
       confia e sabe que funcionará bem em uma
       variedade de projetos.




segunda-feira, 21 de janeiro de 13
Começamos com a vontade de criar algo como se
       tivéssemos a responsabilidade de mudar o
       mundo, mudar as regras. Calma!




segunda-feira, 21 de janeiro de 13
Bolo é feito com os
     mesmos ingredientes.
     O que muda é a
     forma como eles são
     usados. 




segunda-feira, 21 de janeiro de 13
Não tem projeto anterior? Ganhe repertório!




segunda-feira, 21 de janeiro de 13
Exemplos de fontes “confiáveis”:




segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
Uma simples busca pela origem de uma família
       pode trazer boas respostas.

       Tente uma busca em sites como Tipografos.Net
       ou na própria Wikipédia.

       Já é um bom começo.




segunda-feira, 21 de janeiro de 13
2
       Faça uma lista de tipos “não-familiares” que
       podem atender a objetivos específicos de
       determinados projetos.




segunda-feira, 21 de janeiro de 13
Essa é a parte mais trabalhosa mas, ao mesmo
       tempo, pode ser a mais agradável e divertida.




segunda-feira, 21 de janeiro de 13
A técnica parece com outras como a de seleção
       de fotos ou cores; você deve entender as
       necessidades do projeto e, a partir daí, escolher
       tipos que podem atender a essas
       necessidades.




segunda-feira, 21 de janeiro de 13
Nada de buscas aleatórias!
       Em um projeto isso é perda de tempo!




segunda-feira, 21 de janeiro de 13
Sites para referência e busca de boas fontes:




segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
Nesses sites vocês podem encontrar exemplos
       como esses:




segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
3
       Teste cada tipo em tamanhos grandes e
       pequenos.




segunda-feira, 21 de janeiro de 13
Uma fonte pode funcionar muito bem para
       tamanhos grandes, mas não para textos pequenos
       e vice-versa.




segunda-feira, 21 de janeiro de 13
Vejamos como se comportam algumas das fontes
       que falamos aqui:




segunda-feira, 21 de janeiro de 13
Adobe Garamond Regular




segunda-feira, 21 de janeiro de 13
Adobe Garamond Regular




segunda-feira, 21 de janeiro de 13
Frutiger Roman




segunda-feira, 21 de janeiro de 13
Frutiger Roman




segunda-feira, 21 de janeiro de 13
ITC Edwardian Script Std




segunda-feira, 21 de janeiro de 13
ITC Edwardian Script Std




segunda-feira, 21 de janeiro de 13
Thirsty Rough One




segunda-feira, 21 de janeiro de 13
Thirsty Rough One




segunda-feira, 21 de janeiro de 13
Hipster Script Pro  




segunda-feira, 21 de janeiro de 13
Hipster Script Pro  




segunda-feira, 21 de janeiro de 13
4
       Teste em Caixa Alta e em Caixa Baixa




segunda-feira, 21 de janeiro de 13
Esse é um teste simples mas muito importante
       para determinar a fonte. Algumas podem não
       funcionar em maiúsculas, por exemplo.




segunda-feira, 21 de janeiro de 13
Não esqueça de observar numerações, caracteres
       especiais e acentuados.




segunda-feira, 21 de janeiro de 13
No exemplo a seguir, temos uma fonte
       interessante, mas com sérios problemas por falta
       de glifos.




segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
É extremamente importante que, antes de
       começar, você observe o tipo por completo,
       verificando acentos e também as variações da
       família.




segunda-feira, 21 de janeiro de 13
Agora, vejamos um bom exemplo de uma família
       completa e com todos os seus caracteres:




segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
5
       Saiba colocar um ponto final da sua busca




segunda-feira, 21 de janeiro de 13
Se ainda sobrar alguma dúvida, tente utilizar um
       testador de fontes:




segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
Ao final do processo, você deverá acabar com
       uma planilha de demonstração de tipos.




segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
Tá bom de teste, não é?




segunda-feira, 21 de janeiro de 13
Saber parar é tomar a decisão de escolher uma
       fonte é um passo produtivo no projeto.




segunda-feira, 21 de janeiro de 13
Então eu uso só uma
                            fonte no projeto?

segunda-feira, 21 de janeiro de 13
Depende. Em alguns casos, uma família tipográfica
       pode ser útil para todo um projeto. Em outros, será
       necessário utilizar mais de uma fonte ou família.




segunda-feira, 21 de janeiro de 13
Combinando fontes


segunda-feira, 21 de janeiro de 13
Da mesma forma que não existia uma receita de
       bolo para escolher uma fonte, não existe uma para
       combinar famílias.




segunda-feira, 21 de janeiro de 13
O que existem são algumas regras de boas
       práticas. Vamos a elas:




segunda-feira, 21 de janeiro de 13
1
       Combine Serif com Sans-Serif




segunda-feira, 21 de janeiro de 13
Sans-serif no título e Serif no corpo do texto: esta
       é uma das combinações mais comuns e quase
       nunca dará errado.




segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
2
       Crie contraste




segunda-feira, 21 de janeiro de 13
Um erro muito comum é a falta de diferenciação
       entre as partes do texto prejudicando a hierarquia.




segunda-feira, 21 de janeiro de 13
As partes mais importantes, como o título, tem
       que ter um destaque maior que o restante do
       texto.




segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
3
       Crie uma variedade de cores tipográficas




segunda-feira, 21 de janeiro de 13
Não! Não estamos dizendo para deixar seu
       texto todo colorido.




segunda-feira, 21 de janeiro de 13
Cor tipográfica é o efeito criado pelas variações de
       tamanho, peso, leading, kerning…




segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
4
       Contraste distinto com neutro




segunda-feira, 21 de janeiro de 13
Duas fontes com muitas personalidades podem
       criar um conflito.




segunda-feira, 21 de janeiro de 13
A dica é balancear a personalidade das fontes,
       utilizando uma com mais personalidade e uma
       mais neutra.




segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
5
       Use diferentes tamanhos de fonte




segunda-feira, 21 de janeiro de 13
Varie o tamanho das fontes para separar os blocos
       do seu texto.




segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
6
       Simplifique - Tente usar duas fontes




segunda-feira, 21 de janeiro de 13
Nada de complicar, as vezes a escolha de duas
       boas fontes é o suficiente.




segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
7
       Evite classificações semelhantes




segunda-feira, 21 de janeiro de 13
Fontes de mesma classificação, mas de famílias
       tipográficas diferentes, normalmente não
       funcionam bem quando combinados.




segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
8
       Não misture “moods”




segunda-feira, 21 de janeiro de 13
Um erro tipográfico muitas vezes negligenciado é
       não reconhecer o “mood” inerente de um tipo.




segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
9
       Evite combinações demasiadamente díspares




segunda-feira, 21 de janeiro de 13
Quando muito contraste é criado em determinadas
       configurações, podemos criar um desequilíbrio
       visual que trabalha contra o projeto.




segunda-feira, 21 de janeiro de 13
segunda-feira, 21 de janeiro de 13
O fato de que não há regras rígidas e rápidas para
       combinar tipos pode tornar o processo demorado
       e até cansativo.




segunda-feira, 21 de janeiro de 13
Entretanto é bom ter um prático conjunto de
       princípios, bem como uma compreensão das
       situações tipográficas para um resultado
       tipográfico agradável.




segunda-feira, 21 de janeiro de 13
Referências


segunda-feira, 21 de janeiro de 13
O Tipo da Fonte - Guia de Seleção de Tipos para Pessoas Comuns

       O Tipo da Fonte - Qual fonte combina com esta? – Parte 1

       O Tipo da Fonte - Qual fonte combina com esta? – Parte 2

       Cameron Moll - The non-typographer’s guide to practical typeface selection

       Tipografos.net - Letras e Tipos

       DaFont

       Font Squirrel

       Veer - Fonts

       TypeTester



segunda-feira, 21 de janeiro de 13
Smashing Magazine - Best Practices of Combining Typefaces

       Webdesigner Depot - Eight Ways to Combine Typefaces

       Ina Saltz - Design e Tipografia. 100 fundamentos do Design com Tipos

       Robert Bringhurst - Elementos do Estilo Tipográfico

       Kathryn Riley & Jo Mackiewicz - Visual Composing




segunda-feira, 21 de janeiro de 13
eduardonovais@gmail.com              Escolhendo tipos


segunda-feira, 21 de janeiro de 13

Contenu connexe

Plus de Eduardo Novais

[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01
Eduardo Novais
 
[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina
Eduardo Novais
 
[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual
Eduardo Novais
 
[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web
Eduardo Novais
 
[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina
Eduardo Novais
 
[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores
Eduardo Novais
 
[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual
Eduardo Novais
 
[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre grids[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre grids
Eduardo Novais
 
[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)
Eduardo Novais
 
[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids
Eduardo Novais
 
[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea
Eduardo Novais
 
[cv - 2011.2] 10 - Plano negativo
[cv - 2011.2] 10 - Plano negativo[cv - 2011.2] 10 - Plano negativo
[cv - 2011.2] 10 - Plano negativo
Eduardo Novais
 
[cv - 2011.2] 12 - organizacao visual
[cv - 2011.2] 12 - organizacao visual[cv - 2011.2] 12 - organizacao visual
[cv - 2011.2] 12 - organizacao visual
Eduardo Novais
 
[cv - 2011.2] 08 - tangram
[cv - 2011.2] 08 - tangram[cv - 2011.2] 08 - tangram
[cv - 2011.2] 08 - tangram
Eduardo Novais
 
[cv - 2011.2] 06- exercício de texturização
[cv - 2011.2] 06- exercício de texturização[cv - 2011.2] 06- exercício de texturização
[cv - 2011.2] 06- exercício de texturização
Eduardo Novais
 
[cv - 2011.2] 05-níveis de linguagem
[cv - 2011.2] 05-níveis de linguagem[cv - 2011.2] 05-níveis de linguagem
[cv - 2011.2] 05-níveis de linguagem
Eduardo Novais
 

Plus de Eduardo Novais (20)

[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01
 
[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina
 
[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfaces[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfaces
 
[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual
 
[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web
 
[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina
 
[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores
 
[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual
 
[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre grids[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre grids
 
[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)
 
[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids
 
[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea
 
[cv - 2011.2] 10 - Plano negativo
[cv - 2011.2] 10 - Plano negativo[cv - 2011.2] 10 - Plano negativo
[cv - 2011.2] 10 - Plano negativo
 
[cv - 2011.2] 12 - organizacao visual
[cv - 2011.2] 12 - organizacao visual[cv - 2011.2] 12 - organizacao visual
[cv - 2011.2] 12 - organizacao visual
 
[cv - 2011.2] 08 - tangram
[cv - 2011.2] 08 - tangram[cv - 2011.2] 08 - tangram
[cv - 2011.2] 08 - tangram
 
[cv - 2011.2] 07 - gestalt
[cv - 2011.2] 07 - gestalt[cv - 2011.2] 07 - gestalt
[cv - 2011.2] 07 - gestalt
 
[cv - 2011.2] 06- exercício de texturização
[cv - 2011.2] 06- exercício de texturização[cv - 2011.2] 06- exercício de texturização
[cv - 2011.2] 06- exercício de texturização
 
[cv - 2011.2] 05-níveis de linguagem
[cv - 2011.2] 05-níveis de linguagem[cv - 2011.2] 05-níveis de linguagem
[cv - 2011.2] 05-níveis de linguagem
 
[cv - 2011.2] 04-elementos relacionais
[cv - 2011.2] 04-elementos relacionais[cv - 2011.2] 04-elementos relacionais
[cv - 2011.2] 04-elementos relacionais
 
[cv - 2011.2] 03 - elementos visuais
[cv - 2011.2] 03 - elementos visuais[cv - 2011.2] 03 - elementos visuais
[cv - 2011.2] 03 - elementos visuais
 

15 - escolha de tipos