Guia sobre Tipografia [Parte 02] – Escolhendo a fonte certa

Aprenda a como escolher a tipografia certa para o seu projeto e alcance o seu objetivo de comunicação

tipografia

Eae. Td Bele?

Hoje continuaremos com a série sobre tipografia.

Na  primeira parte da série  (se  você  ainda não leu,  clique AQUI para ler) vimos sobre a história e a anatomia das letras.

Nesta segunda parte continuaremos a falar sobre tipografia. Veremos as suas classificações tipográfica, os estilos e entraremos na composição tipográfica.

Estamos evoluindo(não é, Galucho?) e até o final da série iremos saber como escolher nossas fontes da melhor maneira. Portanto, vamos continuar destrinchar a tipografia.

Preparado? Então, vamos lá!

O que você verá nesse artigo?

Quer aprender mais sobre tipografia? Clique aqui e assista uma aula.

Aew! Falta pouco! Agora é só preencher este formulário e clicar no botão abaixo para ter acesso ao seu vídeo



Classificação da Tipografia

Essa parte é um pouco complexa. Existiram várias classificações ao longo do tempo para as famílias. Citarei algumas como exemplo:

  • O Sistema de Francis Thibaudeau (uma das mais usadas por aí);
  • A DIN (Deutsches Für Normung);
  • Classificação Europa;
  • Maximilian Vox;
  • Robert Bringhurst;
  • Maximilian Vox e, derivada dela, a Vox/ATYPI (Association Typographique Internationale);
  • British Standards;
  • Linotype ;
  • Lucy Niemeyer.

(Ufa!)

Não quero julgar nenhuma nem outra, até porque não tenho capacidade para tal, mas todas as classificações, pelo que puder ver,  pecam em algum quesito.

Devido a isso vou usar uma classificação, que obtive no espaço acadêmico através do prof Cesar Benatti, e que usa a presença ou não de serifas (senão lembra o que é serifa veja o que é clicando AQUI) como característica determinante para esse processo de classificação.

Com serifa

Humanistas

Simulam a caligrafia clássica feita a mão e  fazem parte dos primeiros tipos de metal produzidos na Itália e França entre os séculos XV e XVI.

anatomia_44

Transicionais

Possuem serifas mais finas e planas com acabamento agudo.
Seu eixo vertical é levemente inclinado.

anatomia_45

Modernas

Esse estilo possue serifas retas e um alto e contraste na espessuras das hastes.
Eixo na vertical.

anatomia_46

Mecânicas

Traço e serifas retangulares. São do século XIX  e vieram para uso em propagandas.

anatomia_47

Sem Serifa

Grotesco

Uma variação das letras mecânicas sem as serifa.
Oriundas do final do séc XIX.

anatomia_48

Gothic

Possuem uma variação espessura dos seus  traços.
É uma variação das grotescas gravadas nos EUA no final do séc XIX .

anatomia_49

Humanistas

Poussem leve variação no traço e resquícios de traços caligráficos.
Tem como origem a estrutura das letras serifadas.

anatomia_50

Geométrico

Usam formas geométricas básicas para a suas estruturação.

anatomia_51

Neo Grotesco

É variação das grotesca que surgiu na década de 1950.

anatomia_52

Outros Estilos

Cursiva

São tipos que usam como referência a escrita manual, logo procuram reproduzir as características da escrita manual. Costumeiramente, possuem uma legibilidade complicada e sua utilização deve ser feita com cautela.

anatomia_55

Fantasia

São tipos diversos, com diversas inspirações, padrões e características.

O objetivo desses tipos é um passar um forte impacto visual. São bem irregulares e vão de “8 à 80”: algumas possuem boa legibilidade enquanto que outras quase nenhuma legibilidade.

Normalmente funcionam melhor só em tamanhos grandes.

anatomia_56

Gótica

É um tipo  com características dos manuscritos antigos. Procuram reproduzir a escrita dos monges copistas da idade média (anterior à invenção da tipografia). Normalmente são mais densas e com baixa legibilidade.

anatomia_53

Históricos

São tipos inspirados nas escritas greco romanas.
Também possuem muitas irregularidades e pouca legibilidade.

anatomia_57

Estilos dos Tipos

Cor (tonalidade)

Diz respeito a espessura (ou o peso) dos tipos: light,, thin, medium,roman, bold, black, etc.

Helvetica Neue

Largura

Se refere à relação entre a base e altura da letra. Existem inúmeras famílias que já vem com essas variações. Evite”condensar” ou “expandir” um tipo por conta própria. Isso  irá deformá-lo e prejudicará a sua estrutura.

anatomia_37

Postura

Trata-se da inclinação do eixo central das letras. A postura básica dos caracteres é regular (como eixo central vertical).

Os caracteres regulares “inclinados” recebem o nome de “oblíquos”. O termo itálico é aplicado erradamente. Itálico diz respeito aos tipos cursivos.

anatomia_39

E os caracteres inclinados (cursivos) recebem o nome de “itálico” ou “grifo”, em referência ao tipógrafo italiano do séc. XV, Francesco Griffo, percursor com o trabalho de tipos inclinados.

anatomia_41

E agora veremos um pouco sobre composição tipográfica, mais especificamente sobre os alinhamentos e espaçamentos. Vamos conferir?

Kerning ,Tracking e Leading

Kern

Trata-se do espaçamento entre os caracteres. Existem partes das letras que ultrapassam o bloco para permitir um encaixe com outras letras, para que não fiquem muito afastas e assim prejudicar o visual.

anatomia_27_02

 Kerning

É o processo de ajustar os espaços entre pares de caracteres, ou seja, somente em  algumas letras.

O Kerning da fonte é definido pelo  type designer  quando está criando-a. Hoje em dia  os softwares de computador também oferecem um opção de  Kerning (óptico) definido para amenizar defeitos de fontes mal produzidas. Porém, quando esses kernings não atendem nossas necessidades, é necessário ajustá-lo manualmente.

anatomia_27_04

Tracking (espaçamento)

É o espaçamento entre letras e entre as palavras de todo um bloco de texto. Isso significa que alteramos o espaçamento de todo o conjunto de caracteres (palavra, frase, parágrafo) por inteiro.

anatomia_28

[quote] O espaçamento entre as palavras deve ser consistente, para se evitar grandes espaços em brancos ou encavalamentos no texto, prejudicando o a leitura. [quote]

Leading (entrelinhas)

A entrelinha é o espaço entre duas linhas de texto.  A medida é a distância da linha de base de uma linha tipográfica para outra. Normalmente o leading automatizado está cerca de 20% a mais que o tamanho do tipo utilizado. Ex: tamanho 10pt leading 12pt.

Quanto mais aumentamos a entrelinha, mais aberto e leve se torna o bloco de texto e  quanto mais diminuímos a entrelinha (entrelinha negativa) mais apertado se torna o texto.

anatomia_30

Deve-se  usar esse recurso com parcimônia. Devemos tomar cuidado para não aumentar muito, transformando os textos praticamente em “tópicos” ou estreitar demais fazendo com que as linhas das ascendentes e descentes se colidam tornando o texto um emaranhado de letras inelegíveis. Por via de regra, sempre os espaços das entre linhas serão maiores que o espaço entre as letras e o tamanho do tipo.

Alinhamento

Nada mais é que o posicionamento do texto em relação ao espaço e aos elementos contidos nele (no espaço).

Os tipos de alinhamentos básicos você já deve estar cansado de saber… Mas vamos recapitular: à esquerda, à direita, centralizado e justificado.

Cada um deles possui suas peculiaridades e suas vantagens e desvantagens, e para chegarmos ao um bom resultado devemos saber como usá-los.

À esquerda:

Nesse tipo de alinhamento o texto segue o nosso fluxo (no ocidente, da esquerda para a direita). As linhas dos textos tem diferentes tamanhos e são e irregulares na sua margem, ou seja, a direita.

anatomia_32

À direita:

Nesse tipo de alinhamento os textos são alinhados à direita e suas linhas tem diferentes tamanhos, sendo irregulares nas margens, ou seja, a esquerda. Isso acaba dificultando a legibilidade, pois força o olhar (estou falando no nosso caso ocidental, ok?) a “caçar” uma posição inicial.

Por isso ele é pouco usado em textos longos e é mais usual em trechos, notas, citações, etc.

anatomia_33

Esses dois alinhamentos, à esquerda e à direita, normalmente exigem uma atenção maior do designer para conseguir ajustar de forma harmoniosa o desalinhamento das margens.  No caso do alinhamento à esquerda a margem direita e no alinhamento à direita a margem esquerda, sem utilizar muitos hifens e sem deixar aqueles “bicos de papagaios” no bloco de texto.

Centralizado

No centralizado as linhas de textos têm tamanho irregulares em ambos os lados.

É muito usado para se enfatizar uma frase, em títulos, convites de casamento, certificados, epitáfios, etc.  Normalmente usa-se esse alinhamento quando se quer transmitir certa formalidade e elegância.

Como todos os alinhamentos, o centralizado tem que ser usado com sabedoria, pois o texto pode ficar tedioso para o leitor.

anatomia_35

Justificado

Ele é o mais formal de todos. Suas linhas têm o mesmo comprimento, portanto cria-se margens “duras” ( ou uniformes) em ambos os lados. É muito utilizado em textos longos como jornais e livros. Quando bem aplicado o justificado aproveita o espaço de forma eficiente. Se mal aplicado pode produzir grandes espaços em brancos (“rios”) quando o tamanho do tipo é maior em relação ao tamanho da linha.

Utilizar a hifenização pode ajuda a quebrar palavras muito longas e assim manter o espaçamento harmonioso. Também pode-se fazer o uso do tracking para ajustar as linhas.

anatomia_34

Outro ponto relevante que deve ser levado em conta é o tamanho das linhas. Ela serve para guiar o olho a seguir o texto, por isso seu tamanho deve ser harmonioso para que a leitura não se torne cansativa.

Uma boa tática a se usar na estruturação dos textos é usar o  mínimo de sete palavras e no máximo dezenove palavras por linha.  Claro que isso varia de acordo com as características da tipografia, do suporte e de cada projeto, logo não deve ser encarado como um dogma ( que você vai para inferno caso não utilize) , mas com certeza uma média entre sete e quatorze palavras por linha é bem útil na hora que você pensar na diagramação dos seus textos.

Assimétrico

Normalmente são usados quando quer transmitir a  mensagem através da forma do texto. É uma composição sem padrão nas linhas.assimetrico

Capitular

É o ênfase que se dá a letra inicial  no começo de um  capítulo aumentando o tamanho do  corpo dessa letra, a inicial , no parágrafo.

capitular

Indentação ou Entrada

Se refere ao espaço em branco, um “avanço do texto”, no início do parágrafo. Normalmente a  indentação  é à esquerda e na primeira linha do parágrafo.

indentacao

Recuo

É praticamente o  inverso da  indentação. A primeira linha fica alinhada à esquerda enquanto que as demais  linhas são alinhadas um pouco à direita.

recuo

E chegamos ao fim da segunda parte!

No próximo artigo irei concluir essa série de artigos sobre tipografia.

Agora já temos uma boa base sobre tipografia, mas veremos um pouco mais sobre composição tipográfica para saber como usar os tipos da melhor forma nos nosso projetos.

Fique ligado que em breve lanço o último artigo dessa série.

E você gosta de tipografia?  Está gostando da série?  Tem alguma coisa a acrescentar?

Você pode deixar seu comentário abaixo. :)

Até mais.

Forte Abraço.

Confira a primeira parte aqui  → http://chiefofdesign.com.br/guia-tipografia-parte-01/

Confira a terceira parte aqui  →http://chiefofdesign.com.br/guia-tipografia-parte-03/

Referências:

Livro Elementos Do Estilo Tipográfico – Robert Bringhurst

Livro Pensar com Tipos – Ellen lupton

http://www.woww.com.br/2008/08/espacejamento-entrelinhamento-e.html

http://tudibao.com.br/2010/07/o-que-e-kerning-e-traking-em-um-texto.html

http://www.academia.edu/557631/Um_panorama_das_classificacoes
_tipograficas_An_overview_of_typeface_classifications

David Arty

Olá. Sou David Arty, fundador do blog Chief of Design.
Sou natural de São Paulo, Brasil. Trabalho com design, principalmente com design para web, desde 2009. Procuro transformar ideias loucas e complexas em peças simples, atrativas e funcionais.

  • Pingback: Guia sobre Tipografia (parte 03)– Escolhendo a fonte certa()

  • Bruno Soares

    Olá David

    Mais uma vez…um ótimo post pra ajudar a galera e amim também a conhecer mais sobre fontes.Muito bem explicado está de parabéns.

    Grande abraço

    Bruno

    • Olá Bruno.

      Obrigado pelos elogios!

      Abrs :)

  • Juliana Santos

    Já to achando que tu é um guru do design, hehe. Parabéns pelos textos, são ótimos!

    • Olá Juliana.

      Que isso… kkkkkkkk.
      Por enquanto eu sou só um “Chefe” hehehe :P

      Obrigado pelos elogios.

      Abraços!!

      • Juliana Santos

        hahaha, okok “chefe” já está de bom tamanho :D
        mas nada que muito estudo não resolva, né? tenho certeza que tu se dedicou muito para saber tudo que ensina e olha.. tá “tri legal” (como dizem aqui no RS) hehe.

        • Eu estudei e estudo. E sempre que vou postar algum artigo eu pesquiso e estudo bastante também.

          E isso é uma coisa que nunca vai terminar.
          Sempre tem coisas novas.

          Que ótimo que acha tri legal. kkkkkk.
          Espero continuar assim :)

          Abrs

  • Rodrigo Montorso

    muito muito bom!!! parabens

  • André Costa

    Muito bom. Está de parabéns, tem me ajudado muito nas minhas composições tipográficas. #Euamotipografia

    • Olá André!

      Quem não ama tipografia, né? :P

      Valeu!

      Até mais!

      Forte abraço!

  • Ivan de Sousa

    Muito obrigado mano ajudou dimais pois um designer que não entende de tipografia sofre muito.

    • Fala Ivan!

      Verdade. Tipografia é matéria básica e essencial para qualquer Designer.

      Valeu pelo comentário!

      Forte abraço!

  • Alexandre Corre Corre

    Tenho dificuldade com o Kerning e o Tracking, tudo bem que o kerning é para os pares de letras e o tracking para os ‘blocos’ ‘palavras’, mas o tracking apertado tem um ‘kerning apertado’, entre os pares constituintes do bloco ou da palavra, logo, se o tracking se refere aos blocos, o tracking não deveria ser o espaço entre os blocos ‘palavras’? Isso sempre me deixa confuso…..

    • Olá Alexandre.

      Eles tem relação sim entre si.

      No inicio do artigo tem um botão verde. clica nele e você terá acesso a uma aula que criei sobre tipografia. Nessa aula usei o Indesign para mostrar alguns fundamentos e inclusive falei do Kerning e Tracking.

      Talvez vendo você entenda melhor. Qualquer coisa estamos aí! :D

      Abraço!

  • Marcelo Dantas

    Muito bom kra, próximo semestre irei apresentar meu tcc e é uma tipografia que criei, tenho lido muito sobre o assunto. Parabéns

    • Olá Marcelo.

      Muito obrigado!

      Espero que ajude no seu tcc e que tire 10 :D

      Abraço!

  • Caio Rossini

    Muito daora esse guia, bem completo. Uma pergunta, eu aprendi que em textos alinhados a esquerda e centralizados e proibido o uso de hifienização, ai no caso sua imagem de exemplo tem, já ouviu sobre isso? Parabéns pelo guia

    • Olá Caio.

      Não existe nada proibido e nada liberado como uma lei de estado. Mas sobre isso realmente textos centralizados devem evitar hifenização. Já os alinhados a esquerda depende do projeto, da mídia e etc.

      Muito obrigado pelo comentário!

      Forte abraço.