SUMÁRIO História Pg4 O que é tipografia e de onde vem? Pg 6 Prensa móvel Pg7 Surgimento de novas tipografias Pg 7 Linha do tempo Pg 8-9
DEFINIÇÕES O QUE VOCÊ PRECISA SABER ANTES DE COMEÇAR Pg 10
O que é o que? Pg 12 Anatomia Pg 13 Dingbats Pg 13 Funções da tipografia Pg 14 Classificação Pg 14 Leiturabilidade e legibilidade Pg 15
2
NA PRÁTICA
be PRO Pg 16
É hora de por a mão na massa! Hierarquia Pg 18 Composição Pg 18 Display Pg 18 Texto Pg 19 Entrelinha Pg 20
Para quem não quer só o básico Pg24 Arquivos de fonte Pg 26 Altura X Pg 26 Tamanho do tipo Pg 27 Tracking e Kerning Pg 27
Viúvas e órfãs Pg 20 Tipo X Cor Pg 20 Alinhamento Pg 21 Numerais Pg 21 Capitular Pg 22 Como criar uma capitular Pg 22
THE END
PG 28
ANTES DO PONTO FINAL...
Dicas de tipos Pg 30 Referências Pg 31 3
História DEFINIÇÕES O QUE VOCÊOPRECISA SABER que é tipografia? ANTES DE DeCOMEÇAR onde vem?
O que é tipografia e de onde vem? Do grego typos “forma” e Graphein “escrita” tipografia é a arte e o processo de criação na composição de um texto de forma física ou digitalmente. É uma das características mais importante de um design seja ele web, gráfico ou de produto. A compreensão dos seus fundamentos básicos aplicados é fundamental para que seja criada uma comunicação eficaz. O objetivo principal é dar ordem estrutural e forma à comunicação escrita. A tipografia é a “voz” do projeto e por isso a escolha e a criação do projeto de design deve ser autêntico com objetivo de comunicação. A utilização de uma tipografia correta em um trabalho faz toda a diferença.
Você sabia?
O inventor da tipografia, feita através da prensa, foi Johann Gutemberg.
6
A tipografia enquanto estudo das letras impressas mostra que o começo desse vasto campo remonta séculos antes de Cristo, uma vez que até as letras manuscritas são consideradas tipos. Ou seja, muito antes da imprensa, já existiam exemplos de fontes espalhados pelo mundo. O alfabeto hieróglifo do Egito, por exemplo, é datado de 3.000 a.C, enquanto o alfabeto fenício é de 1.000 a.C e o Grego de 600 a.C. O alfabeto romano, que deu origem ao nosso atual, é de 100 d.C, muito antes dos tipos móveis de 1440 de Gutemberg. A origem de nossos atuais alfabetos (sistemas de signos abstratos que representam áudios articulados) nos leva à remota antiguidade, no primogênito uso de signos e símbolos para representar elementos naturais e atividades cotidianas. O primeiro pictograma em 3.500 a.C., e é uma ripa em peça encontrada na cidade de Kish (Babilônia).
Prensa móvel A grande invenção de Gutemberg que, sim, é muito importante para a tipografia, foi tornar os tipos não só móveis como resistentes. As primeiras fontes móveis da história da humanidade na verdade apareceram na China, por volta de 1040, pelas mãos de Shen Kuo. Só que enquanto o professor chinês usava tipos móveis de madeira, que por sua característica orgânica, eram mais perecíveis, o alemão forjou símbolos de ferro, que, por serem resistentes, tornaram a impressão algo passível de ser feito em larga escala.
Surgimento de novas tipografias Com a facilidade de imprimir não é de se
espantar que logo em seguida surgissem variações tipográficas. Afinal, quem não gostaria de ter um livro totalmente impresso com uma fonte única? Foi assim que surgiram a Bookhand e a Human, duas fontes que são apontadas como as bases de várias outras que encontramos hoje em nossos computadores. Mesmo a Garamond remonta a esse período: foi inventada por Claude Garamond em 1541. Já em 1600 nascia o itálico pelas mãos de Aldus Manutius. Por sua vez, a famosa Times Roman surgiu em 1932 como uma crítica de Victor Lardent, que trabalhava no The Times, às fontes arcaicas utilizadas pelo periódico.
7
Linha do tempo
8
9
DEFINIÇÕES O QUE VOCÊ PRECISA SABER ANTES DE COMEÇAR
O QUE É O QUE? Tipo Refere-se a configuração visual, ao desenho das letras propriamente. Fonte Conjunto completo de caracteres, com letras, números e sinais. ou dispositivo de saída ou software que permite a instalação e a utilização dos tipos (.ttf, .otf…).
Família Conjunto de fontes que possuem as mesmas características fundamentais, mas com variações de espessura, peso, inclinação, etc.
Roboto family font Roboto Bold
Roboto Regular
Roboto light Roboto Italic
As variações dentro de uma família podem ocorrer de três formas: postura, largura e peso.
POSTURA LARGURA 12
PESO
Light italic Regular Condensed Thin Medium Black
Caractere Símbolo que corresponde a letra no sistema Unicode. Glifo 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.
ANATOMIA
DINGBATS Glifo ou símbolo tipográfico sujeito a desdém por não possuir nenhuma relação aparente com o alfabeto. Muitos dingbats são pictogramas, tais como as minúsculas representações de igrejas, aviões, esquiadores, telefones e outras tantas utilizadas pela indústria do turismo. Outros são símbolos mais abstratos - marcas de preenchimento, cruzes, símbolos cartográficos, naipes de cartas e assim por diante. Manrope regular
WIFI
dingbats
dingbats
KG Arrows
Dinosaur Icons
dingbats
dingbats
13
FUNÇÕES DA TIPOGRAFIA Função Comunicativa Os símbolos tipográficos são traduções da
linguagem escrita para a linguagem falada e seu significado se efetiva por meio da leitura. A tipografia deve proporcionar condições para que os textos sejam legíveis e assim assegurem a comunicação.
Função Construtiva A tipografia é responsável pelo desenho das letras. É a partir destas letras que palavras, frases, textos e consequentemente os materiais de comunicação são formados. A tipografia pode ser considerada a base desta construção.
Função Estética
As formas das letras têm como objetivo a legibilidade, mas também carregam aspectos estéticos como a sinuosidade dos acabamentos, a sutileza do contraste, entre outros atributos que lhe conferem beleza.
Função Didática A tipografia contribui para a compreensão de textos
sendo legível e organizando o conteúdo. Desta forma pode-se considerar que ela ajuda na transmissão de informações e na preservação da cultura de geração a geração.
Função Persuasiva A tipografia busca persuadir o leitor a partir de
um tipo adequado e aplicado em uma composição atrativa e legível.
CLASSIFICAÇÃO No século XIX, os impressores buscaram analogias entre a história da arte e a herança de seu próprio ofício, desenvolvendo um sistema básico de classificação de tipos. Dividindo-os nos grupos humanistas, transicionais e modernas.
14
Esses três grupos principais correspondem grosseiramente aos períodos renascentista, barroco e iluminista na arte e na literatura. Desde então, historiadores e críticos de tipografia tem proposto esquemas mais refinados que procuram capturar melhor a diversidade das letras existentes. No século XX e XXI, os designers continuam a criar novas fontes em características históricas.
LEITURABILIDADE E LEGIBILIDADE 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. Ao selecionar um tipo, você precisa considerar primeiramente a 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. Mas a leiturabilidade também precisa ser considerada, é preciso testar este tipo em blocos de texto para verificar se funciona adequadamente.
Dica: A boa legibilidade do tipo não garante uma boa leiturabilidade do texto.
Um tipo com boa legibilidade pode ter sua leiturabilidade comprometida no uso da cor, por exemplo.
Fatores formais que interferem na legibilidade de uma fonte: variações de altura-x, largura, espessura do traço e espacejamento. Sobre a altura, é importante observar a altura-x e a proporção entre ascendentes e descendentes, não devem ser nem muito curtos, nem muito longos. A largura, esta deve variar de acordo com a complexidade da forma das letras, mantendo a proporção entre preto e branco. Quanto ao peso, é preciso manter a consistência entre os caracteres para garantir o mesmo peso em toda a palavra. E o espacejamento deve garantir que as letras sejam percebidas como uma unidade que forma uma palavra.
15
Na Prática É hora de por a mão na massa!
HIERARQUIA
DICAS: Uma hierarquia clara pode ser construida a partir da mesma fonte, sim! (Exemplo)
Indica um sistema que organiza o conteúdo, enfatizando alguns dados. Ajuda com que os leitores localizem-se no decorrer do texto, sabendo onde entrar e sair e como selecionar algumas de suas ofertas. Podem ser definidos como espaciais (recuo, entrelinha ou posição na página) ou gráficos (tamanho, estilo, cor ou fonte). As possibilidades são infinitas. A criação de hierarquias estruturais permite que os designers planejem layouts alternativos adequados ao software, hardware e necessidades físicas de diversos públicos. VOCÊ SABE QUE ESSE É O TÍTULO E esse o subtítulo Mesmo sendo uma fonte só em tudo ou uma organização do
corpo do texto diferente, há hierarquia aqui pelo uso estratégico do tamanho das fontes, variação na família e cor.
COMPOSIÇÃO É o conjunto de processos e métodos de composição proporcionados por aplicações de paginação, que permitem formatação dos elementos de texto e todos os demais elementos gráficos presentes na paginação contemporânea. Uma boa composição contribui no planejamento do corpo de texto, os melhores pontos para hifenizar as palavras criando um espaçamento mais regular com menos hífens, para que as áreas de imagens e títulos não comprometam a leiturabilidade, mas criem um floxo confortável de leitura.
DISPLAY
18
Utilizadas para títulos e destaques, hoje em dia é criada exclusivamente para uso em grandes dimensões. A popularidade das fontes displays caracteriza-se pela infinita variedade de características, personalidade, história e estilo. Seus tamanhos avantajados, formas compridas ou estendidas demais, contraformas excepcionalmente grandes ou pequena, tornam o tipo display mais atraente.
TEXTO São tipos que, principalmente, tem como prioridade a leitura. Pensando nisso, sempre devemos pensar, primeiro no usuário, quem vai ler. É possível seguir a seguinte orientação: para menores de sete anos, corpo 24; de 7 a 8 anos, corpo 18; de 8 a 9 anos, corpo 14, de 10 a 11 anos, corpo 12 e a partir dos 12 anos, corpo 10. Para os adultos alfabetizados, com visão normal, o corpo 10 (vai depender do tamanho do tipo. O corpo 10 da Garamond é ligeiramente maior do que a da Minion, por exemplo) é o mais indicado para leitura. É importante pensar também no suporte do projeto:
Impressão
Fontes que são criadas para serem impressas em gráfica ou em impressora matricial ou laser. ex: Times New Roman, Palatino, Gill Sans.
Tela
Para visualização em tela de computador. ex: Verdana ou Arial.
Web ou internet
São as famílias tipográficas que existem na maioria dos sistemas operacionais dos computadores, logo podem ser visualizadas em qualquer navegador (ou browser).
19
ENTRELINHA É a distância de base de uma linha tipográfica para outra, denominada também como leading que traz referência às tiras de chumbo [lead] utilizadas antigamentes para separar linhas de tipo de metal. Expandir a entrelinha gera um bloco de texto mais leve, mais aberto.
DICAS:
A configuração padrão dos programas de editoração de páginas é de 120% do tamanho do tipo.
VIÚVAS E ÓRFÃS Uma linha órfã é a primeira linha de um parágrafo impressa sozinha na parte inferior de uma página ou quando um parágrafo começa com apenas uma linha no final da página e o seu restante foi empurrado para a segunda página. De modo semelhante, a viúva é a última palavra de um parágrafo que "sobra" no fim de um parágrafo, comprometendo a uniformidade da mancha de texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec urna nisi, consectetur a dapibus non, porttitor et mi. Vivamus ex ligula, tincidunt non nisi eu, ultrices egestas quam. Aenean tempus sit amet mauris et dignissim. Nullam fringilla volutpat mauris, eget tempus risus pretium sit amet. Sed mauris massa, tincidunt a porttitor at, laoreet ac diam. Vestibulum et efficitur odio. In ullamcorper ante ut odio semper stibulum et efficitur odio. In ullam
sed bortis vestibulum. Aliquam euismod nisi at placeratviverra. Pellentesque non mi in eros consectetur interdum non ut sapien. In dictum neque ut odio pretium, sed consequat odio porttitor. Fusce a auctor nisi, eget egestas enim. Integer laoreet porta semper. Integer et urna accumsan, cursus mi a, varius velit. Maecenas eu fringilla mauris, a interdum diam. efficitur quam ante, id luctus metus porttitor a.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec urna nisi, consectetur a dapibus non, porttitor et mi. Vivamus ex ligula, tincidunt non nisi eu, ultrices egestas quam. Aenean tempus sit amet mauris et dignissim. Nullam fringilla volutpat mauris, eget tempus risus pretium sit amet. Sed mauris massa, tincidunt a porttitor at, laoreet ac diam. Vestibulum et efficitur odio. In ullamcorper ante ut odio semper stibulum et efficitur odio. In ullam sed
Aliquam euismod nisi at placeratviverra. Pellentesque non mi in eros consectetur interdum non ut sapien. In dictum neque ut odio pretium, sed consequat odio priot. Fusce a auctor nisi, eget egestas enim. Integer laoreet porta semper. Integer et urna accumsan, cursus mi a, varius velit. Maecenas eu fringilla mauris, a interdum diam. efficitur quam ante, id luctus metus porttitor a. Maecenas eu tu lore.
TIPO X COR DICAS:
Fundo branco e texto preto nunca falha.
Criar layouts com um bom contraste de cores pode parecer um conceito elementar quando pensamos em legibilidade e leiturabilidade, mas alguns detalhes passam despercebidos ao selecionar cores para a tipografia. É importante destacar que: o contraste não é conseguido simplesmente pelo encontro de duas cores diferentes, principalmente se seu valor for o mesmo; e o uso de cores muito vibrantes juntas tornam a leitura bem incômoda. Bom contraste
20
Tipo com cor, ou preto, com fundo branco funciona muito bem.
Confortável
Contraste de cores com valores opostos funciona bem.
Contraste Ruim
Contraste de cores com mesmo valor ão funciona.
ALINHAMENTO A escolha do alinhamento do texto como justificado, centralizado ou irregular é um dos atos tipógrafo fundamental na estruturação e de boa legibilidade. Cada um dos modos carrega qualidades formais, associações culturais e riscos. Os quatro modos de alinhamento formam a gramática da composição tipográfica:
Centralizado
Linhas de comprimento desigual sobre um eixo central.
Justificado As margens esquerda e direita são regulares.
À esquerda
A margem esquerda é rígida; a direita é flexível.
À direita
A margem direita é rígida; a esquerda é flexível.
NUMERAIS Os numerais alinhados ocupam larguras de espaço uniformes, permitindo que os números se alinhem quando tabulados as colunas. Tem a mesma estruturação que as letras maiúsculas, de modo que algumas vezes perecem grandes e volumosos textos corridos. Os numerais não alinhados, são também chamados de numerais de texto ou old style , com ascendentes e descendentes, como letras minúsculas. Suas formas são proporcionais e tem sua própria largura de composição.
1234567890 Ab 1234567890 Aj
21
CAPITULAR Marcam o início de um artigo ou um capítulo. Podem ser usadas ao longo de todo texto, para realizar quebras lógicas e criar pontos de entrada para o leitor. Muitos textos não se dão ao trabalho de iniciar com um capitular e acabam iniciando com aspas ou alguma pontuação, ou quando esses parágrafos são curtos demais para acomodar a altura de uma capitular.
COMO CRIAR CAPITULAR DICAS:
Você pode alterar o tamanho e a fonte da letra, bem como sua distância do texto.
22
1. Pegue a ferramenta de texto (Type) desenhe um frame escreva o texto e clique no início do primeiro parágrafo. 2. Clique no ícone à esquerda do painel de controle para editar parágrafos, escolha o tamanho da capitular. O tamanho da capitular será medido por quantidade de linhas . Por exemplo, se eu escolher tamanho 4, a capitular terá a altura correspondente a altura de 4 linhas.
23
be PRO Para quem nรฃo quer sรณ o bรกsico
Arquivos de fonte As fontes TrueType são mais comuns. É possível enviá-las para qualquer dispositivo de saída. São recomendadas quando é preciso uma fonte leve, mas que imprima bem e tenha uma boa qualidade em monitores; sua extensão é “.ttf”. O formato OpenType tem as mesmas características de seu antecessor e mais algumas vantagens. Ele pode incorporar uma extensão maior do conjunto de caracteres, dá suporte a várias linguagens num só arquivo e possibilita tratamentos tipográficos complexos de algumas linguagens, como ligaduras entre caracteres. É recomendado quando é necessário abranger um certo idioma e uma tipografia mais detalhada; sua extensão é “.otf”. As chamadas PostScript, atualmente, são suportadas por quase todas as impressoras laser, tendo uma ótima qualidade e sendo bem harmoniosas. São recomendadas para impressões de alta qualidade, como revistas e publicações. As fontes PostScript para windows são formadas por 4 arquivos com as seguintes extensões: “.afm”, “.pfb”, “.pfm” e “.inf”.
Atura X
26
Tamanho do tipo O sistema de pontos(pt) é a medida mais usada atualmente, nos programas usados por designers, para medir a tipografia. A altura das fontes são medidas do topo da versal até o fim da descendente mais baixa mais um espacinho extra. Quanto às medidas horizontais, a largura equivale ao corpo da letra mais um pequeno espaço que há entre as letras. A largura depende muito das características da fonte e/ou alterações de tracking e/ou kerning.
Tracking e Kerning O tracking é o processo de “alargar” ou “apertar” um bloco de texto, aumentando ou diminuindo o espaço entre as letras. O kerning é o processo de adição ou remoção de espaço entre pares de caracteres específicos. É possível ajustar o tipo de kerning automaticamente, utilizando o kerning métrico ou o kerning óptico. O kerning métrico usa pares de kerning, que estão incluídos na maioria das fontes. Os pares de kerning contêm informações sobre o espaçamento de pares específicos de letras como To, Tr, Ty, Wa, WA, Ya ou Yo. O kerning óptico ajusta o espaçamento entre caracteres adjacentes com base nas suas formas. Algumas fontes incluem especificações robustas de pares de kerning. Também se pode usar o kerning manual, que é ideal para ajustar o espaço entre duas letras.
Dica:
Ao invés de distorcer as proporções das letras escolha tipos com as proporções que você precisa.
Tracking e kerning manual são cumulativos, portanto, pode primeiro ajustar os pares de letras separadamente e, em seguida, estreitar ou alargar um bloco de texto sem que isso afecte o kerning relativo daqueles pares de letras.
27
THE END ANTES DO PONTO FINAL...
DICAS DE TIPOS Bons tipos / muito usados (free para experimentar!) Display: Este simpático tipo é primo serifado da família premiada de TypeTogether, Bree. Projetado por Veronika Burian e José Scaglione, Bree foi originalmente lançado em 2008 e se tornou um sucesso imediato por causa de sua originalidade, aparência encantadora e versatilidade. Criada pelo designer Pablo Impallari. O novo formato Open Type nos dá a possibilidade de ter várias versões de cada letra. Desenhamos muitas versões de cada letra e muitos pares de letras diferentes (também conhecidas como "ligaduras"), de modo que sempre usamos a melhor variação possível de cada letra. Bebas Neue é uma família de fonte sem serifa baseada na fonte gratuíta criada por Ryoichi Tsunekawa. A fonte ganhou popularidade e tornou-se um tipo de “Helvetica das fontes gratuitas”. Segundo a Fontfabric, as qualidades da fonte Bebas e suas variações são adequadas para web, impressão, comércio e arte. Fontes para texto: Open Sans é um tipo de letra sem serifas humanista projetado por Steve Matteson. A Open Sans foi projetado com uma tensão vertical, formas abertas e uma aparência neutra, mas amigável. Foi otimizado para interfaces de impressão, web e mobile e possui excelentes características de legibilidade.
30
Noto é uma família tipográfica desenvolvida pela Google com o objetivo de criar uma harmonização visual para todas as linguagens do mundo. As fontes Noto são visualmente harmoniosas em vários idiomas, com alturas e espessuras de traçado compatíveis.
REFERÊNCIAS Modelo de Apoio à seleção tipográfica: material complementar Mary Vonni Meürer https://tiposetextos.files.wordpress.com/2017/06/material_complementar_final1.pdf
Pensar com tipos: guia para designers, escritores, editores e estudantes Ellen Lupton Elementos do estilo tipográfico: versão 3.0 Robert Bringhurst O que são fontes? site Design Culture https://designculture.com.br/o-que-sao-fontes-truetype-opentype-e-postscript
O que é o Kerning e Tracking? blog Eu criativo: inspira design https://eucriativodesign.wordpress.com/2014/01/21/o-que-e-o-kerning-e-tracking/
Tipografia: Guia Sobre Tipos blog Chief of design https://www.chiefofdesign.com.br/guia-tipografia-parte-03/
7 Elementos da tipografia que todo designer deve considerar blog da Printi - gráfica online https://www.printi.com.br/blog/7-elementos-da-tipografia-que-todo-designer-deve-considerar Uma breve história da tipografia
blog Grupo A educação http://bloga.grupoa.com.br/uma-breve-historia-da-tipografia/
FONTES TIPOGRÀFICAS Be Fonts
Google Fonts
https://befonts.com/
https://fonts.google.com/
31