AULA 4 TIPOGRAFIA

Prévia do material em texto

Composição tipográfica 
o que é composição tipográfica? 
O termo composição tipográfica, vem da 
prática profissional do tipógrafo que 
separava e organizava tipos e clichês de 
madeira e/ou metal para produzir 
impressos. (principalmente livros e jornais) 
o termo também pode ser utilizado para 
descrever as formas de organização de um 
layout tipográfico qualquer, como uma 
página de livro, um folheto, um cartaz, um 
folder, um site, etc. 
Nessa aula vamos nos ater a questão 
impressa, começando pelo layout dos 
livros. 
O layout da página de livro começou a ser 
«repensado» em meados do século XV, 
com a intervenção de Aldo Manuzio. 
Paralelamente a ele, Anton Koberger, fazia 
um trabalho semelhante, ambos como 
livreiros e impressores, tornando o acesso a 
literatura mais amplo, a partir da escrita em 
caracteres romanos e itálicos. 
aspectos históricos de Manuzio a 
Tschichold 
Aldo Manuzio 
• Publicou mais de 1 centena de 
livros. 
• Adotou o alfabeto romano para 
melhorar a qualidade da leitura e 
aproveitamento de espaço nas 
edições. 
• Criou as edições de bolso. 
• Seus livros são eram de tão boa 
qualidade, que existem obras em 
perfeito estado até os diais atuais. 
Anton Koberger 
• Impressor e editor que 
imprimiu e publicou a Crônica 
de Nuremberg. 
• Da oficina de Anton Koberger 
saiu em 1475 a primeira Bíblia 
ilustrada. 
• Koberger criou provavelmente 
mais de trinta tipos, a maioria 
góticos. 
Jan Tschichold 
foi tipógrafo, designer gráfico, 
professor e escritor. É considerado 
uma das maiores influências para a 
tipografia do século XX. 
Página diagramada por Manuzio 
 
 
 
 
 
 
Die neue typographie foi o primeiro livro que 
Tschichold escreveu e compôs na totalidade; 
 
detalhes da composição 
tipográfica 
A harmonia de uma peça gráfica está 
relacionada com o prazer estético que se 
tem (ou não) ao se apreciar uma peça. 
Parte da sensação harmônica vem da noção 
de unidade. Pode-se dizer que existem 
quatro princípios do design que ajudam a 
fortalecer a ideia da unidade e harmonia: 
proximidade, 
alinhamento, 
repetição e contraste. 
detalhes da composição 
tipográfica 
• Proximidade: os itens 
relacionados entre si em uma 
peça, devem ser agrupados. 
Quando vários itens estão 
próximos, têm-se uma unidade 
visual e não várias unidades 
individualizadas. Isso ajuda a 
produzir um layout mais 
homogêneo e harmônico. 
• Alinhamento : Nada deve ser 
colocado arbitrariamente em 
uma obra. Isso prova a 
importância de uma boa grid. 
Dessa forma os itens ficam 
alinhados, ordenados e com os 
mesmos distanciamentos entre 
si. 
• Repetição : Uma vez criado um 
certo padrão ele deve ser 
repetido por toda a obra. 
Exemplo: uma mesma cor e 
fonte para títulos, subtítulos e 
separações de página. A 
diferenciação aleatória tira do 
leitor/usuário a noção de 
harmonia e unidade. 
• Contraste: O contraste deve ser 
usado para marcação de 
elementos distintos, de forma a 
deixar claro quando dois 
elementos de uma composição 
são diferentes entre si. 
 
 
 
 
 
 
 
 
 
 
contraste entre fontes cabeçalho, títulos e subtítulos 
 unidade tipográfica entre títulos 
 
 
 
 
manchetes proximidade 
 
 
 
detalhes da composição do 
livro: folhas de rosto 
é aquela que apresenta o título. Essa página 
deve apresentar graficamente as 
informações como título, subtítulo e autor 
de modo coerente com o projeto gráfico do 
livro. É a fonte que fornece os dados 
necessários à identificação da obra. No caso 
de um livro deve conter os mesmos 
elementos gráficos e textuais da capa em 
fundo branco invertendo as cores caso não 
haja legibilidade. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
• O título não deve ser posto no centro 
isso pode fazê-lo destoar do conjunto 
do livro. 
• É quase sempre melhor manter a linha 
principal de um título 
perceptivelmente mais estreita que o 
total da composição. 
• Ela deve ser composta da mesma 
família tipográfica na qual foi 
elaborada o livro. Quanto menor a 
variedade de corpos de fontes melhor. 
• A editora nunca deve vir com mais 
destaque que o autor e, portanto, deve 
ser composta em fonte menor. 
manchetes proximidade 
unidade tipográfica entre titulos 
contraste entre fontes 
cabeçalho, títulos e subtitulos 
Folha de rosto modelo 
 
Folha de livro de arte 
 
 
detalhes da composição: mancha 
gráfica 
O conceito de mancha gráfica é 
amplamente utilizado na área editorial (em 
jornais, revistas, livros, periódicos etc), ela 
define uma área delimitada para impressão 
na página. Faz parte da mancha também a 
inclusão de margens. As margens e o 
entrelinhamento, facilitam a leitura, 
fornecem espaço para o acabamento e 
melhoram a compreensão do texto. 
Colunas de textos muito largos e espaço 
entrelinhas muito grande dificultam a 
leitura; por isso, o ideal é utilizar uma 
coluna de texto mais estreita com margens 
mais amplas. 
Pode ter uma, duas, três ou mais colunas. 
 
Exemplo de mancha com uma coluna por página 
 
 
 
Exemplo de mancha com duas colunas por página 
detalhes da composição: recuos 
O recuo, ou o começo de um novo 
parágrafo, tem a função de começar uma 
nova sequência de pensamentos do autor. 
O recuo é utilizado, pois guia o leitor de 
forma mais lógica e harmoniosa pelo texto. 
Existem o símbolo de quebra ou seção que 
também tinha como função limitar o 
começo de um novo grupo de frases. 
 
 
Todavia, o recurso do recuo funciona 
melhor no que diz respeito a legibilidade e 
a harmonia da composição do texto e da 
mancha gráfica. 
 
EXEMPLO 
composição com recuo : 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum risus 
sit amet justo mattis adipiscing. Nulla laoreet mollis nibh, quis tristique quam 
bibendum at. Aenean at ultrices augue. Integer lobortis risus in diam 
pellentesque placerat. Class aptent taciti sociosqu ad litora torquent per conubia 
nostra, per inceptos himenaeos. Sed dapibus arcu at blandit porta. In a 
venenatis ligula. Sed posuere nunc felis. 
Suspendisse nec varius felis. Proin dapibus auctor lacus at pretium. Fusce lacinia 
vel mi ut sagittis. Aliquam sodales enim et augue ultricies ultrices. Cum sociis 
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
Nulla tincidunt, odio at cursus accumsan, sem libero commodo dui, tincidunt 
malesuada mauris massa nec libero. Cras commodo sapien neque, eget 
elementum nisi laoreet non. Aliquam erat volutpat. Ut ante mauris, interdum a 
lectus quis, tristique interdum felis. Fusce mauris libero, aliquam blandit mattis 
eu, ultrices a nibh. Fusce dignissim a quam sit amet porttitor. Donec lorem dui, 
lobortis dapibus suscipit sit amet, placerat ac massa. 
composição sem recuo: 
Suspendisse nec varius felis. Proin dapibus auctor lacus at pretium. Fusce lacinia 
vel mi ut sagittis. Aliquam sodales enim et augue ultricies ultrices. Cum sociis 
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla 
tincidunt, odio at cursus accumsan, sem libero commodo dui, tincidunt 
malesuada mauris massa nec libero. Cras commodo sapien neque, eget 
elementum nisi laoreet non. Aliquam erat volutpat. Ut ante mauris, interdum a 
lectus quis, tristique interdum felis. Fusce mauris libero, aliquam blandit mattis 
eu, ultrices a nibh. Fusce dignissim a quam sit amet porttitor. Donec lorem dui, 
lobortis dapibus suscipit sit amet, placerat ac massa. Nam in dui eget diam 
eleifend consequat sed porttitor mauris. Maecenas quis augue eget eros porta 
vehicula vitae non ante. Fusce blandit quam eget ipsum blandit faucibus. Cras 
euismod ultricies diam, non molestie erat auctor eget. Sed tempor sit amet arcu 
id suscipit. In metus nibh, mollis ac posuere luctus, sollicitudin at leo. Nulla tempor 
euismod mi, sitamet pharetra erat dictum id. 
detalhes da composição: viúvas e órfãos 
Uma viúva é uma linha curta ou uma única 
palavra perdida no final de um parágrafo. 
Um órfão é uma palavra ou uma linha curta 
no começo ou no final de uma coluna que 
está separada do resto do parágrafo. Eles 
afetam a legibilidade to texto e 
interrompem a linha de leitura. Podem ser 
evitados fazendo-se alguns ajustes no 
tamanho de fonte, espaçamento entre 
palavras e letras ou quebrando linhas 
manualmente. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 detalhes da composição: letra capitular 
No contexto da tipografia, uma letra capitular ou 
letra capital é uma letra no início da obra, de um 
capítulo ou de um parágrafo, de maior dimensão 
que o restante corpo do texto. Em manuscritos 
ou livros antigos, a letra capital é muitas vezes 
profusamente decorada e chega a ocupar várias 
linhas do corpo do texto. 
exemplos de impressos com letras 
capitulares bem ornadas: 
 
 
 
 
 
 
 
 
 órfão 
 viúva 
exemplo de letra capitular 
orem ipsum dolor sit amet, 
consectetur adipiscing elit. 
Aenean bibendum risus sit 
amet justo mattis adipiscing. 
Nulla laoreet mollis nibh, quis 
tristique quam bibendum at. 
Aenean at ultrices augue. 
Integer lobortis risus in diam 
pellentesque placerat. Class 
aptent taciti . 
 
detalhes da composição: entrelinhamento 
O entrelinhamento é o espacejamento entre as 
linhas de tipos. Em grandes massas de texto, o 
calculo desse espaço em branco é fundamental 
para a legibilidade, beleza e melhor 
aproveitamento gráfico de espaço na 
composição que está sendo feita. 
 Quando se fala de espaçamento tem-se o 
entrelinhamento (o espaço entre linhas) o 
kerning (espaço entre letras) e o tracking 
(espaço entre blocos de palavras). 
entrelinha 100: 
Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Aenean bibendum risus sit amet justo mattis 
adipiscing. Nulla laoreet mollis nibh, quis tristique quam 
bibendum at. Aenean at ultrices augue. Integer lobortis 
risus in diam pellentesque placerat. Class aptent taciti 
sociosqu ad litora torquent per conubia nostra, per inceptos 
himenaeos. Sed dapibus arcu at blandit porta. In a venenatis 
ligula. Sed posuere nunc felis. 
entrelinha 140: 
Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Aenean bibendum risus sit amet 
justo mattis adipiscing. Nulla laoreet mollis nibh, 
quis tristique quam bibendum at. Aenean at ultrices 
augue. Integer lobortis risus in diam pellentesque 
placerat. Class aptent taciti sociosqu ad litora 
torquent per conubia nostra, per inceptos 
himenaeos. Sed dapibus arcu at blandit porta. In a 
venenatis ligula. Sed posuere nunc felis. 
detalhes da composição: notas 
Podem vir a partir de enumerações contidas no 
corpo do texto no rodapé da página de onde 
saiu a referência ou, ainda, agrupadas em uma 
seção ao final de cada capitulo. 
No caso de notas grandes devem ser dividas em 
duas páginas para manter a harmonia da 
mancha gráfica. 
 
detalhes da composição: fólio 
São os números das páginas. As páginas 
ímpares ficam a direita e não há página zero. A 
contagem inicia-se na folha de rosto ou falsa 
folha de rosto se houver. Páginas de prefácio, 
agradecimento, e introdução, podem ser 
foliadas em algarismos romanos. 
O fólio pode aparecer na região superior ou inferior 
direita, ou na porção central do topo ou da base do 
livro. O corpo utilizado deve ser o mesmo do corpo 
do texto, ou apenas um ponto a menos. 
exemplo de notas agrupadas ao 
exemplo de nota no pé da página 
L 
 Folha de rosto, falsa folha de rosto, ficha 
catalográfica, e página capitular não são 
enumeradas. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
detalhes da composição: títulos ou cabeça 
Identifica partes do livro. Localiza-se fora da 
mancha gráfica. Marca títulos e subtítulos. 
 
detalhes da composição: layout híbrido 
Há dois tipos essenciais de layout híbrido. 
Um no qual texto e ilustrações/imagem se 
combinam na mancha gráfica, e outro no 
qual texto e imagem formam dois elementos 
distintos. 
• No caso de layouts com imagens 
inseridas na mancha, o mais 
«tradicional» é utilizar o espaço da 
mancha sem ultrapassá-lo. Todavia, em 
composições menos formais e livros de 
arte, sangrar a imagem pode ser um 
recurso estético muito interessante. 
• Reproduções de obras de arte 
:Reproduções de quadros, esculturas e 
fotografias devem respeitar as 
 
 
 
 
 
 
 
 
 20 
 25 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 18 
 13 
 
 
 
 
 
 
 
 
proporções da obra original e jamais 
devem ser cortadas. 
detalhes da composição: layout híbrido 
Livro de arte com layout híbrido 
 
Página da revista Galileu com imagem em 
sangria 
 
Página com layout híbrido sem sangria