SlideShare uma empresa Scribd logo
Porque pensar em fontes?
Muitas vezes consideramos a tipogra a como algo em segundo plano. Pensamos nas cores,
na disposição dos elementos e na hora da fonte só decidimos entre Serifa e Sem Serifa.
Isso é muito contraditório porque a tipogra a é uma conseqüência natural da criatividade
humana, e para nós que trabalhamos com criatividade ela deve ser uma prioridade no
processo da concepção do layout.
A tipogra a está em todos os lugares. Ela está no que compramos, nos livros e revistas,
nas paredes, no chão, em sinais de trânsito, etc. Os tipos nos dizem o que fazer e o que não
fazer. Eles podem ser permanentes, móveis, ajudar-nos a encontrar os caminhos, fazer uma
coisa diferente da outra, mostrar um sentimento, en m, são in nitas as possibilidades.
O uso dos tipos mostra ao leitor tanto de quem originou aquela mensagem, quanto sobre
a mensagem em sí. Um restaurante com um quadro de giz para o menu, mostra que seu
cardápio está em constante mudança oferecendo algo sempre diferente, ou pode mostrar
desleixo e falta de organização da cozinha, dependendo da fonte desenhada.


Tipo x Fonte
Pra começar a falar da complexidade da escolha de um tipo é interessante conhecer a
diferença entre tipo e fonte. Um tipo é o conjunto de letras, números e símbolos com o
mesmo design, enquanto fonte é a forma física que aquele tipo foi construída (ex: escavada
na madeira, feita de massinha). A fonte é a forma de cookie e o tipo é o cookie. Quando
estamos avaliando famílias tipográ cas temos que pensar no processo e no resultado
para escolher uma família tipográ ca que cumpra todas as funções.



Estilos
Muitas vezes uma mesma fonte é usada para um único design. Isso porque essa fonte
permite diferentes estilos que vão dar hierarquia ao texto. É interessante conhecer todos os
estilos pra saber quantas subdivisões poderão ser feitas e qual estilo se adéqua mais a
proposta do texto:

Romano       Tipos originados dos escritos romanos. É o estilo básico da maioria dos textos de apoio.


Itálico Uma versão da fonte manuscrita com uma leve inclinação para a direita. Além de ser
usado para nomes cientí cos e palavras em outra língua, o Itálico é uma boa opção de destaque
para uma palavra sem deixar o texto muito pesado.


Condensado      O texto condensado é o texto romano com menos espaço entre as letras.


Estendido         É uma versão romana com mais espaço entre as letras




                                                                                                    1
Bold    Uma versão com um stroke mais largo. Também é chamado de médium, semi bold,
super e pôster.


Light ou Thin     Uma variação da fonte com menos stroke.


Obliquo Uma versão da fonte original levemente inclinada para a direita.

Anatomia do Caractere
Anatomia pode parecer algo chato e sem utilidade, mas conhecer ela é o que vai fazer a sua
escolha tipográ ca ser a mais adequada para o seu trabalho. São muitos os termos, mas para
que o trabalho seja bem feitos existem alguns fundamentais:




                                                 Ascendente
                                                 Parte das letras minúsculas que se ergue acima da
                                                 linha da mediana.

                                                 Descendente
                                                 Parte das letras minúsculas que passa abaixo da
                                                 linha de base.

                                                 Corpo
                                                 Tamanho da letras. É a soma do ascendente, altura-x,
                                                 descendente e espaço reserva.

                                                 Serifa
                                                 Pequenos segmentos de retas que ornamentam as
                                                 hastes de alguns tipos. Existem diversos formatos de
                                                 serifa.

                                                 Stroke
                                                 É a espessura da linha do tipo.

                                                 Capitular
                                                 Caractere de grandes dimensões , muitas vezes
                                                 ornado, que surge no começo de uma página
                                                 ou parágrafo

                                                 Versalete
                                                 Letra maiúscula com a mesma altura e espessura das
                                                 letras minúsculas.




                                                                                                     2
Altura X
Também chamada de mediana. De ne o tamanho das letras minúsculas. É a distância do pé até
a cabeça da letra “x”. Essa medida in ui diretamente na legibilidade do texto.

Modulação ou inclinação
É a tensão vertical ou oblíqua relacionada com o contraste da fonte. É determinada por um linha
que cruza os lados mais estreitos do caractere. Quando o contraste é nulo, não existe modulação.

Ligatura
Letras combinadas constituindo um único caractere.Só aparecem nas combinações: ff, , , ct.

Contraste
Diferença de espessura entre as hastes de um mesmo caractere. Esse contraste pode ser nulo,
médio ou grande.



Classi cação das fontes
Gótica
Baseada na forma antiga de escrever. O stroke pode ser acompanhado por um o. Em grandes
blocos a leitura é árdua, por isso, seu uso é apenas decorativo. Caso use esse tipo de fonte,
aumente o espaço entre as letras para maior legibilidade.

algerian - abcdefghijklmnopqrstuvxzwy 1234567890.,
Romana
É a fonte baseada na fonte dos escritos romanos. É a mais fácil de ler pois possui ascendentes e
descendentes bem delimitados. O leitor se cansa menos.

Old style: Pequeno contraste, inclinação para a esquerda e serifas irregulares. Essa é a forma
mais legível de todas.

Bembo - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890.,
Transicional: O contraste dessa fonte é médio, ela é pouco inclinada pra esquerda e suas pontas
formarm triângulos.

Baskersville - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy
                     1234567890.,

Moderna: Contraste grande e serifas nas. Esse tipo de fonte não é recomenada para logotipos, pois
ela é de difícil leitura em pequenos tamanhos devido a grande variação do contraste.

Bodoni - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890.,
Egípcia: Serifas quadradas.

Menphis - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy
                  1234567890.,

                                                                                                    3
manuscritas
Por serem de difícil leitura devido a sua inclinação e muitas vezes ornamentos, essas fontes são
usadas para detalhes, como por exemplo, uma assinatura.

Kunstler - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890.,
Fontes grá cas/ Fonte fantasia
Essas fontes são vistas como imagens e ajudam na dramatização do texto. Elas podem ser criadas
para um texto em especial. Muitas vezes são usadas em títulos.

Komika jam - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890.,

Serifas
As fontes serifadas são normalmente usadas em textos corridos. Isso porque o olho humano
não lê as letras, e sim as palavras. Os ascendentes e descendentes serifados ajudam o leitor
a reconhecer a forma da palavra e assim ler o texto mais facilmente. Essas serifas podem ser
arredondadas, suaves, pesadas e duras, nas e decorativas.

Cooper Black - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy
                           1234567890.,



Sem Serifas
As fontes sem serifa são normalmentes utilizadas em cabeçalhos e pequenos textos, mas algumas
são feitas procurando uma melhor leiturabilidade e podem ser usadas em textos corridos. A forma
limpa do tipo dá um ar mais descontraído e jovem ao texto. Existe uma classi cação, também, para
esse tipo de fonte:

Grotesca: Condesada e pesada

Futura - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,
Geométrica: fontes limpas e arredondadas.

Century - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,
Humanísticas: existe um contraste no stroke que dá uma personalidade a fonte.

Optima Lt Std - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,
Arredondadas: normalmente são baseadas em outras fontes. São mais relaxadas e atratativas. O
arredondado cria um espaço melhor para a leitura e dá uma cara amigável ao texto.

Arial rounded - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,


                                                                                                   4
Outras considerações
Numerais: existem duas classi cações para os numerais: Old Style e Alinhado. Old Style são mais difíceis
de tabular pois não são alinhados com a base do texto. Já os Alinhados tem o peso e espaçamento de
caracteres iguais. Isso facilita o uso de numerais em tabelas, por exemplo. Os números alinhados
em um texto podem parecer maiores do que as letras porque são do mesmo tamanho das letras
maiúsculas. Os numerais em versalete são no formato Old Style, o que ajuda a mistura com o texto.
Enquanto os número Old Style são melhores para textos corridos, os Alinhados são muito mais
organizados para um texto apenas numérico.

Amigo 1234567890                       Helvética Thin 1234567890
Caracteres especiais: Para que uma fonte seja totalmente e ciente é importante analisar se ela possui
caracteres especiais como: ℓ ⅓ ∑ # % *@


Escolhendo a Fonte
A fonte escolhida deve ser um convite à leitura, ela deve revelar o teor do texto e esclarecer a
estrutura proposta. A fonte é como uma bela taça de vinho. Ela impressiona em primeiro plano,
mas é transparente e permite o observador apreciar o conteúdo. Para a escolha da fonte, alguns
princípios são básicos:

Antes de escolher a fonte leia o texto. A fonte deve estar de acordo com o seu conteúdo.

Mapeie o texto e conte quantas camadas você vai utilizar.

Pense na relação entre o texto e os outros elementos, como grá cos e imagens.

Honre o caráter do texto. A fonte deve mostrar aquilo que o texto diz.

Dê forma à página e emoldure, honrando cada elementos. Deixe o espaço de respiro e divida as seções.

Dê atenção aos detalhes. Não adianta nada fazer um belíssimo layout e se esquecer dos detalhes
como nota de rodapé e números de página.

Usando apenas uma família
Para usar a mesma família é necessário conhecer os estilos, cores e tamanhos. Com o contraste você
cria uma harmonia. A combinação de dois extremos não é muito agradável, por exemplo, a combinação
de um título Heavy e um texto Thin deixa o texto ser engolido pelo título.

Usando várias famílias
Usar uma mesma família é algo complicado, mas se bem utilizado permite uma maior diversidade e
liberdade. As fontes escolhidas devem ter um fator semelhante, como por exemplo a altura-x, mas
ao mesmo tempo deve ser diferentes para causar uma hierarquia no layout. Alguns designers
recomendam o uso de no máximo 3 famílias. Recomenda-se também buscar fontes de um mesmo
autor para que as fontes se misturem de uma forma mais harmônica.




                                                                                                        5
Legibilidade
A legibilidade é a capacidade do leitor de distinguir os caracteres. Alguns fatores como altura-x, forma,
contraste, peso, tamanho e alinhamento in uem nesse processo. Caracteres com maior espaço interno
e uma boa altura-x (não muito grande, para que os ascendentes e descendentes sejam identi cados)
são mais legíveis. O tamanho da fonte também in ui, não use tamanhos menores que 9 pts. As
fontes sem serifa são melhores para a legibilidade.

Leiturabilidade
A leiturabilidade é a capacidade de entender o que entender o que está sendo escrito. As fontes serifadas
são consideradas melhores para a leiturabilidade, na seguinte ordem: Old face (Caslon), tranzicionais
(Baskerville) e modernas (Bodoni).


Ajustando a fonte ao layout
Alinhamento
Esquerda: É o alinhamento da moda. Tem um caráter menos formal. A primeira e a última linha desse
formato devem ser menores que as outras e nenhuma palavra pequena deve sobrar no m da frase.
Cuidado com as palavras que cam sozinhas em uma linhas (viúvas).

Direita: Normalmente se usa esse alinhamento para criar harmonia com outro elemento do layout.
Essa forma só deve ser usada em pequenos textos porque é extremamente desconfortável.

Centralizado: Alinhamento formal. Utilizado em convites de cerimônia, por exemplo

Justi cado. O alinhamento mais comum em grandes textos. Para deixar as linhas do mesmo comprimento
muitas vezes são criados buracos no texto. Esses buracos prejudicam muito a leitura. Eles podem ser
consertados manualmente. Outra alternativa é usar divisões com o hifén. Dividir as palavras é melhor
que ler o texto com buracos. A quebra da palavra deve ser feita em um ponto que o leitor possa adivinhar
o resto.

Tracking
O tracking é feito em palavras. É na verdade o espaço entre as palavras de uma linha. Em um corpo
grande o tracking deve ser reduzido e em fundo escuros deve ser aumentado. Em algns casos uma
palavra termina com seu ascendente virado para a direita e a próxima começa com o ascendente
virado para a direita, nesse caso o espaço parece menor. o ideal é que o espaço entre as palavras seja
o mesmo do interior da letra “h”

The Old hat
Kerning
As letras tem espaços de nidos por seus criadores, mas ao serem usados em tamanhos maiores ou
em casos especí cos como em Caps, precisam de ajuste no kerning. Não mude o kerning até
que tudo esteja de nido. O lema da tipogra a em relação ao kerning é “close but not touching”, perto, mas
não se tocando. As fontes sem serifa devem ser mais espaçadas, especialmente em tamanhos pequenos.
Algumas combinações pedem um kerning diferente: “LA” pede menor kerning enquanto “HI” pede maior
Kerning. Os numerais precisam de kerning par serem ajustados em uma tabela. A pontuação deve ter um
kerning maior para que ela dê a entonação para a frase toda e não somente para a última palavra.

Nossa, mas que calor!                 Nossa, mas que calor!
                                                                                                            6
Leading (espaçamento)
Retomar a leitura de uma linha para a próxima é um ato difícil e o leading ajuda a controlar essa
situação. Se uma fonte tiver uma altura-x menor, o espaço entre uma linha e outra parece maior e o
espaçamento deixado deve ser menor. Esse é o caso da fonte Bembo ou Calson. Fontes sem serifa
normalmente precisam de um leading maior. O mesmo acontece para fontes Bold ou Heavy.
O espaçamento de ne a cor da textura do texto. O ideal é ser um texto cinza, nem preto nem branco
demais. Uma linha deve conter uma média de 12 palavras, mas para linhas grandes deve ser usado um
espaçamento maior.

Retomar a leitura de uma linha para a próxima é um ato difícil na leitura e o leading ajuda a controlar essa
situação. Se uma fonte tiver uma altura-x menor, o espaço entre uma linha e outra parece maior e o
espaçamento deixado deve ser menor. Esse é o caso da fonte Bembo ou Calson. Fontes sem serifa
normalmente precisam de um leading maior. O mesmo acontece para fontes Bold ou Heavy.
O espaçamento de ne a cor da textura do texto. O ideal é ser um texto cinza, nem preto nem branco demais.
Uma linha deve conter uma média de 12 palavras, mas para linhas grandes deve ser usado um espaçamento
maior.

Retomar a leitura de uma linha para a próxima é um ato difícil na leitura e o leading ajuda a controlar essa
situação. Se uma fonte tiver uma altura-x menor, o espaço entre uma linha e outra parece maior e o
espaçamento deixado deve ser menor. Esse é o caso da fonte Bembo ou Calson. Fontes sem serifa
normalmente precisam de um leading maior. O mesmo acontece para fontes Bold ou Heavy.
O espaçamento de ne a cor da textura do texto. O ideal é ser um texto cinza, nem preto nem branco demais.
Uma linha deve conter uma média de 12 palavras, mas para linhas grandes deve ser usado um espaçamento
maior.

Margens
50% da folha deve ser deixado em branco. A divisão é mais ou menos assim: O cabeçalho deve ser
metade do tamanho do rodapé e os cantos devem ter o tamanho igual. Quanto maior o leading menor
deve ser o espaço da margem. Quanto mais na for a fonte, menor deve ser o espaço da margem
também.


Tipos para web
O tipo para tela é diferente do texto impresso. Os princípios de uma boa tipogra a são aplicados nas
duas mídias, mas devem ser reinterpretados para cada uma delas. A aparência do tipo na Internet não
é xa. Ele vai depender de vários fatores, como o browser, o sistema operacional e as fontes instaladas
pelo usuário. Para que o usuário veja o que você planejou é aconselhável usar Fontes Seguras para
Web. Ao usar essas fontes você vai estar prevenindo um resultado inesperado e indesejado no
seu layout.

Algumas Fontes Seguras:
Sem serifa
Verdana: Considerada a mais legível das cinco opções, essa fonte sem serifa tem uma
altura X grande, o que torna a leitura confortável. O espaço entre as letras é bem aberto
o que deixa a fonte com uma boa leiturabilidade em telas pequenas.

Trebuchet MS: Essa fonte é cara e de boa leiturabilidade mesmo sendo usada em corpos menores.
Ela é um pouco menor que a Verdana permitindo, assim, que um texto maior caixa em um espaço
menor. Seu contorno arrendondado dá um pouco mais de personalidade ao layout.




                                                                                                         7
Arial: Mesmo não sendo desenhada para a web, Arial é uma fonte que funciona nas duas mídias
devido a sua legibilidade. Essa fonte é muito parecida com a Helvética no espaço e tamanho,
porém, seus caracteres tem algumas diferenças anatômicas.

Serifadas
Georgia: Essa fonte desenhada para web tem formas abertas e bastante espaço entre os caracteres.
É uma fonte limpa e fácil de ler se usada em um tamanho reduzido.

Times New Roman: Desenhada para a impressão essa fonte é de difícil leitura na web. Tente a Georgia ao
invés da Times.


Usando a fonte como imagem
Se você quiser usar uma fonte especí ca em algum layout é interessante associar a fonte como uma i
magem. Elas podem ser salvas como GIF, JPEG, ou PNG. Isso só é indicado para títulos e detalhes por
três motivos. O primeiro é que a página ca muito pesada e demora pra loudear, o Segundo é que
mecanismos de busca (Google) não encontram as palavras. O Terceiro é que essas fontes na forma
grá ca são complicadas para editar.


O que fazer e o que não fazer na web
Acrescente um espaço depois da pontuação para permitir uma quebra de linha melhor. Se messes
espaços a web vai ler a frase inteira como uma palavra só.

Escolha a cor do texto e a cor do fundo procurando o contraste que cause maior legibilidade

Veja se o bold e o italic se aparecem diferentes da fonte no seu formato original

Se for converter a fonte para imagem use o menor arquivo possível que permita uma boa de nição.
Não justi que o teto na web. A falta de hifén e a varaiação do tamanho do tipo pode criar rios enormes
no texto.

Não ajuste as linhas de forma manual, como na web a visualização é imprevisível isso pode causar
buracos no layout.

Não Coloque textos em pequenos formatos em fundos escuros. A leitura é extremamente prejudicada.

Não coloque texto em Caps Lock.


Atenção
A pontuação nos caracteres para web é colocada em forma de códigos.

Fontes no Windows aparecem maiores que em Macs.

O ideal é montar linhas com 60 até 70 caracteres.




                                                                                                         8
Algumas fontes úteis
Bodoni - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,

Baskerville - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,

Gill sans - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,

Futura- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,

Univers- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,

Helvética- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,

Perpetua- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,

Garamond - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,

Aaargh- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., (dafont)

Accidental Presidency- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., (da font)

Franklin Gothic Book- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.

Eurostile- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,,

Democrática- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,, (fonte da Dois)


                                                                                                     9
Manual
de tipogra a



eu
tipos.

Mais conteúdo relacionado

Mais procurados (18)

Aula EE - tipografia
Aula EE - tipografiaAula EE - tipografia
Aula EE - tipografia
 
Tipologia
TipologiaTipologia
Tipologia
 
[dig - 2011.1] 09 - tipografia 2
[dig - 2011.1] 09 - tipografia 2[dig - 2011.1] 09 - tipografia 2
[dig - 2011.1] 09 - tipografia 2
 
Aula 4 TIPOLOGIA
Aula 4   TIPOLOGIAAula 4   TIPOLOGIA
Aula 4 TIPOLOGIA
 
Classificacao tipografia
Classificacao tipografiaClassificacao tipografia
Classificacao tipografia
 
Tg Aula3 2008
Tg Aula3 2008Tg Aula3 2008
Tg Aula3 2008
 
Tipografia
TipografiaTipografia
Tipografia
 
tipologiacores
tipologiacorestipologiacores
tipologiacores
 
Anatomia Tipográfica
Anatomia TipográficaAnatomia Tipográfica
Anatomia Tipográfica
 
Tipografia aula
Tipografia aulaTipografia aula
Tipografia aula
 
Tipografia | Aula 01 | Historia e Anatomia tipografica.
Tipografia | Aula 01 | Historia e Anatomia tipografica.Tipografia | Aula 01 | Historia e Anatomia tipografica.
Tipografia | Aula 01 | Historia e Anatomia tipografica.
 
Aula 6 tipologia - aula slideshare 26.04
Aula 6   tipologia - aula slideshare 26.04Aula 6   tipologia - aula slideshare 26.04
Aula 6 tipologia - aula slideshare 26.04
 
TIPOGRAFIA E PUBLICIDADE
TIPOGRAFIA E PUBLICIDADETIPOGRAFIA E PUBLICIDADE
TIPOGRAFIA E PUBLICIDADE
 
2. Aula Tipografia
2. Aula Tipografia2. Aula Tipografia
2. Aula Tipografia
 
Aula04 prod grafica
Aula04 prod graficaAula04 prod grafica
Aula04 prod grafica
 
Guia de tipos
Guia de tiposGuia de tipos
Guia de tipos
 
Tipografia Aula
Tipografia AulaTipografia Aula
Tipografia Aula
 
Tcco6
Tcco6Tcco6
Tcco6
 

Semelhante a Palestra tipografia fernanda mujica

O que significa comunicacao gráfica visual
O que significa comunicacao gráfica visualO que significa comunicacao gráfica visual
O que significa comunicacao gráfica visualAndrea Castro
 
DC - GUIÃO_MÓD5.docx
DC - GUIÃO_MÓD5.docxDC - GUIÃO_MÓD5.docx
DC - GUIÃO_MÓD5.docxFrancisTirso
 
A estrutura dos caracteres
A estrutura dos caracteresA estrutura dos caracteres
A estrutura dos caracteresxtessarix
 
3.comoseconstroiumlogotipo-.pdf
3.comoseconstroiumlogotipo-.pdf3.comoseconstroiumlogotipo-.pdf
3.comoseconstroiumlogotipo-.pdfJaninaSilva2
 
Utilização de Fontes - Apresentações Digitais
Utilização de Fontes - Apresentações DigitaisUtilização de Fontes - Apresentações Digitais
Utilização de Fontes - Apresentações DigitaisGerson Victor
 
Aestruturadoscaracteres
AestruturadoscaracteresAestruturadoscaracteres
Aestruturadoscaracteresxtessarix
 
Aestruturadoscaracteres 120804091602-phpapp02
Aestruturadoscaracteres 120804091602-phpapp02Aestruturadoscaracteres 120804091602-phpapp02
Aestruturadoscaracteres 120804091602-phpapp02xtessarix
 
Tipologia na Produção Gráfica
Tipologia na Produção GráficaTipologia na Produção Gráfica
Tipologia na Produção GráficaRenato Melo
 
textos de apoio_ tipografia.docx
textos de apoio_ tipografia.docxtextos de apoio_ tipografia.docx
textos de apoio_ tipografia.docxFrancisTirso
 
Lm1 t14 tipografia digital parte_1
Lm1 t14 tipografia digital parte_1Lm1 t14 tipografia digital parte_1
Lm1 t14 tipografia digital parte_1Mariovski Sky
 
Lm1 t15 tipografia digital parte_3
Lm1 t15 tipografia digital parte_3Lm1 t15 tipografia digital parte_3
Lm1 t15 tipografia digital parte_3Mariovski Sky
 
Texto, Hipertexto e Hipermédia
Texto, Hipertexto e HipermédiaTexto, Hipertexto e Hipermédia
Texto, Hipertexto e Hipermédiagasparlanca
 

Semelhante a Palestra tipografia fernanda mujica (20)

Tipografia na Web
Tipografia na WebTipografia na Web
Tipografia na Web
 
FONTES_TIPOGRAFIA_IMP.pdf
FONTES_TIPOGRAFIA_IMP.pdfFONTES_TIPOGRAFIA_IMP.pdf
FONTES_TIPOGRAFIA_IMP.pdf
 
Aula 06 textos na web
Aula 06   textos na webAula 06   textos na web
Aula 06 textos na web
 
O que significa comunicacao gráfica visual
O que significa comunicacao gráfica visualO que significa comunicacao gráfica visual
O que significa comunicacao gráfica visual
 
DC - GUIÃO_MÓD5.docx
DC - GUIÃO_MÓD5.docxDC - GUIÃO_MÓD5.docx
DC - GUIÃO_MÓD5.docx
 
Tipografia
TipografiaTipografia
Tipografia
 
A estrutura dos caracteres
A estrutura dos caracteresA estrutura dos caracteres
A estrutura dos caracteres
 
Tipologia
TipologiaTipologia
Tipologia
 
3.comoseconstroiumlogotipo-.pdf
3.comoseconstroiumlogotipo-.pdf3.comoseconstroiumlogotipo-.pdf
3.comoseconstroiumlogotipo-.pdf
 
Como se constroi_um_logotipo
Como se constroi_um_logotipoComo se constroi_um_logotipo
Como se constroi_um_logotipo
 
Utilização de Fontes - Apresentações Digitais
Utilização de Fontes - Apresentações DigitaisUtilização de Fontes - Apresentações Digitais
Utilização de Fontes - Apresentações Digitais
 
Aestruturadoscaracteres
AestruturadoscaracteresAestruturadoscaracteres
Aestruturadoscaracteres
 
Aestruturadoscaracteres 120804091602-phpapp02
Aestruturadoscaracteres 120804091602-phpapp02Aestruturadoscaracteres 120804091602-phpapp02
Aestruturadoscaracteres 120804091602-phpapp02
 
Como se constroi_um_logotipo
Como se constroi_um_logotipoComo se constroi_um_logotipo
Como se constroi_um_logotipo
 
Tipologia na Produção Gráfica
Tipologia na Produção GráficaTipologia na Produção Gráfica
Tipologia na Produção Gráfica
 
textos de apoio_ tipografia.docx
textos de apoio_ tipografia.docxtextos de apoio_ tipografia.docx
textos de apoio_ tipografia.docx
 
Lm1 t14 tipografia digital parte_1
Lm1 t14 tipografia digital parte_1Lm1 t14 tipografia digital parte_1
Lm1 t14 tipografia digital parte_1
 
Lm1 t15 tipografia digital parte_3
Lm1 t15 tipografia digital parte_3Lm1 t15 tipografia digital parte_3
Lm1 t15 tipografia digital parte_3
 
Texto, Hipertexto e Hipermédia
Texto, Hipertexto e HipermédiaTexto, Hipertexto e Hipermédia
Texto, Hipertexto e Hipermédia
 
Tipografia
TipografiaTipografia
Tipografia
 

Mais de Doisnovemeia Publicidade

Agencia doisnovemeia. cliente almanaque de criação. promo brasília df
Agencia doisnovemeia. cliente almanaque de criação. promo brasília dfAgencia doisnovemeia. cliente almanaque de criação. promo brasília df
Agencia doisnovemeia. cliente almanaque de criação. promo brasília dfDoisnovemeia Publicidade
 
Agencia doisnovemeia. cliente almanaque de criação. promo brasília df
Agencia doisnovemeia. cliente almanaque de criação. promo brasília dfAgencia doisnovemeia. cliente almanaque de criação. promo brasília df
Agencia doisnovemeia. cliente almanaque de criação. promo brasília dfDoisnovemeia Publicidade
 

Mais de Doisnovemeia Publicidade (20)

Almanaquedecriaçãopromoçao
AlmanaquedecriaçãopromoçaoAlmanaquedecriaçãopromoçao
Almanaquedecriaçãopromoçao
 
Agencia doisnovemeia. cliente almanaque de criação. promo brasília df
Agencia doisnovemeia. cliente almanaque de criação. promo brasília dfAgencia doisnovemeia. cliente almanaque de criação. promo brasília df
Agencia doisnovemeia. cliente almanaque de criação. promo brasília df
 
Agencia doisnovemeia. cliente almanaque de criação. promo brasília df
Agencia doisnovemeia. cliente almanaque de criação. promo brasília dfAgencia doisnovemeia. cliente almanaque de criação. promo brasília df
Agencia doisnovemeia. cliente almanaque de criação. promo brasília df
 
Mala direta
Mala diretaMala direta
Mala direta
 
7º Almanaque de Criação
7º Almanaque de Criação7º Almanaque de Criação
7º Almanaque de Criação
 
Texto
TextoTexto
Texto
 
Referências
ReferênciasReferências
Referências
 
Conceito, Linha Criativa e Execução
Conceito, Linha Criativa e ExecuçãoConceito, Linha Criativa e Execução
Conceito, Linha Criativa e Execução
 
Apresentação da Criação
Apresentação da CriaçãoApresentação da Criação
Apresentação da Criação
 
Título e Slogan
Título e SloganTítulo e Slogan
Título e Slogan
 
VI Almanaque de Criação
VI Almanaque de CriaçãoVI Almanaque de Criação
VI Almanaque de Criação
 
Palestra Identidade visual
Palestra Identidade visualPalestra Identidade visual
Palestra Identidade visual
 
ARG e Advergame
ARG e AdvergameARG e Advergame
ARG e Advergame
 
Palestra Redação WEB
Palestra Redação WEBPalestra Redação WEB
Palestra Redação WEB
 
Palestra de Cor - Lucas Marques
Palestra de Cor - Lucas MarquesPalestra de Cor - Lucas Marques
Palestra de Cor - Lucas Marques
 
Mercado e Concorrência
Mercado e ConcorrênciaMercado e Concorrência
Mercado e Concorrência
 
Mídias tradicionais
Mídias tradicionaisMídias tradicionais
Mídias tradicionais
 
Público Alvo
Público AlvoPúblico Alvo
Público Alvo
 
Palestra endomarketing
Palestra endomarketingPalestra endomarketing
Palestra endomarketing
 
Palestramktmix
PalestramktmixPalestramktmix
Palestramktmix
 

Palestra tipografia fernanda mujica

  • 1. Porque pensar em fontes? Muitas vezes consideramos a tipogra a como algo em segundo plano. Pensamos nas cores, na disposição dos elementos e na hora da fonte só decidimos entre Serifa e Sem Serifa. Isso é muito contraditório porque a tipogra a é uma conseqüência natural da criatividade humana, e para nós que trabalhamos com criatividade ela deve ser uma prioridade no processo da concepção do layout. A tipogra a está em todos os lugares. Ela está no que compramos, nos livros e revistas, nas paredes, no chão, em sinais de trânsito, etc. Os tipos nos dizem o que fazer e o que não fazer. Eles podem ser permanentes, móveis, ajudar-nos a encontrar os caminhos, fazer uma coisa diferente da outra, mostrar um sentimento, en m, são in nitas as possibilidades. O uso dos tipos mostra ao leitor tanto de quem originou aquela mensagem, quanto sobre a mensagem em sí. Um restaurante com um quadro de giz para o menu, mostra que seu cardápio está em constante mudança oferecendo algo sempre diferente, ou pode mostrar desleixo e falta de organização da cozinha, dependendo da fonte desenhada. Tipo x Fonte Pra começar a falar da complexidade da escolha de um tipo é interessante conhecer a diferença entre tipo e fonte. Um tipo é o conjunto de letras, números e símbolos com o mesmo design, enquanto fonte é a forma física que aquele tipo foi construída (ex: escavada na madeira, feita de massinha). A fonte é a forma de cookie e o tipo é o cookie. Quando estamos avaliando famílias tipográ cas temos que pensar no processo e no resultado para escolher uma família tipográ ca que cumpra todas as funções. Estilos Muitas vezes uma mesma fonte é usada para um único design. Isso porque essa fonte permite diferentes estilos que vão dar hierarquia ao texto. É interessante conhecer todos os estilos pra saber quantas subdivisões poderão ser feitas e qual estilo se adéqua mais a proposta do texto: Romano Tipos originados dos escritos romanos. É o estilo básico da maioria dos textos de apoio. Itálico Uma versão da fonte manuscrita com uma leve inclinação para a direita. Além de ser usado para nomes cientí cos e palavras em outra língua, o Itálico é uma boa opção de destaque para uma palavra sem deixar o texto muito pesado. Condensado O texto condensado é o texto romano com menos espaço entre as letras. Estendido É uma versão romana com mais espaço entre as letras 1
  • 2. Bold Uma versão com um stroke mais largo. Também é chamado de médium, semi bold, super e pôster. Light ou Thin Uma variação da fonte com menos stroke. Obliquo Uma versão da fonte original levemente inclinada para a direita. Anatomia do Caractere Anatomia pode parecer algo chato e sem utilidade, mas conhecer ela é o que vai fazer a sua escolha tipográ ca ser a mais adequada para o seu trabalho. São muitos os termos, mas para que o trabalho seja bem feitos existem alguns fundamentais: Ascendente Parte das letras minúsculas que se ergue acima da linha da mediana. Descendente Parte das letras minúsculas que passa abaixo da linha de base. Corpo Tamanho da letras. É a soma do ascendente, altura-x, descendente e espaço reserva. Serifa Pequenos segmentos de retas que ornamentam as hastes de alguns tipos. Existem diversos formatos de serifa. Stroke É a espessura da linha do tipo. Capitular Caractere de grandes dimensões , muitas vezes ornado, que surge no começo de uma página ou parágrafo Versalete Letra maiúscula com a mesma altura e espessura das letras minúsculas. 2
  • 3. Altura X Também chamada de mediana. De ne o tamanho das letras minúsculas. É a distância do pé até a cabeça da letra “x”. Essa medida in ui diretamente na legibilidade do texto. Modulação ou inclinação É a tensão vertical ou oblíqua relacionada com o contraste da fonte. É determinada por um linha que cruza os lados mais estreitos do caractere. Quando o contraste é nulo, não existe modulação. Ligatura Letras combinadas constituindo um único caractere.Só aparecem nas combinações: ff, , , ct. Contraste Diferença de espessura entre as hastes de um mesmo caractere. Esse contraste pode ser nulo, médio ou grande. Classi cação das fontes Gótica Baseada na forma antiga de escrever. O stroke pode ser acompanhado por um o. Em grandes blocos a leitura é árdua, por isso, seu uso é apenas decorativo. Caso use esse tipo de fonte, aumente o espaço entre as letras para maior legibilidade. algerian - abcdefghijklmnopqrstuvxzwy 1234567890., Romana É a fonte baseada na fonte dos escritos romanos. É a mais fácil de ler pois possui ascendentes e descendentes bem delimitados. O leitor se cansa menos. Old style: Pequeno contraste, inclinação para a esquerda e serifas irregulares. Essa é a forma mais legível de todas. Bembo - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890., Transicional: O contraste dessa fonte é médio, ela é pouco inclinada pra esquerda e suas pontas formarm triângulos. Baskersville - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890., Moderna: Contraste grande e serifas nas. Esse tipo de fonte não é recomenada para logotipos, pois ela é de difícil leitura em pequenos tamanhos devido a grande variação do contraste. Bodoni - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890., Egípcia: Serifas quadradas. Menphis - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890., 3
  • 4. manuscritas Por serem de difícil leitura devido a sua inclinação e muitas vezes ornamentos, essas fontes são usadas para detalhes, como por exemplo, uma assinatura. Kunstler - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890., Fontes grá cas/ Fonte fantasia Essas fontes são vistas como imagens e ajudam na dramatização do texto. Elas podem ser criadas para um texto em especial. Muitas vezes são usadas em títulos. Komika jam - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890., Serifas As fontes serifadas são normalmente usadas em textos corridos. Isso porque o olho humano não lê as letras, e sim as palavras. Os ascendentes e descendentes serifados ajudam o leitor a reconhecer a forma da palavra e assim ler o texto mais facilmente. Essas serifas podem ser arredondadas, suaves, pesadas e duras, nas e decorativas. Cooper Black - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890., Sem Serifas As fontes sem serifa são normalmentes utilizadas em cabeçalhos e pequenos textos, mas algumas são feitas procurando uma melhor leiturabilidade e podem ser usadas em textos corridos. A forma limpa do tipo dá um ar mais descontraído e jovem ao texto. Existe uma classi cação, também, para esse tipo de fonte: Grotesca: Condesada e pesada Futura - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., Geométrica: fontes limpas e arredondadas. Century - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., Humanísticas: existe um contraste no stroke que dá uma personalidade a fonte. Optima Lt Std - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., Arredondadas: normalmente são baseadas em outras fontes. São mais relaxadas e atratativas. O arredondado cria um espaço melhor para a leitura e dá uma cara amigável ao texto. Arial rounded - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., 4
  • 5. Outras considerações Numerais: existem duas classi cações para os numerais: Old Style e Alinhado. Old Style são mais difíceis de tabular pois não são alinhados com a base do texto. Já os Alinhados tem o peso e espaçamento de caracteres iguais. Isso facilita o uso de numerais em tabelas, por exemplo. Os números alinhados em um texto podem parecer maiores do que as letras porque são do mesmo tamanho das letras maiúsculas. Os numerais em versalete são no formato Old Style, o que ajuda a mistura com o texto. Enquanto os número Old Style são melhores para textos corridos, os Alinhados são muito mais organizados para um texto apenas numérico. Amigo 1234567890 Helvética Thin 1234567890 Caracteres especiais: Para que uma fonte seja totalmente e ciente é importante analisar se ela possui caracteres especiais como: ℓ ⅓ ∑ # % *@ Escolhendo a Fonte A fonte escolhida deve ser um convite à leitura, ela deve revelar o teor do texto e esclarecer a estrutura proposta. A fonte é como uma bela taça de vinho. Ela impressiona em primeiro plano, mas é transparente e permite o observador apreciar o conteúdo. Para a escolha da fonte, alguns princípios são básicos: Antes de escolher a fonte leia o texto. A fonte deve estar de acordo com o seu conteúdo. Mapeie o texto e conte quantas camadas você vai utilizar. Pense na relação entre o texto e os outros elementos, como grá cos e imagens. Honre o caráter do texto. A fonte deve mostrar aquilo que o texto diz. Dê forma à página e emoldure, honrando cada elementos. Deixe o espaço de respiro e divida as seções. Dê atenção aos detalhes. Não adianta nada fazer um belíssimo layout e se esquecer dos detalhes como nota de rodapé e números de página. Usando apenas uma família Para usar a mesma família é necessário conhecer os estilos, cores e tamanhos. Com o contraste você cria uma harmonia. A combinação de dois extremos não é muito agradável, por exemplo, a combinação de um título Heavy e um texto Thin deixa o texto ser engolido pelo título. Usando várias famílias Usar uma mesma família é algo complicado, mas se bem utilizado permite uma maior diversidade e liberdade. As fontes escolhidas devem ter um fator semelhante, como por exemplo a altura-x, mas ao mesmo tempo deve ser diferentes para causar uma hierarquia no layout. Alguns designers recomendam o uso de no máximo 3 famílias. Recomenda-se também buscar fontes de um mesmo autor para que as fontes se misturem de uma forma mais harmônica. 5
  • 6. Legibilidade A legibilidade é a capacidade do leitor de distinguir os caracteres. Alguns fatores como altura-x, forma, contraste, peso, tamanho e alinhamento in uem nesse processo. Caracteres com maior espaço interno e uma boa altura-x (não muito grande, para que os ascendentes e descendentes sejam identi cados) são mais legíveis. O tamanho da fonte também in ui, não use tamanhos menores que 9 pts. As fontes sem serifa são melhores para a legibilidade. Leiturabilidade A leiturabilidade é a capacidade de entender o que entender o que está sendo escrito. As fontes serifadas são consideradas melhores para a leiturabilidade, na seguinte ordem: Old face (Caslon), tranzicionais (Baskerville) e modernas (Bodoni). Ajustando a fonte ao layout Alinhamento Esquerda: É o alinhamento da moda. Tem um caráter menos formal. A primeira e a última linha desse formato devem ser menores que as outras e nenhuma palavra pequena deve sobrar no m da frase. Cuidado com as palavras que cam sozinhas em uma linhas (viúvas). Direita: Normalmente se usa esse alinhamento para criar harmonia com outro elemento do layout. Essa forma só deve ser usada em pequenos textos porque é extremamente desconfortável. Centralizado: Alinhamento formal. Utilizado em convites de cerimônia, por exemplo Justi cado. O alinhamento mais comum em grandes textos. Para deixar as linhas do mesmo comprimento muitas vezes são criados buracos no texto. Esses buracos prejudicam muito a leitura. Eles podem ser consertados manualmente. Outra alternativa é usar divisões com o hifén. Dividir as palavras é melhor que ler o texto com buracos. A quebra da palavra deve ser feita em um ponto que o leitor possa adivinhar o resto. Tracking O tracking é feito em palavras. É na verdade o espaço entre as palavras de uma linha. Em um corpo grande o tracking deve ser reduzido e em fundo escuros deve ser aumentado. Em algns casos uma palavra termina com seu ascendente virado para a direita e a próxima começa com o ascendente virado para a direita, nesse caso o espaço parece menor. o ideal é que o espaço entre as palavras seja o mesmo do interior da letra “h” The Old hat Kerning As letras tem espaços de nidos por seus criadores, mas ao serem usados em tamanhos maiores ou em casos especí cos como em Caps, precisam de ajuste no kerning. Não mude o kerning até que tudo esteja de nido. O lema da tipogra a em relação ao kerning é “close but not touching”, perto, mas não se tocando. As fontes sem serifa devem ser mais espaçadas, especialmente em tamanhos pequenos. Algumas combinações pedem um kerning diferente: “LA” pede menor kerning enquanto “HI” pede maior Kerning. Os numerais precisam de kerning par serem ajustados em uma tabela. A pontuação deve ter um kerning maior para que ela dê a entonação para a frase toda e não somente para a última palavra. Nossa, mas que calor! Nossa, mas que calor! 6
  • 7. Leading (espaçamento) Retomar a leitura de uma linha para a próxima é um ato difícil e o leading ajuda a controlar essa situação. Se uma fonte tiver uma altura-x menor, o espaço entre uma linha e outra parece maior e o espaçamento deixado deve ser menor. Esse é o caso da fonte Bembo ou Calson. Fontes sem serifa normalmente precisam de um leading maior. O mesmo acontece para fontes Bold ou Heavy. O espaçamento de ne a cor da textura do texto. O ideal é ser um texto cinza, nem preto nem branco demais. Uma linha deve conter uma média de 12 palavras, mas para linhas grandes deve ser usado um espaçamento maior. Retomar a leitura de uma linha para a próxima é um ato difícil na leitura e o leading ajuda a controlar essa situação. Se uma fonte tiver uma altura-x menor, o espaço entre uma linha e outra parece maior e o espaçamento deixado deve ser menor. Esse é o caso da fonte Bembo ou Calson. Fontes sem serifa normalmente precisam de um leading maior. O mesmo acontece para fontes Bold ou Heavy. O espaçamento de ne a cor da textura do texto. O ideal é ser um texto cinza, nem preto nem branco demais. Uma linha deve conter uma média de 12 palavras, mas para linhas grandes deve ser usado um espaçamento maior. Retomar a leitura de uma linha para a próxima é um ato difícil na leitura e o leading ajuda a controlar essa situação. Se uma fonte tiver uma altura-x menor, o espaço entre uma linha e outra parece maior e o espaçamento deixado deve ser menor. Esse é o caso da fonte Bembo ou Calson. Fontes sem serifa normalmente precisam de um leading maior. O mesmo acontece para fontes Bold ou Heavy. O espaçamento de ne a cor da textura do texto. O ideal é ser um texto cinza, nem preto nem branco demais. Uma linha deve conter uma média de 12 palavras, mas para linhas grandes deve ser usado um espaçamento maior. Margens 50% da folha deve ser deixado em branco. A divisão é mais ou menos assim: O cabeçalho deve ser metade do tamanho do rodapé e os cantos devem ter o tamanho igual. Quanto maior o leading menor deve ser o espaço da margem. Quanto mais na for a fonte, menor deve ser o espaço da margem também. Tipos para web O tipo para tela é diferente do texto impresso. Os princípios de uma boa tipogra a são aplicados nas duas mídias, mas devem ser reinterpretados para cada uma delas. A aparência do tipo na Internet não é xa. Ele vai depender de vários fatores, como o browser, o sistema operacional e as fontes instaladas pelo usuário. Para que o usuário veja o que você planejou é aconselhável usar Fontes Seguras para Web. Ao usar essas fontes você vai estar prevenindo um resultado inesperado e indesejado no seu layout. Algumas Fontes Seguras: Sem serifa Verdana: Considerada a mais legível das cinco opções, essa fonte sem serifa tem uma altura X grande, o que torna a leitura confortável. O espaço entre as letras é bem aberto o que deixa a fonte com uma boa leiturabilidade em telas pequenas. Trebuchet MS: Essa fonte é cara e de boa leiturabilidade mesmo sendo usada em corpos menores. Ela é um pouco menor que a Verdana permitindo, assim, que um texto maior caixa em um espaço menor. Seu contorno arrendondado dá um pouco mais de personalidade ao layout. 7
  • 8. Arial: Mesmo não sendo desenhada para a web, Arial é uma fonte que funciona nas duas mídias devido a sua legibilidade. Essa fonte é muito parecida com a Helvética no espaço e tamanho, porém, seus caracteres tem algumas diferenças anatômicas. Serifadas Georgia: Essa fonte desenhada para web tem formas abertas e bastante espaço entre os caracteres. É uma fonte limpa e fácil de ler se usada em um tamanho reduzido. Times New Roman: Desenhada para a impressão essa fonte é de difícil leitura na web. Tente a Georgia ao invés da Times. Usando a fonte como imagem Se você quiser usar uma fonte especí ca em algum layout é interessante associar a fonte como uma i magem. Elas podem ser salvas como GIF, JPEG, ou PNG. Isso só é indicado para títulos e detalhes por três motivos. O primeiro é que a página ca muito pesada e demora pra loudear, o Segundo é que mecanismos de busca (Google) não encontram as palavras. O Terceiro é que essas fontes na forma grá ca são complicadas para editar. O que fazer e o que não fazer na web Acrescente um espaço depois da pontuação para permitir uma quebra de linha melhor. Se messes espaços a web vai ler a frase inteira como uma palavra só. Escolha a cor do texto e a cor do fundo procurando o contraste que cause maior legibilidade Veja se o bold e o italic se aparecem diferentes da fonte no seu formato original Se for converter a fonte para imagem use o menor arquivo possível que permita uma boa de nição. Não justi que o teto na web. A falta de hifén e a varaiação do tamanho do tipo pode criar rios enormes no texto. Não ajuste as linhas de forma manual, como na web a visualização é imprevisível isso pode causar buracos no layout. Não Coloque textos em pequenos formatos em fundos escuros. A leitura é extremamente prejudicada. Não coloque texto em Caps Lock. Atenção A pontuação nos caracteres para web é colocada em forma de códigos. Fontes no Windows aparecem maiores que em Macs. O ideal é montar linhas com 60 até 70 caracteres. 8
  • 9. Algumas fontes úteis Bodoni - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., Baskerville - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., Gill sans - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., Futura- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., Univers- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., Helvética- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., Perpetua- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., Garamond - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., Aaargh- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., (dafont) Accidental Presidency- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890., (da font) Franklin Gothic Book- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890. Eurostile- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,, Democrática- ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy1234567890.,, (fonte da Dois) 9