Palestra tipografia fernanda mujica

4,339 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,339
On SlideShare
0
From Embeds
0
Number of Embeds
1,567
Actions
Shares
0
Downloads
77
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Palestra tipografia fernanda mujica

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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
  10. 10. Manual de tipogra a eu tipos.

×