Palestra tipografia fernanda mujica

10
Porque pensar em fontes? Tipo x Fonte Estilos Muitas vezes consideramos a tipografia 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 tipografia é 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 tipografia 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, enfim, são infinitas 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. 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áficas temos que pensar no processo e no resultado para escolher uma família tipográfica que cumpra todas as funções. 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íficos 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

Transcript of Palestra tipografia fernanda mujica

Page 1: Palestra tipografia   fernanda mujica

Porque pensar em fontes?

Tipo x Fonte

Estilos

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.

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.

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

Page 2: Palestra tipografia   fernanda mujica

Anatomia do Caractere

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 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:

AscendenteParte das letras minúsculas que se ergue acima dalinha da mediana.

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

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

SerifaPequenos segmentos de retas que ornamentam ashastes de alguns tipos. Existem diversos formatos deserifa.

StrokeÉ a espessura da linha do tipo.

CapitularCaractere de grandes dimensões , muitas vezes ornado, que surge no começo de uma páginaou parágrafo

VersaleteLetra maiúscula com a mesma altura e espessura dasletras minúsculas.

2

Page 3: Palestra tipografia   fernanda mujica

Classi�cação das fontes

Altura XTambé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 linhaque cruza os lados mais estreitos do caractere. Quando o contraste é nulo, não existe modulação.

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

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

GóticaBaseada na forma antiga de escrever. O stroke pode ser acompanhado por um �o. Em grandesblocos 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 formamais legível de todas.

Bembo - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890.,

Transicional: O contraste dessa fonte é médio, ela é pouco inclinada pra esquerda e suas pontasformarm triângulos.

Baskersville - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890.,

Moderna: Contraste grande e serifas �nas. Esse tipo de fonte não é recomenada para logotipos, poisela é 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

Page 4: Palestra tipografia   fernanda mujica

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

Kunstler - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890.,

Fontes grá�cas/ Fonte fantasiaEssas fontes são vistas como imagens e ajudam na dramatização do texto. Elas podem ser criadaspara um texto em especial. Muitas vezes são usadas em títulos.

Komika jam - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890.,

SerifasAs fontes serifadas são normalmente usadas em textos corridos. Isso porque o olho humanonão lê as letras, e sim as palavras. Os ascendentes e descendentes serifados ajudam o leitora 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 SerifasAs 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 formalimpa do tipo dá um ar mais descontraído e jovem ao texto. Existe uma classi�cação, também, paraesse 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

Page 5: Palestra tipografia   fernanda mujica

Outras considerações

Escolhendo a FonteA 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íliaPara 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çãode um título Heavy e um texto Thin deixa o texto ser engolido pelo título.

Usando várias famíliasUsar 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, masao mesmo tempo deve ser diferentes para causar uma hierarquia no layout. Alguns designersrecomendam 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.

Numerais: existem duas classi�cações para os numerais: Old Style e Alinhado. Old Style são mais difíceisde 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 alinhadosem 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 possuicaracteres especiais como: ℓ № ⅓ � ∑ # % *@

5

Page 6: Palestra tipografia   fernanda mujica

GóticaBaseada na forma antiga de escrever. O stroke pode ser acompanhado por um �o. Em grandesblocos 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 formamais legível de todas.

Bembo - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890.,

Transicional: O contraste dessa fonte é médio, ela é pouco inclinada pra esquerda e suas pontasformarm triângulos.

Baskersville - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890.,

Moderna: Contraste grande e serifas �nas. Esse tipo de fonte não é recomenada para logotipos, poisela é 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.,

Ajustando a fonte ao layout

LegibilidadeA 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 internoe 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. Asfontes sem serifa são melhores para a legibilidade.

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

AlinhamentoEsquerda: É 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 comprimentomuitas 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 é melhorque ler o texto com buracos. A quebra da palavra deve ser feita em um ponto que o leitor possa adivinharo resto.

TrackingO 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 ascendentevirado para a direita, nesse caso o espaço parece menor. o ideal é que o espaço entre as palavras sejao mesmo do interior da letra “h”

The Old hat

KerningAs letras tem espaços de�nidos por seus criadores, mas ao serem usados em tamanhos maiores ouem 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, masnã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 maiorKerning. Os numerais precisam de kerning par serem ajustados em uma tabela. A pontuação deve ter umkerning 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

Page 7: Palestra tipografia   fernanda mujica

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

Kunstler - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890.,

Fontes grá�cas/ Fonte fantasiaEssas fontes são vistas como imagens e ajudam na dramatização do texto. Elas podem ser criadaspara um texto em especial. Muitas vezes são usadas em títulos.

Komika jam - ABCDEFGHIJKLMNOPQRSTUVXZWY abcdefghijklmnopqrstuvxzwy 1234567890.,

SerifasAs fontes serifadas são normalmente usadas em textos corridos. Isso porque o olho humanonão lê as letras, e sim as palavras. Os ascendentes e descendentes serifados ajudam o leitora 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 SerifasAs 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 formalimpa do tipo dá um ar mais descontraído e jovem ao texto. Existe uma classi�cação, também, paraesse 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.,

Leading (espaçamento)Retomar a leitura de uma linha para a próxima é um ato difícil e o leading ajuda a controlar essasituaçã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 essasituaçã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çamentomaior.

Margens50% 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 webO 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

Page 8: Palestra tipografia   fernanda mujica

Escolhendo a FonteA 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íliaPara 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çãode um título Heavy e um texto Thin deixa o texto ser engolido pelo título.

Usando várias famíliasUsar 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, masao mesmo tempo deve ser diferentes para causar uma hierarquia no layout. Alguns designersrecomendam 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.

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 imagemSe você quiser usar uma fonte especí�ca em algum layout é interessante associar a fonte como uma imagem. 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 webAcrescente 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 causarburacos no layout.

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

Não coloque texto em Caps Lock.

AtençãoA 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

Page 9: Palestra tipografia   fernanda mujica

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

Page 10: Palestra tipografia   fernanda mujica

Manual de tipogra�a

eutipos.