Aula Tipografia Libre

Anatomia do TipoComposição Tipográfica

Tipografia Digital


Tipografia Digital

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

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


Tipografia Digital


FamíliaVariações pertencentes a uma fonte:

*Exemplo fonte LT Aroma

Peso:

Light, Regular,

SemiBold, Bold etc

*Exemplo fonte Myriad Pro

Largura:

Condensada, Normal,

Expandida** etc

**variação não disponível

DicaBons exemplos emLUPTON p.45, 46 e 47.


Tipografia Digital



Tipografia Digital


Altura-x = corpo principal da letra minúscula sem as ascendentes e as descendentes.

Altura de Versal = distância da linha de base ao topo da maiúscula.

Linha de Base = onde as letras repousam. Letras de base curva ultrapassam levemente a linha de base para garantir estabilidade à palavra


Tipografia Digital


Arial 139pt Garamond 139pt

Sistema de medidas: Altura e Entrelinha (leading) > Sistema de Pontos1pt = 1/72 polegadas ou 0,35mm12pts = 1paica

unidade normalmente usada para medir colunas.

Dica - Abreviações:8 paicas = 8p8 pontos = p8, 8 pt8 paicas, 4 pontos = 8p4corpo de 8 pt e entrelinha de 9pt = 8/9


Tipografia Digital


“Após longa prática, 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, em latim).”

“O instrumento tipográico, seja ele um computador ou uma régua de composição, funciona como um tear. E o tipógrafo, assim como o escriba, procura tecer o texto da maneira mais homogênea possível. Do mesmo modo, os bons tipos são desenhados para produzir uma textura vivaz e homogênea, mas o espacejamento descuidado de letras, linhas e palavras pode rasgar esse tecido.”

“Uma vez satisfeitas as demandas de legibilidade e de ordenação lógica,a homogeneidade da cor é o objetivo mais comum almejado pelo tipógrafo. 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]


Tipografia Digital


TextoSequência contínua de palavras, distinta de legenda ou títulos mais curtos - corpo, texto corrido, massa de texto - íntegro, sólido ou lúido, consistente.

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. Vestibu-lum 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

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


Tipografia Digital


Composição TipográicaPode-se deinir como a organização do conteúdo dentroda estrututura da página - grade, espaços verticais, espaços

horizontais - conferindo segurança na leitura ~ conforto.


Tipografia Digital


Profundidade de Coluna = altura da coluna (pontos, paicas, mm)

- Quantidade de linhas:. acima de 96 linhas = grande profundidade: jornais, dicionários, enciclopédias... -> textos entrecortados por títulos; leitura não linear e descontínua; o leitor seleciona o texto.. entre 40 e 48 linhas = livros, romances... -> leitura linear e contínua; texto denso.

DicaAcrescentar entrelinha facilita a leitura de colunas densas (aproximadamente2 pts acima da medida automática)


Tipografia Digital


- Espacejamento: espaço (global) entre letras- Kerning (ou crenagem): ajuste entre pares de letras especíicas

DicaVeja exemplos emLUPTON p.80 e 81.

D’alva

D’alva

Tábua

Tábua

Kerning suprimido

com Kerning

Amostra em Palatino Linotype (Regular e Itálico)


Tipografia Digital


- Espacejamento mecânico: letras equidistantes entre si (desconfortável)- Espacejamento óptico: área proporcional de espaço 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)


Tipografia Digital


Espacejamento óptico

DicaSugestão de leitura:RIBEIRO, p.217 à 231.


Tipografia Digital


- Entrelinhamento: distância de uma linha de base para a outra.

Esse exemplo vai mostraro que é entrelhinha

Gentium Basic Bold 36/45pt

DicaVeja exemplos emLUPTON p.82 e 83.


Tipografia Digital


ParágrafoQuebra de linha, marcas de parágrafo - §, ¶

entrada de parágrafo (endentação) parágrafo avançado


Tipografia Digital


continuidade com símbolos (origem: Grécia) linhas recuadas

DicaVeja exemplos emHASLAM p.73 à 75.


Tipografia Digital


Fluxo orgânico da linguagem.Excesso de irregularidade pode ser atenuada com hifenização cautelosa

Alinhamento

à esquerda:

Início do texto quebrado diiculta a leitura, principalmente para leitores inexperientes (Ex.: crianças).USO: legendas, textos curtos.

à direita:


Tipografia Digital


Impróprio para textos longos;Usado em folhas de rosto tradicionais e poesias;Considerado clássico e formal;Ênfase com quebras de linhas propositais;Destaque de frases importantes.

Alinhamento

centralizado:

centralizado afunilado


Tipografia Digital


Forma espaços irregulares entre as palavras (rios). Requer atenção.

Alinhamento

justiicado:

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.



Tipografia Digital




Justiicado forçado.Gentium Basic Bold 24/28pt.

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


Tipografia Digital




Justiicado forçado.Gentium Basic Bold 24/28pt.

Justiicado.Gentium Basic Bold 24/28pt.


Tipografia Digital


Lorem ipsum dolor sit amet, con-sectetur adipiscing elit. Aliquam in tortor sed elit aliquam accu-msan. Donec et dolor. In ut est sed turpis dictum hendrerit.

Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Aliquam in tor-tor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit.

Justiicado forçado hifenizado.Gentium Basic Bold 24/28pt.

Justiicado hifenizado.Gentium Basic Bold 24/28pt.


Tipografia Digital


Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Aliquam in tor-tor sed elit aliquam accumsan. Donec et dolor. In ut est sed turpis dictum hendrerit.

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

Justiicado forçado hifenizado.Gentium Basic Bold 24/28pt.

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


Tipografia Digital



Lorem ipsum dolor sit amet, con-sectetur 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.

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


Tipografia Digital


Espaço Horizontal:- Comprimento ou medida da linha: largura da coluna (exceto títulos, subtítulos, legenda...)Caracteres por linha:

. leitura contínua = 65. Variação = 45-75 (10 a 11 palavras em português).Linhas longas pedem entrelinha maior.Linhas curtas: jornais, celulares... - prejudicam o fraseado.


Tipografia Digital


Espaço Horizontal:- Espaço entre palavras: quadratim eme = espaço da letra M = distância equivalente ao tamanho do tipo (Ex.: tipo de 12pts, eme mede 12pts); Ene = 1/2 quadratim eme; espaço largo = 1/3 eme etc.*A tipograia digital permitiu outras medidas -> divisão do quadratim eme em unidades. Possibilidade de medidas quebradas (Ex.: 13pts, 15pts...).


Tipografia Digital


Espaço Horizontal:- Hifenização:. não relete a maneira como falamos;. força o leitor a suspender a interpertação entre as passagens de linhas;. não é indicado para leitores pouco experientes;. deve ser usada com cautela e atenção para leitores experientes;. ajuda a suavizar problemas com alinhamento justiicado e à esquerda;. pode ser conigurada nos programas de editoração. Dica

Sugestão de leituraHASLAM p.79 à 82.


Tipografia Digital


Alinhamento Vertical

C

A

I

X

A

c

a

i

x

a

C

A

I

X

A

c

a

i

x

a

centralizar pode ajudar

Caixa-alta e caixa-baixa empilhadas: baixíssima velocidade de leitura.

letras romanas foram feitas para icarem uma ao lado da outra.


Tipografia Digital


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

Lombad

as LIVR

OSLe

itura

melh

or


Tipografia Digital



Tipografia Digital


Hierarquiasistema que organiza o conteúdo, enfatizando dados e preterindo outros.- listas, endentações, VERSAIS, sublinhado, negrito, outra cor,

itálico, outra fonte, elementos gráicos

DicaDê uma olhadaLUPTON p.94 à 99.


Tipografia Digital


DicaBons exemplos no capítulo DIAGRAMA emLUPTON p.112 à 161.

DiagramaOs diagramas servem para organizar o conteúdo no espaço, seja de forma rígida ou lexível, simples ou complexa. Seu objetivo é o controle a partir da pressão interna do conteúdo (texto, ima-gens etc) e da pressão externa (da margem, da moldura etc).


Tipografia Digital


Fontes Escaláveis: vetoriais -> podem ser ampliadas e reduzidas sem perda de qualidade. São deinidas pelo contorno.

Fontes ixas: bitmap ou pixel fonts -> estruturadas pela grade de pixels da tela. Projetadas para serem usadas em um tamanho especíico.


Tipografia Digital



Tipografia Digital


Uso:Programas gráicos: ferramentas de texto -> título (s/quebra de linha) e parágrafo (c/quebra de linha, hifenização...)

InDesign, Page Maker, Scribus, Quark Xpress = programas de paginação. São projetados para diagramar textos e inalizar arquivos.


Tipografia Digital


Problemas comuns em impressão:1. Textos com fontes e caracteres trocados;2. Estilo de fonte trocado;3. Falta de acentos ou caracteres especiais4. Baixa qualidade de impressão (facetamento ou serrilhamento);5. Reluxo de texto.

Causa:- Uso de fontes incompatíveis com a linguagem Post Script (RIPs)


Tipografia Digital


Padrões de fontesTrue Type (Apple)usadas como fontes de sistema pela Microsoft.- originalmente, não compatíveis com a linguagem PS;- quando exportadas em PS, são adaptadas pelo S.O.;- geram excesso de nós quando convertidas em curvas;- são muito difundidas porque são mais baratas.

No Windows = 1 arquivo .TTF


Tipografia Digital


Padrões de fontesPost Script (Adobe)também conhecidas como Type 1.- totalmente compatíveis com a linguagem PS;- mais caras;

No Windows = 2 arquivos - .PFB(impressão) e .PFM (tela)


Tipografia Digital


Padrões de fontesOpen Type (Microsoft e Apple)também conhecidas como True Type 2.- compatíveis com as linguagens PS e PCL;- 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;


Tipografia Digital


Padrões de fontesOpen Type (Microsoft e Apple)

- centenas de glifos (caracteres);- 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

Bibliografia

BRINGHURST, Robert. Elementos do Estilo Tipográico. versão 3.0, Cosac Naify. São 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. Edições Rosari. São Paulo, 2007.

HORIE, Ricardo Minoru. Preparação e Fechamento de Arquivos para Artes Gráicas. Ed. Érica. São Paulo, 2005.

LUPTON, Ellen. Pensar com tipos: um guia para designers, escritores, editores e estudantes. Tradução: André Stolarski. Cosac Naify, 2006.

RIBEIRO, Milton. Planejamento Visual Gráico. Linha Gráica e Editora. 2ª ed. 1987.


Aula Tipografia Libre

Documents

Transcript of Aula Tipografia Libre