You are on page 1of 43

Anatomia do Tipo Composição Tipográfica Tipografia Digital

EBA - UFBA | Profª Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composição Tipográfica Tipografia Digital

Fonte
Conjunto completo de sinais alfabéticos e para-alfabéticos que integram um determinado alfabeto em um dos corpos disponíveis.

EBA - UFBA | Profª Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composição Tipográfica Tipografia Digital

Família
Variações pertencentes a uma fonte:
*Exemplo fonte LT Aroma *Exemplo fonte Myriad Pro

Peso: Light, Regular, SemiBold, Bold etc

Largura: Condensada, Normal, Expandida** etc

Dica
**variação não disponível Bons exemplos em LUPTON p.45, 46 e 47.

EBA - UFBA | Profª Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composição Tipográfica Tipografia Digital

UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital .EBA .

EBA .UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital .

Linha de Base = onde as letras repousam. Altura-x = corpo principal da letra minúscula sem as ascendentes e as descendentes. Letras de base curva ultrapassam levemente a linha de base para garantir estabilidade à palavra .EBA .UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Altura de Versal = distância da linha de base ao topo da maiúscula.

8 paicas = 8p 8 pontos = p8. 8 pt 8 paicas. 4 pontos = 8p4 corpo de 8 pt e entrelinha de 9pt = 8/9 .35mm 12pts = 1paica Dica .UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Arial 139pt Garamond 139pt Sistema de medidas: Altura e Entrelinha (leading) > Sistema de Pontos 1pt = 1/72 polegadas ou 0.Abreviações: unidade normalmente usada para medir colunas.EBA .

E o tipógrafo. seja ele um computador ou uma régua de composição. funciona como um tear. procura tecer o texto da maneira mais homogênea possível. p. seu trabalho [o dos escribas] ganhou uma textura tão homogênea e lexível que a página escrita passou a ser chamada de textus (tecido. Nenhum é independente do outro” [BRINGHURST.32] . em latim). o espacejamento das letras. Do mesmo modo. mas o espacejamento descuidado de letras. linhas e palavras pode rasgar esse tecido.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital “Após longa prática. assim como o escriba. a homogeneidade da cor é o objetivo mais comum almejado pelo tipógrafo. das palavras e das linhas.EBA .” “Uma vez satisfeitas as demandas de legibilidade e de ordenação lógica. os bons tipos são desenhados para produzir uma textura vivaz e homogênea.” “O instrumento tipográico. E isso depende de quatro fatores: o desenho do tipo.

lipsum. Vivamus at urna sit amet urna scelerisque venenatis.com/ Lorem ipsum dolor sit amet. elementum quis. sólido ou lúido.corpo. Aliquam erat volutpat. texto corrido. Vestibulum viverra aliquam lectus.íntegro. Proin et lorem . consectetur adipiscing elit.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Texto Sequência contínua de palavras. Donec et dolor. feugiat at. Aliquam in tortor sed elit aliquam accumsan. In ut est sed turpis dictum hendrerit. Aenean velit lorem ullamcorper eu. distinta de legenda ou títulos mais curtos . massa de texto . nisi. consistente. Amostra de texto na fonte Gentium fonte: http://www. Maecenas eu elit.EBA .

. espaços horizontais .grade. espaços verticais.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Composição Tipográica Pode-se deinir como a organização do conteúdo dentro da estrututura da página .EBA .conferindo segurança na leitura ~ conforto.

. dicionários. mm) . Dica Acrescentar entrelinha facilita a leitura de colunas densas (aproximadamente 2 pts acima da medida automática) .UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Profundidade de Coluna = altura da coluna (pontos. enciclopédias. romances.Quantidade de linhas: . acima de 96 linhas = grande profundidade: jornais. texto denso. . o leitor seleciona o texto. -> leitura linear e contínua.EBA .. paicas. leitura não linear e descontínua.. entre 40 e 48 linhas = livros. -> textos entrecortados por títulos..

Espacejamento: espaço (global) entre letras . .EBA .80 e 81.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital .Kerning (ou crenagem): ajuste entre pares de letras especíicas Tábua D’alva Tábua Amostra em Palatino Linotype (Regular e Itálico) Kerning suprimido D’alva com Kerning Dica Veja exemplos em LUPTON p.

Espacejamento mecânico: letras equidistantes entre si (desconfortável) . T. M.EBA . K. J. L. Z Letras circulares: B. . X. I. H. N. V. R.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital . (P). O.Espacejamento óptico: área proporcional de espaço branco entre as letras. P. Q. F. G. U Letras irregulares: A. S. C. (R) Letras regulares: E. Y. D. W.

EBA .217 à 231. p. .UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Espacejamento óptico Dica Sugestão de leitura: RIBEIRO.

Entrelinhamento: distância de uma linha de base para a outra.EBA . .UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital . Esse exemplo vai mostrar o que é entrelhinha Gentium Basic Bold 36/45pt Dica Veja exemplos em LUPTON p.82 e 83.

marcas de parágrafo . ¶ entrada de parágrafo (endentação) parágrafo avançado .EBA .§.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Parágrafo Quebra de linha.

.73 à 75.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital linhas recuadas continuidade com símbolos (origem: Grécia) Dica Veja exemplos em HASLAM p.EBA .

USO: legendas. textos curtos. principalmente para leitores inexperientes (Ex.: crianças).EBA . . Excesso de irregularidade pode ser atenuada com hifenização cautelosa Alinhamento à esquerda: à direita: Início do texto quebrado diiculta a leitura.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Fluxo orgânico da linguagem.

Alinhamento centralizado: centralizado afunilado . Ênfase com quebras de linhas propositais. Destaque de frases importantes. Considerado clássico e formal. Usado em folhas de rosto tradicionais e poesias.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Impróprio para textos longos.EBA .

. Donec et dolor.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Forma espaços irregulares entre as palavras (rios). In ut est sed turpis dictum hendrerit. Aliquam in tortor sed e aliquam accumsan. consectetu adipiscing elit. In est sed turpis dictum hendrerit. Donec et dolor. Aliquam in tortor sed elit aliquam accumsan. consectetur adipiscing elit.EBA . Lorem ipsum dolor sit amet. Requer atenção. Alinhamento justiicado: Lorem ipsum dolor sit amet.

EBA . In ut est sed turpis dictum hendrerit. consectetur adipiscing elit. . Alinhado à esquerda. Gentium Basic Bold 24/28pt. Donec et dolor. consectetur adipiscing elit. Lorem ipsum dolor sit amet. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. Gentium Basic Bold 24/28pt.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Justiicado forçado. Lorem ipsum dolor sit amet. Aliquam in tortor sed elit aliquam accumsan. In ut est sed turpis dictum hendrerit.

Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit. . consectetur adipiscing elit.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Justiicado forçado. Gentium Basic Bold 24/28pt. In ut est sed turpis dictum hendrerit. Lorem ipsum dolor sit amet.EBA . Aliquam in tortor sed elit aliquam accumsan. Gentium Basic Bold 24/28pt. consectetur adipiscing elit. Donec et dolor. Justiicado. Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet. . Donec et dolor. Donec et dolor. In ut est sed turpis dictum hendrerit. Aliquam in tortor sed elit aliquam accumsan. Lorem ipsum dolor sit amet. consectetur adipiscing elit. Gentium Basic Bold 24/28pt. In ut est sed turpis dictum hendrerit.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Justiicado forçado hifenizado. consectetur adipiscing elit. Gentium Basic Bold 24/28pt.EBA . Aliquam in tortor sed elit aliquam accumsan. Justiicado hifenizado.

Alinhado à esquerda hifenizado. In ut est sed turpis dictum hendrerit. Gentium Basic Bold 24/28pt. . Lorem ipsum dolor sit amet. In ut est sed turpis dictum hendrerit. consectetur adipiscing elit. Donec et dolor.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Justiicado forçado hifenizado. Aliquam in tortor sed elit aliquam accumsan. Gentium Basic Bold 24/28pt. Lorem ipsum dolor sit amet. consectetur adipiscing elit. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor.EBA .

Gentium Basic Bold 24/28pt.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Alinhado à esquerda. Gentium Basic Bold 24/28pt. consectetur adipiscing elit. Donec et dolor. Lorem ipsum dolor sit amet. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor.EBA . . Aliquam in tortor sed elit aliquam accumsan. In ut est sed turpis dictum hendrerit. consectetur adipiscing elit. Alinhado à esquerda hifenizado. In ut est sed turpis dictum hendrerit. Lorem ipsum dolor sit amet.

leitura contínua = 65.) Caracteres por linha: .. Variação = 45-75 (10 a 11 palavras em português). Linhas curtas: jornais. legenda.. . . Linhas longas pedem entrelinha maior. subtítulos.prejudicam o fraseado.. celulares.Comprimento ou medida da linha: largura da coluna (exceto títulos..UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Espaço Horizontal: .EBA .

*A tipograia digital permitiu outras medidas -> divisão do quadratim eme em unidades.). espaço largo = 1/3 eme etc. .EBA . eme mede 12pts). Ene = 1/2 quadratim eme.: 13pts..: tipo de 12pts.Espaço entre palavras: quadratim eme = espaço da letra M = distância equivalente ao tamanho do tipo (Ex. Possibilidade de medidas quebradas (Ex.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Espaço Horizontal: .. 15pts.

não é indicado para leitores pouco experientes. pode ser conigurada nos programas de editoração.79 à 82. deve ser usada com cautela e atenção para leitores experientes. não relete a maneira como falamos. ajuda a suavizar problemas com alinhamento justiicado e à esquerda. .UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Espaço Horizontal: . . .Hifenização: . .EBA . força o leitor a suspender a interpertação entre as passagens de linhas. . . Dica Sugestão de leitura HASLAM p.

EBA . Alinhamento Vertical C A I X A C A I X A centralizar pode ajudar c a i x a letras romanas foram feitas para icarem uma ao lado da outra. .UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital c a i x a Caixa-alta e caixa-baixa empilhadas: baixíssima velocidade de leitura.

Leitura melhor Lombadas LIVROS .EBA .UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Alinhamento Vertical linhas de base verticais: preserva a ainidade natural das letras.

UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital .EBA .

elementos gráicos Dica Dê uma olhada LUPTON p. negrito.EBA . .listas. outra cor. enfatizando dados e preterindo outros.94 à 99. VERSAIS. outra fonte. itálico.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Hierarquia sistema que organiza o conteúdo. endentações. sublinhado. .

EBA . . Dica Bons exemplos no capítulo DIAGRAMA em LUPTON p. simples ou complexa.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Diagrama Os diagramas servem para organizar o conteúdo no espaço.112 à 161. da moldura etc). Seu objetivo é o controle a partir da pressão interna do conteúdo (texto. imagens etc) e da pressão externa (da margem. seja de forma rígida ou lexível.

São deinidas pelo contorno.EBA . Fontes ixas: bitmap ou pixel fonts -> estruturadas pela grade de pixels da tela.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Fontes Escaláveis: vetoriais -> podem ser ampliadas e reduzidas sem perda de qualidade. Projetadas para serem usadas em um tamanho especíico. .

EBA .UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital .

hifenização. Quark Xpress = programas de paginação. Scribus..UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Uso: Programas gráicos: ferramentas de texto -> título (s/quebra de linha) e parágrafo (c/quebra de linha.. São projetados para diagramar textos e inalizar arquivos.EBA . . Page Maker.) InDesign.

Reluxo de texto. 5. Baixa qualidade de impressão (facetamento ou serrilhamento). 2. Falta de acentos ou caracteres especiais 4. Textos com fontes e caracteres trocados.EBA .Uso de fontes incompatíveis com a linguagem Post Script (RIPs) . Causa: .UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Problemas comuns em impressão: 1. 3. Estilo de fonte trocado.

No Windows = 1 arquivo . são adaptadas pelo S. não compatíveis com a linguagem PS. .O.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Padrões de fontes True Type (Apple) usadas como fontes de sistema pela Microsoft. .TTF .são muito difundidas porque são mais baratas.geram excesso de nós quando convertidas em curvas..EBA . . .quando exportadas em PS.originalmente.

PFB(impressão) e .EBA . .totalmente compatíveis com a linguagem PS.mais caras.UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Padrões de fontes Post Script (Adobe) também conhecidas como Type 1. No Windows = 2 arquivos .. .PFM (tela) .

UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Padrões de fontes Open Type (Microsoft e Apple) também conhecidas como True Type 2. . .junção dos fundamentos dos formatos Type 1 e True Type em um único arquivo = lexibilidade.suporte para grande número de línguas em um único arquivo. .compatíveis com as linguagens PS e PCL. .EBA .

centenas de glifos (caracteres).UFBA | Profª Erica Ribeiro de Andrade | 2009 Anatomia do Tipo Composição Tipográfica Tipografia Digital Padrões de fontes Open Type (Microsoft e Apple) .ligaturas automáticas + elementos decorativos + caracteres numéricos antigos + sobrescritos e subscritos adaptados + frações.precisão na coniguração do texto Gera 1 arquivo multiplataforma: . .OTF ou .TTF . .EBA .

Tradução: André Stolarski. 2005. EBA . Rio de Janeiro. Érica. 2000. São Paulo. HORIE. Milton. Editora 2AB. São Paulo. LUPTON. O Livro e o Designer II: como criar e produzir livros. São Paulo. Linha Gráica e Editora. RIBEIRO. HASLAM. Cosac Naify. Planejamento Visual Gráico. Andrew. 1987. 2ª ed. Ellen. escritores. 2005. versão 3. Robert. 2006. editores e estudantes. Ricardo Minoru. Elementos do Estilo Tipográico.Bibliografia BRINGHURST. Pensar com tipos: um guia para designers. FARIAS. Ed. Preparação e Fechamento de Arquivos para Artes Gráicas. Edições Rosari. Tipograia digital: o impacto das novas tecnologias.UFBA | Profª Erica Ribeiro de Andrade | 2009 . 2007. Priscila Lena.0. Cosac Naify.