Anda di halaman 1dari 48

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

FMU| Prof Erica Ribeiro de Andrade | 2013

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.

FMU| Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Famlia

Variaes pertencentes a uma fonte:


*Exemplo fonte Myriad Pro *Exemplo fonte Myriad Pro

Peso: Regular, SemiBold, Bold etc

Largura: Condensada, Normal, Expandida** etc

**variao no disponvel

Dica

Bons exemplos em LUPTON p.45, 46 e 47.

FMU| Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

FMU| Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

FMU| Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

FMU| Prof Erica Ribeiro de Andrade | 2013

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

FMU| Prof Erica Ribeiro de Andrade | 2013

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

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Aps longa prtica, seu trabalho [o dos escribas] ganhou uma textura to homognea e flexvel que a pgina escrita passou a ser chamada de textus (tecido, em latim). O instrumento tipogrfico, 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]

FMU | Prof Erica Ribeiro de Andrade | 2013

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 flido, 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

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Composio Tipogrfica

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

FMU | Prof Erica Ribeiro de Andrade | 2013

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)

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

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

Tbua Dalva Tbua


Amostra em Palatino Linotype (Regular e Itlico)

Kerning suprimido

Dalva

com Kerning

Dica

Veja exemplos em LUPTON p.80 e 81.

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

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

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)

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Espacejamento ptico

Dica

Sugesto de leitura: RIBEIRO, p.217 231.

FMU | Prof Erica Ribeiro de Andrade | 2013

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.

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Pargrafo

Quebra de linha, marcas de pargrafo - ,

entrada de pargrafo (endentao)

pargrafo avanado

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital


linhas recuadas

continuidade com smbolos (origem: Grcia)

Dica

Veja exemplos em HASLAM p.73 75.

FMU | Prof Erica Ribeiro de Andrade | 2013

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 dificulta a leitura, principalmente para leitores inexperientes (Ex.: crianas). USO: legendas, textos curtos.

FMU | Prof Erica Ribeiro de Andrade | 2013

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

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital


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

Alinhamento justificado:

Lorem ipsum dolor sit amet, consectetu adipiscing elit. Aliquam in tortor sed e aliquam accumsan. Donec et dolor. In ut e 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.

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital


Justificado 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.

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital


Justificado 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.

Justificado. Gentium Basic Bold 24/28pt.

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital


Justificado 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.

Justificado hifenizado. Gentium Basic Bold 24/28pt.

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital


Justificado 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.

FMU | Prof Erica Ribeiro de Andrade | 2013

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.

FMU | Prof Erica Ribeiro de Andrade | 2013

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.

FMU | Prof Erica Ribeiro de Andrade | 2013

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 tipografia digital permitiu outras medidas -> diviso do quadratim eme em unidades. Possibilidade de medidas quebradas (Ex.: 13pts, 15pts...).

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Espao Horizontal: - Hifenizao: . no reflete 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 justificado e esquerda; . pode ser configurada nos programas de editorao.

Dica

Sugesto de leitura HASLAM p.79 82.

FMU | Prof Erica Ribeiro de Andrade | 2013

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 ficarem uma ao lado da outra.

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Alinhamento Vertical

Leitura melhor

linhas de base verticais: preserva a afinidade natural das letras.

Lombadas LIVROS

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

FMU | Prof Erica Ribeiro de Andrade | 2013

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 grficos

Dica

D uma olhada LUPTON p.94 99.

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Diagrama

Os diagramas servem para organizar o contedo no espao, seja de forma rgida ou flexvel, 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.

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

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

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Uso:

Programas grficos: 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 finalizar arquivos.

FMU | Prof Erica Ribeiro de Andrade | 2013

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. Refluxo de texto. Causa: - Uso de fontes incompatveis com a linguagem Post Script (RIPs)

FMU | Prof Erica Ribeiro de Andrade | 2013

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

FMU | Prof Erica Ribeiro de Andrade | 2013

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)

FMU | Prof Erica Ribeiro de Andrade | 2013

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 = flexibilidade; - suporte para grande nmero de lnguas em um nico arquivo;

FMU | Prof Erica Ribeiro de Andrade | 2013

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 configurao do texto Gera 1 arquivo multiplataforma: .OTF ou .TTF

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Fontes Piratas x Fontes Proprietrias x Fontes Livres: uma questo tica


Fontes piratas so todas aquelas adquiridas sem consentimento dos autores ou fabricantes, estando em desacordo com sua licena de uso e desrespeitando a lei de direitos autorais. . . . Problemas tcnicos relacionados: podem ter o trao das letras alterado baixa qualidade de arquivo podem no ser incorporadas em PDF

Dica

conhea a lei aqui http://www.planalto.gov.br/ccivil_03/leis/l9610.htm

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Fontes Piratas x Fontes Proprietrias x Fontes Livres: uma questo tica


Fontes proprietrias so todas aquelas adquiridas com consentimento dos autores ou fabricantes, estando em acordo com sua licena de uso e respeitando a lei de direitos autorais. A maioria paga e possui restries de uso que devem ser vistas na licena de uso.

Dica

algumas type foundries (fundies tipogrficas) famosas: http://www.linotype.com/ http://www.myfonts.com/ http://www.houseind.com/ http://www.parachute.gr/

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Fontes Piratas x Fontes Proprietrias x Fontes Livres: uma questo tica


Fontes Livres um conceito iniciado pela tipgrafa Ellen Lupton no movimento Free Font Manifesto de 2006.

* Livre traduo: O que aconteceria se algumas fundies tipogrficas no mundo doassem uma fonte de qualidade para a humanidade?

Dica

conhea o movimento aqui http://www.designwritingresearch.org/free_fonts.html http://freefontmanifesto.blogspot.com.br/

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Fontes Piratas x Fontes Proprietrias x Fontes Livres: uma questo tica


Esse conceito se baseia nas 4 liberdades dos softwares livres:
- A liberdade de executar o programa, para qualquer propsito (liberdade no. 0); - A liberdade de estudar como o programa funciona, e adapt-lo para as suas necessidades (liberdade no. 1). Aceso ao cdigo-fonte um pr-requisito para esta liberdade; - A liberdade de redistribuir cpias de modo que voc possa ajudar ao seu prximo (liberdade no. 2); - A liberdade de aperfeioar o programa, e liberar os seus aperfeioamentos, de modo que toda a comunidade se beneficie (liberdade no. 3). Acesso ao cdigo-fonte um pr-requisito para esta liberdade. (fonte: http://softwarelivre.org/portal/o-que-e)

Dica

saiba mais sobre Cultura Livre http://softwarelivre.org/ http://www.culturalivre.org.br/wp/pt/

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Fontes Piratas x Fontes Proprietrias x Fontes Livres: uma questo tica


As fontes livres tambm so todas aquelas adquiridas com consentimento dos autores ou fabricantes, estando em acordo com sua licena de uso e respeitando a lei de direitos autorais. A maioria gratuita e seu cdigo fonte aberto. Elas tambm possuem restries de uso que devem ser vistas na licena de uso.

Dica

sites para baixar fontes livres e fontes gratuitas: http://www.fontsquirrel.com/ http://www.dafont.com/ Lembre-se: nem toda fonte gratuita livre! Fique de olho!

Bibliografia
BRINGHURST, Robert. Elementos do Estilo Tipogrfico. verso 3.0, Cosac Naify. So Paulo, 2005. FARIAS, Priscila Lena. Tipografia 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 Grficas. 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 Grfico. Linha Grfica e Editora. 2 ed. 1987.

FMU | Prof Erica Ribeiro de Andrade | 2013