Aula Tipografia FMU

Anatomia do Tipo Composio Tipogrfica Tipografia Digital
FMU| Prof Erica Ribeiro de Andrade | 2013
Fonte
Conjunto completo de sinais alfabticos e para-alfabticos que integram um determinado alfabeto em um dos corpos disponveis.
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.

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
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
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]
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
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.
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)
- 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.
- 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)
Espacejamento ptico
Dica
Sugesto de leitura: RIBEIRO, p.217 231.
- 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.
Pargrafo
Quebra de linha, marcas de pargrafo - ,
entrada de pargrafo (endentao)
pargrafo avanado

linhas recuadas
continuidade com smbolos (origem: Grcia)
Dica
Veja exemplos em HASLAM p.73 75.

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.

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

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.

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.

Justificado forado. Gentium Basic Bold 24/28pt.
Justificado. Gentium Basic Bold 24/28pt.

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

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

Alinhado esquerda. Gentium Basic Bold 24/28pt.
Alinhado esquerda hifenizado. Gentium Basic Bold 24/28pt.
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.
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...).
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.

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.
Alinhamento Vertical
Leitura melhor
linhas de base verticais: preserva a afinidade natural das letras.
Lombadas LIVROS
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.
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.
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.
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.
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)
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
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)
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;
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
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

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/

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/

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/

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.

Aula Tipografia FMU

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Aula Tipografia FMU

Transféré par

Droits d'auteur :

Formats disponibles

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

Variaes pertencentes a uma fonte:

Peso: Regular, SemiBold, Bold etc

Largura: Condensada, Normal, Expandida** etc

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-x = corpo principal da letra minscula sem as ascendentes e as descendentes.

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

Amostra de texto na fonte Gentium fonte: http://www.lipsum.com/

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

Tbua Dalva Tbua

Veja exemplos em LUPTON p.80 e 81.

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

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

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

Veja exemplos em LUPTON p.82 e 83.

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Quebra de linha, marcas de pargrafo - ,

entrada de pargrafo (endentao)

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

continuidade com smbolos (origem: Grcia)

Veja exemplos em HASLAM p.73 75.

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

Alinhado esquerda. Gentium Basic Bold 24/28pt.

FMU | Prof Erica Ribeiro de Andrade | 2013

Anatomia do Tipo Composio Tipogrfica Tipografia Digital

Justificado. Gentium Basic Bold 24/28pt.