Tipografia?

Tipologia, um termo em desuso

O "TIPO"

Família Tipográfica

Caractere

Glifo

Lettering

Anatomia das Fontes

Tamanhos

Básicas

Scripts
Termos e Definições
São todas as fontes que não se
encaixam acima, são fontes
fantasias, góticas, decorativas,
estilosas, 3D, com efeitos...
Inspiração Tipográfica
São clássificadas como display,
fontes serif, sans serif e script que
possuem estilos muito peculiares
no seu desenho.
Classificação
Geralmente utilizadas em títulos
Display
Muito utilizadas em LOGOS por
terem linhas e desenhos muito
específicas.

Dica: Essas tipografias podem

gerar um destaque e uma
diferenciação em designs mais
sóbrios, quebrando o design.

EXEMPLOS:

Espaçamentos

Tipografia

13 Dicas
Infalíveis!

Usabilidade
Tipografia
1. Termos e Definições
1.1. Tipografia?

1.1.1. Tipografia é, na verdade, a impressão dos tipos, sendo que

tipo é a fonte, ou a letra. Antigamente, usavam-se as letras em
moldes de ferro, por exemplo, para imprimir as palavras. Com o
processo, era natural que o papel acabasse com uma textura, algo
como um relevo baixo, em função da batida da impressão.

1.2. Tipologia, um termo em desuso

1.2.1. A Tipologia é o estudo dos tipos, uma necessidade que

aumenta a cada dia, com a enorme variedade de fontes existentes
– e o tanto que isso influencia na percepção e identidade de uma
marca.

1.2.2. No final das contas

1.2.2.1. Acabamos usando tipografia pra praticamente tudo.... o

estudo das fontes, para as fontes propriamente ditas, para os
caracteres, para os símbolos e para as famílias.

1.2.2.2. Afinal, tipografia é, certamente, a principal ferramenta

de trabalho de um designer.

1.3. O "TIPO"

1.3.1. Tipo é como chamamos a fonte. Ou seja, o desenho de uma

determinada fonte.

1.3.2. E pode ser, inclusive, um tipo exclusivo, como o da Coca-

Cola, por exemplo.
1.4. Família Tipográfica

1.4.1. É o conjunto de fontes da mesma família. Por exemplo:

Montserrat BOLD, Montserrat LIGHT, Montserrat REGULAR, são
tipos diferentes de uma mesma família de fontes chamada
Montserrat.

1.5. Caractere

1.5.1. É a unidade que compõe uma fonte, pode ser uma letra, um
número ou um símbolo.
1.6. Glifo
 1.6.1. Glifo é a expressão gráfica de um caractere específico.
Dentre de um mesma fonte, você pode encontrar vários Glifos do
mesmo caractere, ou seja, variações de estilo da mesma letra.

1.7. Lettering

1.7.1. Lettering refere-se à criação de letras desenhadas à mão

1.8. Anatomia das Fontes

1.8.1. Infográfico Completo Sobre a Anatomia das fontes abaixo!

1.9. Tamanhos

1.9.1. 1pt = 0,376mm

1.9.2. 72pts = 1pol

1.9.3. 8pt = 3cm

1.10. Classificação

1.10.1. Básicas

1.10.1.1. Sans Serif (Sem Serifa)

1.10.1.2. Serf (Serifadas)

1.10.1.2.1. Slab Serif

1.10.2. Scripts

1.10.2.1. Brush

1.10.2.2. Calligraphy

1.10.2.3. Handwritten

1.10.2.4. Comic

1.10.3. Display

1.10.3.1. São todas as fontes que não se encaixam acima, são

fontes fantasias, góticas, decorativas, estilosas, 3D, com
efeitos...

1.10.3.2. São clássificadas como display, fontes serif, sans serif e

script que possuem estilos muito peculiares no seu desenho.

1.10.3.3. Geralmente utilizadas em títulos

 1.10.3.4. Muito utilizadas em LOGOS por terem linhas e
desenhos muito específicas.

1.10.3.5. Dica: Essas tipografias podem gerar um destaque e

uma diferenciação em designs mais sóbrios, quebrando o
design.

1.10.3.6. EXEMPLOS:

1.10.3.6.1. 1

1.10.3.6.2. 2

1.10.3.6.3. 3

1.10.3.6.4. 4

2. Espaçamentos
2.1. Kerning

2.1.1. Ajuste do espaço entre duas letras

2.2. Tracking

2.2.1. O espaço entre as Letras de um modo global.

2.3. Na prática

2.3.1. No mercado você dificilmente irá ouvir a palavra tracking...

geralmente acabamos usando o Kerning para os dois casos acima.
2.4. Leading

2.4.1. Espaçamento entre linhas

2.4.2. Este é um importante fator para dar uma boa legibilidade ao

texto. Linhas muito próximas prejudica a leitura e incômoda os
olhos.

2.4.3. Por outro lado, linhas muito espaçadas também prejudicam a

leitura, já que o olho não encontra o conteúdo com facilidade, e o
espaço em branco pode impactar na capacidade de absorção do
conteúdo ou, até, desprender a atenção do leitor.

2.4.4. 1

3. Usabilidade
3.1. Hierarquia
 3.1.1. A nobre arte de guiar os olhos do usuário!

3.1.2. Em uma composição sempre defina a hierarquia do texto

logo no começo. Assim, você pode trabalhar com algumas
características que vão diferenciar essas

3.1.3. Utilizar Fontes Maiores, Negrito Para Atrair o Olhar do Leitor...

Uma forma de conduzir a leitura do usuário é utilizando contrastes
de fonte. E quando falo em contraste, aqui, não me refiro somente
ao contraste de cores, como cor do texto e cor do fundo. Me refiro a
outras formas de contraste, como tamanhos, tipos de fonte e
versões da fonte, como negrito e itálico.

3.1.4. 1

3.1.5. 2

3.2. Legibilidade

3.2.1. A facilidade com que uma letra pode ser diferenciada da

outra.
3.3. Leiturabilidade

3.3.1. Se refere à facilidade com a qual o olho absorve uma

mensagem.

3.3.2. Ela está ligada ao espaçamento entrelinhas, espaçamento

entre palavras, uso de caracteres caixa alta e caixa baixa, e
alinhamento.

3.3.3. Leitura é sempre o mais importante!

3.3.3.1. 1

3.3.3.2. 2

3.4. Alinhamentos

3.4.1. Organize as Linhas do Seu Conteúdo. Um dos princípios mais

importantes na composição gráfica é o alinhamento do conteúdo.

3.4.2. Justificado

3.4.2.1. Salve raras exceções, como a norma ABNT, é muito raro

se utilizar textos justificados para design no digital, sites, redes
sociais, marketing ou publicidade.

3.4.2.2. Usa-se mais no design gráfico... mas cada vez mais vem
sendo ignorado e substituído pelo alinhamento a esquerda.
 3.4.3. Alinhado à Esquerda

3.4.3.1. Com certeza o alinhamento que melhor facilita a

leiturabilidade.

3.4.4. Alinhado à Direita

3.4.4.1. O alinhamento à direita é utilizado, principalmente, em

materiais que apresentem uma disposição ou formato
diferenciado, onde o alinhamento à direita acabe ficando mais
natural para a leitura.

3.4.4.2. Muito usado pra projetos para redes sociais, publicidade,

marketing digita...

3.4.4.3. Nada recomendado para textos longos!

3.4.5. Centralizado

3.4.5.1. Muito utilizado em títulos, textos em destaque....

3.4.5.2. É também excelente para páginas de conversão e

mobile.

3.4.6. Hifienização

3.4.6.1. Eu raramente uso hifienização, geralmente quando eu

crio um bloco de texto, porque prejudica a experiência da leitura
e a fluência.

3.4.6.2. Uma das primeiras coisas que faço é desmarcar a caixa

do hífen.

3.4.7. Dica de Alinhamento em Composições!

3.5. Medida da Caixa de texto

3.5.1. 1

3.5.2. Medida longa: Se uma linha de texto é muito longa os olhos

do leitor terão curto tempo de foco no texto. Isto é porque o
comprimento da linha faz com que seja difícil avaliar onde começa
e termina. Isso também atrapalha na hora de mudar de linha
quando podemos confundir com a próxima.

3.5.3. Medida curta: Se uma linha é muito curta os olhos vão ter
que viajar de volta muitas vezes, quebrando o ritmo de leitura.
Linhas muito curtas também tendem a estressar os leitores,
 fazendo-os começar na próxima linha antes de terminar a atual.
3.6. Viúvas e Órfãos

3.6.1. Órfão é uma linha muito curta no fim do parágrafo

3.6.2. Viúva é uma linha muito curta no começo da coluna.

3.6.3. 1
3.7. Trapos ou Rags

3.7.1. Refere-se à margem vertical irregular de um bloco de texto.

Ao definir o tipo com uma margem irregular, preste atenção para a
forma que o final das linhas vão formar.

3.7.2. Um bom alinhamento de Rag entra e sai de linha para linha

com pequenas diferenças.

3.7.3. 1

4. 13 Dicas Infalíveis!
4.1. 1- Use famílias de fontes nos seus projetos!

4.1.1. A primeira e mais versátil ferramenta no seu cinto de

ferramentas de tipografia é a família de fontes.

4.1.2. Usando essas fontes relacionadas pode ajudar a desenvolver

a unidade em seus projetos.
4.2. 2- Use poucas fontes no mesmo projeto. Isso não vai doer, juro!

4.2.1. Os melhores e mais impactantes projetos de design possuem

números limitados de tipos de fontes.

4.2.2. Geralmente eu recomendo um limite de no máximo 3 fontes.

4.2.3. A regra é clara: menos é mais.

4.3. 3. Respeite a integridade da fonte

4.3.1. Isso é um verdadeiro crime!

4.4. 4. Utilize a tipografia para gerar Destaque e Hierarquia!

4.4.1. Este é o segredo do designer!

4.5. 5. Cuidado com o Excesso de destaques!

4.5.1. Quando tudo é destaque, nada se destaca.

4.6. 6. Use a fonte certa para o tom de voz que você quer passar!
 4.6.1. I love Comic Sans!

4.6.2. CUIDADO!

4.7. 7. Use Grids!

4.8. 8. Use e abuse do contraste

4.8.1. Preto e branco, tons de cinza e balanço de cores causam

impacto no modo como os textos serão lidos. Este é um exercício
para estabelecer e manter a legibilidade e o prazer visual.

4.9. 9. Considere o contexto e o público

4.9.1. Antes de escolher uma fonte, você precisa aprender os

objetivos do seu cliente, bem como as necessidades e preferências
do público-alvo.

4.9.2. O desempenho visual de fontes influencia na primeira

impressão que os usuários tem da marca.
4.10. 10. Atenção PROFUNDA à tipografia no Mobile

4.11. 11. O texto precisa respirar

4.11.1. O nível de legibilidade depende muito de quanto espaço

existe entre letras, palavras e linhas de texto. Tracking, kerning e
leading são os processos de ajuste do espaço em branco entre os
elementos tipográficos.

4.12. 12. Utilize a tipografia como um cientista, mas revise como um

artista.

4.12.1. A tipografia é uma ciência complexa que consiste em

muitas regras e regulamentos. No entanto, isso não é suficiente.

4.12.2. Não seja exageradamente técnico. Você não pode enterrar

a sua alma artística.

4.12.3. Encontre o equilíbrio entre as regras rígidas e escolhas

incomuns, e os resultados podem surpreender você e seus clientes.
4.13. 13. Tenha sempre 5 a 10 fontes CORINGAS (suas favoritas).

4.13.1. Fontes com diferentes classificações ou estilos, para utilizar

sempre em projetos rápidos.

4.13.2. Ao longo do tempo vai perceber que 80% dos seus

trabalhos de composição terão estas fontes...

4.13.3. As minhas são:

 4.13.3.1. BEBAS

4.13.3.2. Gotham

4.13.3.3. Montserrat

4.13.3.4. Roboto SLAB

4.13.3.5. Billy Ohio

4.13.3.6. Amatic

4.13.3.7. Dancing Script

5. Inspiração Tipográfica