Anda di halaman 1dari 43

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Fonte
Conjunto completo de sinais alfabticos e para-alfabticos que integram um determinado alfabeto em um dos corpos disponveis.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Famlia
Variaes pertencentes a uma fonte:
*Exemplo fonte LT Aroma *Exemplo fonte Myriad Pro

Peso: Light, Regular, SemiBold, Bold etc

Largura: Condensada, Normal, Expandida** etc

Dica
**variao no disponvel Bons exemplos em LUPTON p.45, 46 e 47.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Altura de Versal = distncia da linha de base ao topo da maiscula.

Altura-x = corpo principal da letra minscula sem as ascendentes e as descendentes.

Linha de Base = onde as letras repousam. 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 Composio Tipogrfica Tipografia Digital

Arial 139pt

Garamond 139pt

Sistema de medidas: Altura e Entrelinha (leading) > Sistema de Pontos 1pt = 1/72 polegadas ou 0,35mm 12pts = 1paica Dica - Abreviaes:
unidade normalmente usada para medir colunas. 8 paicas = 8p 8 pontos = p8, 8 pt 8 paicas, 4 pontos = 8p4 corpo de 8 pt e entrelinha de 9pt = 8/9

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Aps longa prtica, seu trabalho [o dos escribas] ganhou uma textura to homognea e lexvel que a pgina escrita passou a ser chamada de textus (tecido, em latim). O instrumento tipogrico, seja ele um computador ou uma rgua de composio, funciona como um tear. E o tipgrafo, assim como o escriba, procura tecer o texto da maneira mais homognea possvel. Do mesmo modo, os bons tipos so desenhados para produzir uma textura vivaz e homognea, mas o espacejamento descuidado de letras, linhas e palavras pode rasgar esse tecido. Uma vez satisfeitas as demandas de legibilidade e de ordenao lgica, a homogeneidade da cor o objetivo mais comum almejado pelo tipgrafo. E isso depende de quatro fatores: o desenho do tipo, o espacejamento das letras, das palavras e das linhas. Nenhum independente do outro [BRINGHURST, p.32]

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Texto
Sequncia contnua de palavras, distinta de legenda ou ttulos mais curtos - corpo, texto corrido, massa de texto - ntegro, slido ou lido, consistente.
Amostra de texto na fonte Gentium fonte: http://www.lipsum.com/

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit. Vestibulum viverra aliquam lectus. Aliquam erat volutpat. Vivamus at urna sit amet urna scelerisque venenatis. Aenean velit lorem ullamcorper eu, elementum quis, feugiat at, nisi. Maecenas eu elit. Proin et lorem

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Composio Tipogrica

Pode-se deinir como a organizao do contedo dentro da estrututura da pgina - grade, espaos verticais, espaos horizontais - conferindo segurana na leitura ~ conforto.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Profundidade de Coluna = altura da coluna (pontos, paicas, mm) - Quantidade de linhas: . acima de 96 linhas = grande profundidade: jornais, dicionrios, enciclopdias... -> textos entrecortados por ttulos; leitura no linear e descontnua; o leitor seleciona o texto. . entre 40 e 48 linhas = livros, romances... -> leitura linear e contnua; texto denso. Dica
Acrescentar entrelinha facilita a leitura de colunas densas (aproximadamente 2 pts acima da medida automtica)

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

- Espacejamento: espao (global) entre letras - Kerning (ou crenagem): ajuste entre pares de letras especicas

Tbua Dalva Tbua


Amostra em Palatino Linotype (Regular e Itlico)

Kerning suprimido

Dalva

com Kerning

Dica
Veja exemplos em LUPTON p.80 e 81.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

- Espacejamento mecnico: letras equidistantes entre si (desconfortvel) - Espacejamento ptico: rea proporcional de espao branco entre as letras.

H, I, M, N, U Letras irregulares: A, F, J, K, L, P, R, S, T, V, W, X, Y, Z Letras circulares: B, C, D, G, O, (P), Q, (R)

Letras regulares: E,

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Espacejamento ptico

Dica
Sugesto de leitura: RIBEIRO, p.217 231.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

- Entrelinhamento: distncia de uma linha de base para a outra.

Esse exemplo vai mostrar o que entrelhinha


Gentium Basic Bold 36/45pt

Dica
Veja exemplos em LUPTON p.82 e 83.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Pargrafo
Quebra de linha, marcas de pargrafo - ,
entrada de pargrafo (endentao) pargrafo avanado

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital


linhas recuadas

continuidade com smbolos (origem: Grcia)

Dica
Veja exemplos em HASLAM p.73 75.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital


Fluxo orgnico da linguagem. Excesso de irregularidade pode ser atenuada com hifenizao cautelosa

Alinhamento esquerda:

direita:

Incio do texto quebrado diiculta a leitura, principalmente para leitores inexperientes (Ex.: crianas). USO: legendas, textos curtos.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital


Imprprio para textos longos; Usado em folhas de rosto tradicionais e poesias; Considerado clssico e formal; nfase com quebras de linhas propositais; Destaque de frases importantes.

Alinhamento centralizado:

centralizado afunilado

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital


Forma espaos irregulares entre as palavras (rios). Requer ateno.

Alinhamento justiicado:

Lorem ipsum dolor sit amet, consectetu adipiscing elit. Aliquam in tortor sed e aliquam accumsan. Donec et dolor. In est sed turpis dictum hendrerit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital


Justiicado forado. Gentium Basic Bold 24/28pt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit.

Alinhado esquerda. Gentium Basic Bold 24/28pt.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital


Justiicado forado. Gentium Basic Bold 24/28pt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit.

Justiicado. Gentium Basic Bold 24/28pt.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital


Justiicado forado hifenizado. Gentium Basic Bold 24/28pt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit.

Justiicado hifenizado. Gentium Basic Bold 24/28pt.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital


Justiicado forado hifenizado. Gentium Basic Bold 24/28pt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit.

Alinhado esquerda hifenizado. Gentium Basic Bold 24/28pt.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital


Alinhado esquerda. Gentium Basic Bold 24/28pt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in tortor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit.

Alinhado esquerda hifenizado. Gentium Basic Bold 24/28pt.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Espao Horizontal: - Comprimento ou medida da linha: largura da coluna (exceto ttulos, subttulos, legenda...) Caracteres por linha: . leitura contnua = 65. Variao = 45-75 (10 a 11 palavras em portugus). Linhas longas pedem entrelinha maior. Linhas curtas: jornais, celulares... - prejudicam o fraseado.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Espao Horizontal: - Espao entre palavras: quadratim eme = espao da letra M = distncia equivalente ao tamanho do tipo (Ex.: tipo de 12pts, eme mede 12pts); Ene = 1/2 quadratim eme; espao largo = 1/3 eme etc. *A tipograia digital permitiu outras medidas -> diviso do quadratim eme em unidades. Possibilidade de medidas quebradas (Ex.: 13pts, 15pts...).

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Espao Horizontal: - Hifenizao: . no relete a maneira como falamos; . fora o leitor a suspender a interpertao entre as passagens de linhas; . no indicado para leitores pouco experientes; . deve ser usada com cautela e ateno para leitores experientes; . ajuda a suavizar problemas com alinhamento justiicado e esquerda; . pode ser conigurada nos programas de editorao. Dica
Sugesto de leitura HASLAM p.79 82.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital


c a i x a
Caixa-alta e caixa-baixa empilhadas: baixssima velocidade de leitura.

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.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Alinhamento Vertical
linhas de base verticais: preserva a ainidade natural das letras.

Leitura melhor

Lombadas LIVROS

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Hierarquia
sistema que organiza o contedo, enfatizando dados e preterindo outros. - listas, endentaes, VERSAIS, sublinhado, negrito, outra cor, itlico, outra fonte, elementos gricos

Dica
D uma olhada LUPTON p.94 99.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Diagrama
Os diagramas servem para organizar o contedo no espao, seja de forma rgida ou lexvel, simples ou complexa. Seu objetivo o controle a partir da presso interna do contedo (texto, imagens etc) e da presso externa (da margem, da moldura etc).

Dica
Bons exemplos no captulo DIAGRAMA em LUPTON p.112 161.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Fontes Escalveis: vetoriais -> podem ser ampliadas e reduzidas sem perda de qualidade. So deinidas pelo contorno. Fontes ixas: bitmap ou pixel fonts -> estruturadas pela grade de pixels da tela. Projetadas para serem usadas em um tamanho especico.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Uso:

Programas gricos: ferramentas de texto -> ttulo (s/quebra de linha) e pargrafo (c/quebra de linha, hifenizao...) InDesign, Page Maker, Scribus, Quark Xpress = programas de paginao. So projetados para diagramar textos e inalizar arquivos.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Problemas comuns em impresso:


1. Textos com fontes e caracteres trocados; 2. Estilo de fonte trocado; 3. Falta de acentos ou caracteres especiais 4. Baixa qualidade de impresso (facetamento ou serrilhamento); 5. Reluxo de texto. Causa: - Uso de fontes incompatveis com a linguagem Post Script (RIPs)

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Padres de fontes
True Type (Apple) usadas como fontes de sistema pela Microsoft. - originalmente, no compatveis com a linguagem PS; - quando exportadas em PS, so adaptadas pelo S.O.; - geram excesso de ns quando convertidas em curvas; - so muito difundidas porque so mais baratas. No Windows = 1 arquivo .TTF

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Padres de fontes
Post Script (Adobe) tambm conhecidas como Type 1. - totalmente compatveis com a linguagem PS; - mais caras; No Windows = 2 arquivos - .PFB(impresso) e .PFM (tela)

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Padres de fontes
Open Type (Microsoft e Apple) tambm conhecidas como True Type 2. - compatveis com as linguagens PS e PCL; - juno dos fundamentos dos formatos Type 1 e True Type em um nico arquivo = lexibilidade; - suporte para grande nmero de lnguas em um nico arquivo;

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Padres de fontes
Open Type (Microsoft e Apple) - centenas de glifos (caracteres); - ligaturas automticas + elementos decorativos + caracteres numricos antigos + sobrescritos e subscritos adaptados + fraes; - preciso na conigurao do texto Gera 1 arquivo multiplataforma: .OTF ou .TTF

Bibliografia
BRINGHURST, Robert. Elementos do Estilo Tipogrico. verso 3.0, Cosac Naify. So Paulo, 2005. FARIAS, Priscila Lena. Tipograia digital: o impacto das novas tecnologias. Editora 2AB. Rio de Janeiro. 2000. HASLAM, Andrew. O Livro e o Designer II: como criar e produzir livros. Edies Rosari. So Paulo, 2007. HORIE, Ricardo Minoru. Preparao e Fechamento de Arquivos para Artes Gricas. Ed. rica. So Paulo, 2005. LUPTON, Ellen. Pensar com tipos: um guia para designers, escritores, editores e estudantes. Traduo: Andr Stolarski. Cosac Naify, 2006. RIBEIRO, Milton. Planejamento Visual Grico. Linha Grica e Editora. 2 ed. 1987.

EBA - UFBA | Prof Erica Ribeiro de Andrade | 2009