(um guia sem complicações)
SOBRE O GUIA Este guia foi dividido em duas partes:
Bê-á-Bá da tipografia
Tipografia Aplicada
(pra você aprender o básico)
(pra você aplicar o que aprendeu)
O objetivo é passar adiante conhecimento tipográfico de modo descomplicado para que todos possam terminar a leitura sabendo o básico da tipografia e conseguir usá-la de modo mais consciente.
AGRADECIMENTOS Á querida Professora Mary Vonni, por ter nos educado tipograficamente, pelo constante apoio e compreensão e pela dedicação na profissão como professora e pesquisadora, tendo desenvolvido trabalhos que foram essenciais para construir o nosso guia.
CRÉDITOS Diagramação: Lara Benedet e Pablo Figueiredo Organização do conteúdo: Lara Benedet e Pablo Figueiredo Ilustrações: Lara Benedet e Pablo Figueiredo
SUMÁRIO sobre o guia
3
agradecimentos/créditos
5
o que é tipografia?
9
anatomia e terminologia
10
classificação
21
recursos
27
caracteres especiais
28
domínios da tipografia
30
legibilidade leiturabilidade
32
peso
34
36
combinação dos tipos
38
alinhamento
39
hifenizalçao
40
leiturabilidade
41
cor e tipografia
42
escolha da tipografia
43
suporte
43
referências
43
conheça a Asap
guia tipogrรกfico
O QUE É TIPOGRAFIA? “A tipografia é a cara da linguagem” tipografia
(LUPTON, 2005)
A tipografia pode ser vista como arte, técnica e área do conhecimento que estuda, desenha e usa letras para expor e transmitir ideias e conhecimento. As composições tipográficas tem como objetivo a boa legibilidade e a construção de um visual que atraia o leitor e contextualize o conteúdo da publicação. Dentro do design elas também são usadas como forma de expressão, apresentadas de forma experimental para que os objetivos estéticos ultrapassem questões como a legibilidade. Ellen Lupton é designer, escritora, curadora, editora e educadora norte-americana. Escreveu diversos livros influentes sobre a prática, história e teoria do design gráfico.
9
ANATOMIA E TERMINOLOGIA A tipografia é formada por diversos termos, assim como os caracteres diversas partes, e tudo pode parecer muito confuso no começo. Mesmo assim, é muito importante nos familiarizarmos com esses nomes para termos uma melhor comunicação em projetos tipográficos.
Corpo ou Espaço do Glifo
Retângulo que comporta todas as letras da fonte, com largura variável e altura fixa.
guia tipográfico
CARACTERE
TIPO
Símbolo que corresponde a letra no sistema Unicode.
FONTE
GLIFO
FAMÍLIA
Conjunto completo de caracteres, com letras, números e sinais, e que permite a sua instalação e utilização.
Desenho específico de cada caractere, ou seja, as variações de um mesmo caractere, por exemplo o “a”, que pode ter vários glifos diferentes.
Conjunto de fontes que possuem as mesmas características fundamentais, mas com variações de espessura, peso, inclinação, etc.
tipografia
Representação visual do tipo.
Unicode é um padrão que permite aos computadores representar e manipular textos de qualquer sistema de escrita existente. 11
De acordo com cada estilo e com o desenho de cada glifo o tipo apresenta elementos, como serifas e terminais. Já as hastes, barras, bojos, são constantes e a formatação que assumem é que varia de acordo com o estilo.
guia tipográfico
13
tipografia
terminais Forma ou elemento que remata a extremidade da linha curva de uma letra e que possui 4 principais variações.
guia tipográfico
eixo tipografia
É o ângulo de inclinação característico das letras b, c, e, g, o, p e q. Sua classificação só pode ser feita quando a fonte é modulada, ou seja, existe variação no traço (contraste).
15
serifas Traço adicionado ao início ou ao fim dos traços principais de uma letra. Existem diversos tipos de serifas:
guia tipográfico
tipografia
As serifas ainda podem ser distinguidas em 4 tipos de serifas bilaterais de acordo com seu desenho e o perĂodo em que surgiram.
17
kerning ร o espaรงo entre pares individuais de letras ou caracteres.
tracking Se refere ao espaรงo entre a palavra inteira.
guia tipogrรกfico
entrelinha tipografia
Espaรงo entre as linhas.
19
linhas guia Existem algumas linhas guia básicas usadas para facilitar o desenho dos tipos. As proporções das linhas guia estão muito relacionadas a percepção e legibilidade das tipografias. 1 2 3
4 5
guia tipográfico
CLASSIFICAÇÃO tipografia
A vasta gama de tipos disponíveis torna essencial a existência de algum sistema de classificação para, principalmente, simplificar as especificações de um trabalho. Seguir uma classificação tipográfica de acordo com as características dos tipos facilita a troca de informações entre os profissionais e simplifica a escolha tipográfica. Os autores Childers, Griscti e Leben (2013) propõe um sistema dividido em 3 partes: Serifa, Sem Serifa e “Topical”, esta última em substituição a categoria Display. A tabela a seguir apresenta as classes que compõe o sistema proposto.
21
guia tipogrรกfico
tipografia
Textura: mais caligráfica, condensadas e com terminais afiados. Schwabacher: primeiras fontes de impressão alemãs. Fraktura: formas arredondadas mas com quebras (frakturas) Rotunda: góticas mais arredondadas.
Formal: caligráficas tradicionais Handwriting: caligráficas contemporâneas
23
Veneziana: serifa humanista desenvolvida no século XV com pequeno contraste nos traços e inclinação na barra do “e”geralmente. Garalde: termo cunhado por Maximilien Vox e que faz referência aos tipógrafos do século XVI Claude Garamond e Aldus Manutius. Possuem maior contraste entre os traços e proporções, delicadas do que os tipos Venezianos e sem inclinação na barra do “e, embora o eixo seja inclinado. Revival: categoria criada pelos autores para identificar qualquer fonte criada após o século XIX no estilo Veneziano, Garalde ou Transicional.
guia tipográfico
tipografia
Característica do século XVIII, esta classe marca a mudança das Garaldes para a Serifa Moderna. O termo não foi usado pelos tipógrafos na época, apenas no início da tipografia moderna. Apresenta serifas mais finais e maior contraste no traço. A classe inicia com os tipógrafos Giambattista Bodoni e Firmin Didot, sendo por isso também chamado de Didônica. Apresenta alto contraste entre os traços e serifas finas. Clarendon: as serifas são iguais ou um pouco mais finais que as hastes. Italiana: as serifas são mais grossas que as hastes. Uniforme: espessura de hastes e serifas é similar. 25
GROTESCAS Tem sua origem na Akzidenz Grotesk criada no século XIX. Há um grau de contraste entre traços grossos e finos. NEO-GROTESCAS Criadas na década de 1950, são mais limpas e mais mecánicas que as grotescas. Inicialmente eram usadas como display. O contraste é mínimo, as letras são mais largas e a altura-x é maior. GEOMÉTRICAS As mais mecânicas de todas as sem serifa. Seu desenho se baseia nas formas geométricas e sem variação de espessura. HUMANISTAS O desenho faz referência ao manuscrito e o clássico desenho das letras Romanas.
guia tipográfico
Franklin Gothic
RECURSOS tipografia
Quanto aos recursos, são definidos uma série básica de caracteres necessários para qualquer texto longo e a necessidade de ter além do romano e o itálico, mais duas variações de espessura no mínimo. Ainda é desejável que uma família tipográfica que se destina ao meio editorial apresente florões, caracteres alternativos, entre outros recursos que para Lupton “separam o tipógrafo do digitador”.
27
CARACTERES ESPECIAIS dingbats sรฃo fontes que trazem pequenas imagens como letras.
guia tipogrรกfico
tipografia
capitulares
C
apitular é uma letra no início do texto maior que o restante do corpo. Na arte romana, iniciavam parágrafos de Iluminuras, sendo decoradas com arabescos, imagens, folhas ou mesmo com cenas em miniaturas
arecem até grandes obras de arte, por conta dos minuciosos detalhes, ás vezes contando até histórias por si só.
29
DOMÍNIOS DA TIPOGRAFIA Os domínios da tipografia dividem-se em microtipografia, mesotipografia, macrotipografia e paratipografia, que correspondem respectivamente ao design de tipos, aos blocos de texto, a estrutura gráfica geral do documento e aos materiais e técnicas usados na produção e reprodução tipográfica.
tipo
MICROTIPOGRAFIA Refere-se ao design de tamanho fontes e sinais gráficos estilo individuais
pontos traçado, estilo, modo
cor
positivo ou negativo, colorido
ajuste da letra
padrão, espaçado, reduzido, etc
MESOTIPOGRAFIA espaçamento entre palavras Relaciona-se com a configuração de sinais entrelinha gráficos em linhas e mancha tipográfica blocos de texto
guia tipográfico
Garamond, Helvetica, etc
estreito, largo, etc espaçamento duplo, simples caracteres por página
alinhamento tipográfico
esquerda/direita/centralizado
posição/direção de linhas
horizontal, vertical, diagonal, etc
mistura de fontes
caligráfica, com ou sem serifa, etc
tamanho de blocos de texto, distância entre os blocos
capitulares ornamentada / colorida MACROTIPOGRAFIA Relaciona-se com a es- ênfase tipográfica sublinhado, itálico etc trutura gráfica geral do dispositivos de ornamentação hierarquias de títulos, numerações, documento e organização
tabelas, gráficos, índices, notas de rodapé, etc. agrupamento de texto e ima- relação imagem legenda, letras gem figurativas qualidade material do meio
espessura, formato, superfície, etc
PARATIPOGRAFIA (qualidade do papel) Refere-se a materiais, instrumentos e técni- práticas de escrita (produção Grafia, desenho de caracteres, compocas de produção e re- de signos) sição, molde, etc produção tipográfica
31
tipografia
recuos e parágrafos
LEGIBILIDADE/LEITURABILIDADE Primeiramente é importante diferenciar a legibilidade da leiturabilidade. Segundo autores sobre o assunto, a legibilidade está relacionada com o design de tipos, com a clareza dos caracteres e a velocidade com que podem ser reconhecidos. Já a leiturabilidade se refere a forma como o texto está organizado e escrito, interferindo portanto na facilidade de leitura e compreensão de textos longos. Simplificando, a legibilidade está mais relacionada com o design de tipos e a leiturabilidade com o design com tipos. Ao selecionar um tipo para projeto, é necessário considerar sua legibilidade, ou seja, se suas características formais favorecem o reconhecimento dos caracteres no suporte onde serão aplicados e de acordo com as necessidades do público. Diferentes aspectos formais interferem na legibilidade dos tipos como: variações de altura-x, largura, espessura do traço e espacejamento.
guia tipográfico
33
tipografia
PESO Ao escolher uma família é preciso verificar se ela contém todos os caracteres, pesos e variações que serão necessários para o projeto, pois muitos documentos podem ser compostos com apenas uma família tipográfica, desde que essa seja suficientemente completa. Uma família tipográfica adequada para texto precisa incluir no mínimo três variações: romana, itálica e negrito, mas os tipos claros (lights), demi-bold ou semi-bold, além das formas condensadas e estendidas também são desejáveis.
guia tipográfico
35
tipografia
COMBINAÇÃO DOS TIPOS
Tipografia serifada
Tipografia não serifada
Título não serifado
Título serifado
Corpo de texto serifado. Corpo de texto serifado. Corpo de texto serifado. Corpo de texto serifado. Corpo de texto. Corpo
Corpo de texto não serifado. Corpo de texto não serifado. Corpo de texto não serifado. Corpo de texto não serifado.
Combinação tradicional, as não serifadas tem um aspecto mais display e as serifadas são mais indicadas em textos longos
Combinação fora do tradicional, quebra o padrão de colocar a serifada no corpo de texto e dá destaque a seus detalhes
guia tipográfico
Tipografia serifada
Tipografia geométrica
Outra tipografia serifada
Título mais decorado
Título serifado
Corpo de texto geométrico. Corpo de texto geométrico. Corpo de texto geométrico. Corpo de texto geométrico. Corpo de texto
Corpo de texto serifado. Corpo de texto serifado. Corpo de texto serifado. Corpo de texto serifado. Corpo de texto serifado. Corpo de texto
Para combinar com uma fonte mais expressiva e que chame a atenção, o ideal é colocar uma que não tente competir pela atenção, uma fonte geométrica mais limpa combina bem
Combinar uma fonte serifada com outra que também é serifada geralmente não cria um resultado interessante, o mesmo serve para uma combinação de duas fontes não serifadas muito parecidas 37
tipografia aplicada
Tipografia decorada
ALINHAMENTO Existem diferentes formas de se alinhar um texto, as 4 principais são: Alinhamento Centralizado É um caso específico como olho de matéria, título etc Geralmente apresentam uma entrelinha maior Alinhamento à Esquerda
Alinhamento à Direita
Não se hifeniza Tem que tomar cudiado com a franja, as ondinhas no cantinho direito A franja deve ser o mais regular possível
Usado em casos mais específicos geralmente ao lado de uma imagem São considerados mais informais
Alinhamento Justificado Se hifeniza esse tipo de alinhamento para evitar os buracos no corpo de texto
guia tipográfico
tipografia aplicada
HIFENIZAÇÃO Prática necessária para evitar a formação de rios tipográficos em textos com alinhamento justificado.
regras da hifenização Evitar hifenizar nomes próprios Fi-nalmente em vez de finalmen-te Não hifenizar mais de três linhas consecutivas Hifenizar de acordo com as convenções da língua
Rios tipográficos são espaços em branco não atrativos visualmente em parágrafos de textos.
39
LEITURABILIDADE Refere-se a compreensão do texto, em função de como está estruturado e da linguagem que foi utilizada.
exemplo de má leiturabilidade
mesmo com letras de boa legibilidade um texto pode ter baixa leiturabilidade
exemplo de boa leiturabilidade
Alguns dos fatores que influenciam na leiturabilidade são: o tamanho do texto, a cor utilizada, o espaçamento entre as palavras e manter esses padrões de cor, tamanho, forma e peso durante a leitura. guia tipográfico
tipografia aplicada
COR E TIPOGRAFIA A cor tem uma função importante na leiturabilidade do conteúdo.
É importante cuidar para o contraste das cores não ser muito agressivo
Mas ainda sim é importante que haja contraste entre a
Uma boa composição deve balancear o contraste de maneira não agressiva Na dúvida, fique no básico. O branco funciona bem sobre na maioria das cores, e um cinza escuro com cinza claro criam um contraste menos agressivo que preto no branco
41
ESCOLHA DA TIPOGRAFIA Para decidir qual tipografia utilizar deve-se pensar nos aspectos técnicos, contexto do projeto e necessidades do leitor.
Comunicativa
Construtiva
Deve proporcionar condições para o texto ser legível
É responsável pelo desenho da letra, é a base da construção de textos, frases etc
Didática
Estética
Além de comunicar, elas carregam um aspecto estético, sua forma comunica algo a parte
Além de comunicar, elas carregam um aspecto estético, sua forma comunica algo a parte
Persuasiva
Persuadir o leitor de forma atrativa e legível
guia tipográfico
tipografia aplicada
SUPORTE É preciso levar o suporte em consideração na seleção da tipografia, saber em qual tipo de mídia ela será aplicada.
Alguns fatores preciam ser levados em conta quando a tipografia será impressa, e não no meio digital, tais como: a forma de impressão, características materiais do papel, ganho de pontos e propriedades da tinta 43
guia tipogrรกfico
REFERÊNCIAS Seleção tipográfica no contexto do design editorial: um modelo de apoio à tomada de decisão - Mary Vonni Meürer repositorio.ufsc.br/xmlui/handle/123456789/177348 Slides apresentados nas disciplinas de Tipografia e Tipografia Aplicada da Prof. Mary Vonni na Universidade Federal de Santa Catarina. Ellen Lupton http://www.designishistory.com/2000/ellen-lupton/ O que são Iluminuras? biblioteca.pucrs.br/curiosidades-literarias/o-que-sao-iluminuras/ Typography Book https://issuu.com/jordankey/docs/jordan_key
45
guia tipogrรกfico
Conheça a Asap Fonte utilizada na diagramação deste Guia Tipográfico
Aa
fonts.google.com/specimen/Asap
abcdefghijklmnopqrstuvwxyz 47