AULA 3 TIPOGRAFIA

Prévia do material em texto

Tipografia 
. tipografia digital 
Na tipografia digital, as fontes deixaram de 
ser um objeto físico no formato de tipos de 
metal, madeira, ou imagens fotográficas 
sensibilizadas em papel e passaram a ser 
equações matemáticas «virtuais». As fontes 
bitmap começaram a ser usadas na década 
de 1970. Elas são definidas por adição e 
subtração de pixels. Em 1982 com a criação 
da linguagem PostScript, as fontes bitmap 
deram lugar às fontes com linhas de 
contorno escalonáveis, definidas por 
equações matemáticas. Na década de 1990 
surgiu o formato TrueType. A diferença 
entre elas é essencialmente algébrica, as 
curvas das fontes truetype são quadráticas, 
enquanto as PostScript são cúbicas. Devido 
a interação dos dois formatos com os 
fabricantes de programas de editoração 
chegaram a um acordo no final dos anos de 
1990 para a criação de um formato que 
trabalhe com curvas tanto cúbicas, quanto 
quadráticas, o Opentype. 
fontes escalonáveis: vetoriais podem ser 
ampliadas e reduzidas sem perda de 
qualidade. São definidas pelo seu contorno. 
fontes fixas: bitmap ou pixel fonts 
estruturadas pela grade de pixels da tela. 
Projetadas para serem usadas em um 
tamanho específico. 
 
Na prática do design, qual é a diferença 
entre fontes TrueType, PostScript e 
OpenType? 
Seja em um Mac ou PC com Windows, você 
trabalha com fontes todos os dias. Desde 
designers gráficos, que criam coleções de 
centenas e até milhares de fontes 
tipográficas, até profissionais que usam 
apenas aquelas tipografias que vêm com o 
sistema operacional e aplicações, os 
usuários de computadores as usam para 
. tipografia 
digital 
pixel font ou fonte fixa 
 fonte escalonável 
criar documentos, montar interfaces de 
usuário e ler conteúdo online. Entender as 
diferenças entre os formatos de arquivos 
de fontes mais comuns pode ajudá-lo a 
usar, e até aproveitar, todas as opções 
disponíveis. 
TTF 
A extensão de arquivo TTF apareceu nas 
tipografias TrueType do Windows. Com a 
chegada do Mac OS X, ela deixou de ser 
exclusiva da plataforma para ser compatível 
com ambos sistemas operacionais. A Apple 
inventou o formato TrueType com o objetivo de 
substituir as antigas fontes de mapas de bits por 
uma alternativa mais flexível para distribuir as 
fontes do sistema operacional Mac. O TrueType 
usa um arquivo único para conter todas as 
instruções matemáticas e informáticas 
necessárias para mostrar os caracteres na tela e 
no papel. Em comparação com algumas normas 
tipográficas persistentes, tais como o formato 
PostScript Tipo 1 da Adobe Systems, o TrueType 
usa menos curvas para construir os símbolos e 
elas são mais simples. 
Na prática do design, qual é a diferença 
entre fontes TrueType, PostScript e 
OpenType? 
OTF 
A extensão OTF indica um tipo de fonte 
OpenType, que usa as últimas tecnologias de 
fontes do mercado. Como o TrueType, o 
OpenType funciona em várias plataformas. 
Diferente da maioria dos formatos antigos, o 
OpenType permite ao designer tipográfico 
produzir um arquivo único com a capacidade de 
aplicar múltiplos estilos e suportar conjuntos de 
caracteres multilíngues. As fontes OpenType 
também podem incluir alternativas de estilo que 
permitam às aplicações empregar diferentes 
formas de um caractere, dependendo do 
contexto no qual apareça. Essa tecnologia 
permite aos designers criar símbolos que 
pareçam como a escrita à mão, com formas 
diferentes. Dentro de uma fonte OpenType 
individual, a tecnologia subjacente pode ser 
baseada em algoritmos TrueType ou PostScript 
Tipo 1. 
 
As fontes OTF permitem um mapeamento 
ampliado de caracteres especiais e glifos, 
possibilitando o uso de ligaduras, diferentes 
alternativas para determinados caracteres, 
posições e estilos. Podem ainda incluir 
informações que oferecem suporte ao 
posicionamento bidimensional de glifos e a 
anexos de glifos, e ainda conter contornos 
TrueType ou PostScript. As fontes “clássicas”, as 
consideradas fontes padrão da plataforma PC 
(Arial e Times New Roman, por exemplo), 
comportam scripts da Europa ocidental e 
central, hebraico, árabe, grego, turco, báltico, 
cirílico e vietnamita, somente faltando os scripts 
do leste asiático, por conta da sobrecarga de 
informações que limitaria o carregamento das 
informações. 
Onde ver esses caracteres a mais nos 
programas Adobe? 
No Illustrator: Selecione alguma fonte que 
tenha extensão Opentype na sua paleta 
(Cmd ou Ctrl+T). 
 
Em seguida, no menu do programa, vá 
até a opção “Type” e selecione 
“Glyphs” 
 
Em seguida, abrirá uma tela com todos os 
caracteres presentes nessa fonte. Para usá-
los, basta dar um duplo clique em cima das 
opções. 
 
InDesign 
 No Indesign as opções aparecem 
destacando-se entre os detalhes a serem 
mudados. Selecione Cmd (ou Ctrl)+T. O box 
“Character” irá aparecer. 
 
No ícone a direita, com um triângulo e 
algumas linhas, deverá ser selecionado a 
Opção Opentype. Nessa opção, é mostrada 
todas as opções de mudança nos caracteres 
presentes na fonte. (números, frações, 
detalhes de ligaturas, etc). 
 
Na prática do design, qual é a diferença 
entre fontes TrueType, PostScript e 
OpenType? 
Outros formatos 
As fontes de mapas de bits antigas 
ofereciam suporte para saída em tamanhos 
específicos, significando que, se você tinha 
que usar três tamanhos da mesma fonte no 
seu documento, precisava de software que 
pudesse produzir cada tamanho. Essa 
limitação foi rapidamente considerada 
complexa para os designers gráficos. As 
fontes PostScript Tipo 1 quebraram esse 
modelo e ofereceram caracteres escaláveis 
quase que infinitamente, requerendo uma 
impressora compatível com a tecnologia. A 
Adobe Systems, criadora do formato, 
permitiu ao software Adobe Type Manager 
remover essa limitação de saída. O Tipo 1 
passou de ser um modelo originalmente 
exclusivo de Mac para ser suportado por 
várias plataformas, apesar das fontes 
individuais continuarem sendo exclusivas. 
Além das fontes PostScript, os usuários de 
Mac tiveram, por um tempo, suporte ao 
QuickDraw GX, um formato que ofereceu 
conjuntos amplos de caracteres como o 
OpenType. O formato desapareceu, pois 
não conseguiu ganhar suporte das 
aplicações. 
. softwares de edição e criação de fontes 
trata-se de uma ferramenta virtual para 
manipulação de fontes existentes, ou até 
mesmo a criação de novos glifos. As 
possibilidades de trabalho são grandes e 
vão desde a criação de fontes a partir de 
roughs, passando por composições em 
tablets, e/ou construções via mouse. 
 
. softwares de edição e criação de fontes 
 
. tipografia digital - algumas 
considerações 
• Uma variada paleta de glifos, 
mapeados de maneiras diversas 
pode vir de um único conjunto de 
caracteres padrão, com diferentes 
ligaturas, itálicos, bolds e diferentes 
tamanhos de versaletes. 
• A Tipografia digital conta com 
programas de computador que 
podem fazer tais alterações, 
existem maneiras de fazê-lo em 
programas de design, além de 
alguns específicos de edição de 
fontes e caracteres. 
• Outra vantagem da tipografia 
digital é o cálculo (praticamente 
automático) e matemático de 
entrelinhas, entre letras, quebras 
de linha, parágrafos e 
alinhamentos. Tudo isso era feito 
no olho anteriormente. 
• Projete textos tendo em vista o 
suporte. Tela requer um tipo de 
trabalho, impressões jato de tinta 
outro, laser outro e impressão de 
máquina outro. A emissão de luz pode 
tornar cansativo o ato de ler em tela, 
use fontes com baixo contraste, 
interiores abertos, terminais sólidos, 
com serifas retas ou bastão. 
• Teclados de computador podem 
ser redefinidos com uma variedade 
grande de caracteres em diferentes 
mapas de glifos. 
 
tipografia digital uso web 
Enquanto no design impresso é possível 
“pirar a cabeça” com a tipografia criar 
blocos de texto na vertical ou em um 
certo ângulo,usar várias fontes 
mirabolantes, entre outros exemplos – 
no web design a coisa é mais básica. 
Existe um limite de fontes que podem 
ser utilizadas no texto corrido. E só por 
que você tem uma determinada família 
tipográfica no seu computador, não 
quer dizer que seu site pode utilizar 
essa mesma. É aí que entram as “fontes 
seguras”. 
A primeira coisa que devemos nos 
preocupar ao implementar a tipografia 
na web é se a fonte é segura para o uso 
na web. Quer dizer, se a fonte vai ou 
não aparecer no navegador do usuário. 
Só por que você tem uma gama 
enorme de fontes, não quer dizer que 
todas irão aparecer nas telas de outros 
usuários. É por isto que a maioria dos 
web designers optam por utilizar 
“fontes seguras” que eles sabem que 
serão mostrados da maneira correta 
independente de qual fonte estiver 
instalada no computador do usuário. 
o fato é que é fundamental 
começarmos a tratar a tipografia não 
apenas como algo bonitinho e sim 
como uma parte fundamental da user 
interface. 
Alinhamento 
Blocos de texto alinhados a direita são 
difíceis de ler já que o ponto inicial de 
cada linha é completamente irregular. 
Textos centralizados também possuem 
o mesmo problema, mas podem ser 
usados para destacar blocos curtos de 
informações como títulos e citações. 
 O caso de textos justificados é um 
pouco mais complexo. O problema 
principal aqui é que na internet não 
existe hifenização. Por conta disto 
lacunas (também conhecidas como 
rios) são criadas entre as palavras o que 
torna a leitura muito desagradável. Ou 
seja, justifique apenas textos bem 
curtos que você possui um controle 
total. Palavra por palavra. Se é algo 
dinâmico esqueça pois muitas vezes o 
cliente final não vai ter este tipo de 
cuidado… 
. tipografia digital uso web 
Se a maior parte do tempo que um 
usuário gasta em um site é lendo o 
conteúdo é nossa obrigação fazer disto 
uma tarefa fácil e agradável. A regra 
fundamental de “não faça o usuário 
pensar” deve também ser estendida a 
tipografia. 
 Podemos adicionar “não faça o usuário 
forçar a vista”, “não faça o usuário colar 
a cara no monitor para entender o seu 
conteúdo”… Um site deve ser fácil de 
usar e para isto ele precisa ser fácil de 
ler. E usar desculpas do tipo “Ah, mas 
ele pode aumentar o tamanho do texto 
pelo browser” é demagogia pura. 
Imaginar que todo usuário final sabe 
configurar o tamanho do texto é uma 
ilusão confortável. Minha tia demora 
para encontrar o ícone do jogo de 
paciência na área de trabalho e me liga 
toda vez que precisa espetar o pen 
drive na entrada USB… 
Conhecer tipografia é garantir que o 
seu usuário tenha uma boa experiência 
de navegação independente de seu 
nível de conhecimento técnico e, 
consequentemente, que seu cliente 
não perca visitas. Para isto é necessário 
conhecer alguns conceitos básicos. 
 
 
 
. tipografia digital uso web 
Qual família escolher? 
Considerando a internet como meio, 
muitas vezes a escolha recai entre as 
duas principais categorias serifa e sem-
serifa. Por um tempo existiu um mito 
de que fontes sem serifa tem a 
legibilidade melhor na internet por que 
os browsers renderizam as serifas com 
menos nitidez… Mas isto só é valido se 
você for considerar um font-size menor 
que 12 pontos. Em tamanhos maiores 
as duas categorias ficam empatadas e o 
que deve ditar a escolha é o estilo geral 
do design da página. 
Tamanho 
O tamanho padrão de texto de um 
browser é 16px. Este não é um número 
aleatorio. Ele foi escolhido por uma 
razão. Quando lemos um livro ou um 
trabalho acadêmico seguramos o papel 
a uma distância bem próxima dos 
olhos. Quando mexemos em um 
computador desktop ou notebook a 
distância em relação a tela é muito 
maior. Por isto é necessário que o texto 
esteja em um tamanho confortável em 
relação a esta distância. E isto deve ser 
customizado de acordo com a mídia, 
afinal, esta distância de leitura também 
vai variar em um smartphone, tablet, 
televisão… E todos estes fatores devem 
ser levados em conta. No geral, quanto 
maior a distância do leitor em relação 
ao meio maior deverá ser o tamanho da 
letra. Se estiver na dúvida faça o seguro 
e utilize 16 px. 
A unidade de medida ideal existe 
diversas medidas para texto aceitas 
para tipografia na internet. São elas 
ponto (1/72 de uma polegada), pica (12 
pontos), milímetro, porcentagem, EM e 
pixel. Vou me focar nas duas últimas já 
que são as mais utilizadas para a web. 
Para quem não sabe 1 EM (ou um 
quadratim) é uma medida relativa e 
corresponde ao tamanho do corpo 
quadrado da letra M de uma fonte. Já 
um pixel é uma medida absoluta e 
corresponde ao menor ponto possível 
em uma tela digital (a densidade de 
pixels pode variar de acordo com a 
mídia). 
Usabilidade. Pode ser minoria, mas 
existe sim quem queira alterar o 
tamanho do texto pelo browser. 
Principalmente pessoas com algum tipo 
de deficiência visual. Você não quer 
que o seu layout quebre nesta hora, 
certo? E no caso de zoom? O texto 
fatalmente ficará rasterizado se você 
utilizar qualquer medida absoluta como 
é o caso dos pixels. 
EM é uma unidade de 
medida relativa, ou seja, 
que varia 
proporcionalmente de 
acordo com o contexto. 
Design responsivo. Sempre surge um 
aparelho novo para complicar a vida 
dos devs. Por mais que estejamos 
preparados para smarthphones, tablets 
e computadores, o que fazer quando 
surge algo fora destes padrões? Sair 
por aí editando o código de todos os 
sites que você já desenvolveu? Largar o 
cliente na mão? Ficar caçando break 
points em pixels é um trabalho sem fim 
e desnecessário… utilizar EM é garantir 
que seu texto possuirá boa legibilidade 
independente dos tamanhos de tela. 
Proporção. Existem pessoas que 
dedicam suas vidas inteiras a tipografia 
e não é a toa. É uma ciência complexa e 
não tão subjetiva assim. Principalmente 
quando o assunto é proporção e 
distância, a questão deixa de ser gosto 
pessoal e passa a ser matemática. Por 
isso, mesmo no caso de paddings e 
margens, quando se trata de textos é 
melhor utilizar EM. Isto acontece por 
que 1 EM é exatamente igual ao valor 
quadrado da fonte, ou seja, sua 
margem vai ficar simétrica e 
proporcional. E mesmo que você altere 
a família tipográfica, não será 
necessário também alterar as 
distâncias. 
Uma dica: Esta regrinha é meio 
manjada mas é sempre bom relembrar. 
Você está com preguiça de calcular? 
Finja que EMs são pixels com um ponto 
no meio! Padronize para o CSS a regra { 
font-size: 62.5%; }. Desta maneira 1 EM 
equivalerá a 10 pixels. Com a base 
decimal fica muito mais fácil de realizar 
a conversão. Se você precisar de 12 
pixels, por exemplo, é só colocar 1.2em, 
16 pixels serão 1.6 em etc… 
. tipografia digital uso web 
Largura dos blocos de texto: É 
necessário também um cuidado 
especial com a composição do texto. Se 
o tamanho das linhas for muito largo ou 
muito estreito isto dificulta a leitura e 
cansa o olho mais rápido. De 10 a 15 
palavras por linha é a quantidade ideal. 
Ou cerca de 65 caracteres (incluindo 
espaçamento). 
 
 
Peso: O peso é a grossura dos 
caracteres de um tipo. Este atributo é 
definido pela propriedade font-weight. 
Pode ser normal, bold (negrito), bolder 
(mais negrito) e lighter (mais fino). Ou 
ainda, se estas opções estiverem 
disponíveis na fonte que você escolheu, 
variar entre um valor numérico de 100 
a 900. Sendo a correspondência: 
 
. tipografia digital uso web 
Ritmo Vertical: O ritmo de um texto é 
definido pela hierarquia de tamanho da 
fonte, distancias de margens, 
espaçamento e entrelinhas. O ideal 
aqui é criar um grid horizontal para 
manter o ritmo equilibrado. se 
preocupe com o valor entrelinha (line-
height). Algo como 140% da altura da 
fonte é uma boa medida padrão. 
 
Ligaturas: Ligatura ou ligadura em 
tipografia é quando uma ou mais letras(ou sinais gráficos) são ligadas e passam 
a ser representadas em um único 
caractere. A partir do CSS3 já é possível 
utilizar essa feature para web no caso 
de fontes Open Type. Para isto basta 
avisar o browser que você deseja ativar 
esta opção. 
 
h1 { 
font-feature-settings: 'liga'; 
-webkit-font-feature-settings: 'liga'; 
-moz-font-feature-settings: 'liga'; 
 -o-font-feature-settings: 'liga'; 
} 
 
 
 
 
 
NESSA AULA FALA SOBRE: 
• tipografia digital