Tipografia: O Guia Completo + Infográfico Font Paring

o-que-e-tipografia-

Começamos aqui no blog uma nova serie, que busca explorar os conceitos de Design e o primeiro artigo é sobre um dos nossos temas favoritos: Tipografia.

Os aspectos básicos que um bom designer deve conhecer, seja ele de qualquer área.
Tipografia, Diagramação, Teoria das Cores e muito mais.
Não deixe de nós seguir nas redes sociais, e não perca nenhuma postagem.

Antes de prosseguir, caso tenha dúvida veja o que vai ver por aqui. 🙂

O Que Você Vai Ver Neste Artigo

  • O que é Tipografia
  • A importância da Tipografia
  • A Prensa da Guttenberg
  • Tipografia no Design Gráfico
  • Small Cap’s
  • Kerning
  • Peso
  • Ligaturas
  • Serifas
  • Fontes Serifadas
  • Fontes Sem Serifa
  • Tipografia: Fontes Sem Serifa x Fontes Serifadas(Sans Serif)
  • Moderno X Antigo (Vintage, Retrô, Histórico)
  • Combinações Tipográficas ou Font Pairing
  • Combinações Tipográficas: 5 Combinações de Fontes para Você usar no seu Próximo Design
  • Infográfico para combinações de fontes do Google Fonts.
  • Bônus Especial 

O que é Tipografia?

A tipografia (do gregos typos — “forma” — e graphein — “escrita”) é a arte e o processo de criação na composição de um texto, física ou digitalmente.
Ela é a arte de desenhar ou fazer uso de recursos tipógrafos.
No design gráfico é utilizada na composição de revistas, jornais e panfletos.
Os primeiros registros tipográficos foram criados pelos chineses, mas tomarão notoriedade após Johannes Gutenberg e sua máquina tipógrafa.
Hoje a tipografia está em destaque, seja como na nova seria da Netflix Abstract: The Art Of Design. que tem um episódio dedicado a ela.

Confusões envolvendo tipografia como no Oscar ou em rebranding’s de marcas, circulam pela internet.

A Importância da Tipografia

Os Primeiros registros escritos vem ainda dos homens das cavernas com desenhos feitos com paus e pedras, ela é um dos fundamentos da comunicação humana.

Assim eram montadas as palavras e sentenças que expressavam os seus sentimentos ou cotidiano.

Esses desenhos feitos com equipamentos rústicos eram chamados de pictografia.

A sua importância durante a história só vem crescendo, com o aparecimento da máquina de Johannes Gutenberg , eu falei um pouco dela no começo desse artigo, vamos entrar em mais detalhes agora.

A Prensa de Gutenberg

O processo de Gutenberg era um perfurador de aço, com a forma espelhada da letra a qual era pressionada

(por isso o nome Prensa de Guttenberg) em um metal e formava uma forma da letra.

Feita a forma, ela era abastecida com metal derretido, o que dava origem aos tipos(Letras).

Depois cada letra era posta em uma página para dar forma à página do texto.

Funcionava como funcionam os carimbos hoje.

Em pouco tempo essa tecnologia se espalhou pela Europa.

A Bíblia de Gutenberg

Biblia de Guttenberg

Gutenberg criou o primeiro processo de impressão em massa.
Usando tipos móveis falados a cima. O primeiro livro produzido(Em Grande Escala).

A Bíblia de Gutenberg em 1454, conhecida como a Bíblia de quarenta e duas linhas.

Tipografia no Design Gráfico

A tipografia nunca teve tanto destaque, seja pelos intermináveis rebranding’s, as falhas que o seu mau uso causa(um ótimo exemplo é o Oscar).
Um designer gráfico precisa conhecer os vários modelos de fontes.

 Mas também necessita entender como utilizar corretamente os recursos tipográficos, como:

  • Small Cap’s
  • Kerning
  • Peso
  • Ligaturas
  • Serifas
  • Font paring (Combinações de Fontes)

Tipografia: Small Cap’s

tipografia-small-caps

Small Cap’s é um recurso tipográfico que simula o efeito de caixa alta, mas mantendo a altura X(altura padrão das letras) como minúscula.

Quando uma tipografia possui o recurso de small cap’s ela é inteiramente redesenhada para se obter esse efeito.
Muitos softwares de edição, criação possuem esse efeito, mas deve ser usado com cuidado ou evitado.

Pois muitos forçam a tipografia a simular este efeito, perdendo até caraterísticas do design da tipografia.

Tipografia: Kerning

Kerning é a distância entre as letras, um recurso muito utilizado no design de marcas, uma grande tendência desde 2015.
Grandes marcas fazem alterações em suas logos, quase imperceptíveis, justamente alterando o kerning.

O Deixando mais natural ou mais bem ajustado as proporções da marca.

Tipografia: Peso

tipografia-peso

Porque o peso das fontes está presente aqui? Você deve saber o que é uma fonte bold ou normal.
Mas você sabe o que é uma das principais características de uma boa tipografia? O Peso!
Na verdade os pesos, procure sempre procurar tipografias que tenham boas quantidade de pesos, desde o mais Light até o Heavy.

Tipografia: Fontes Sem Serifa x Fontes Serifadas(Sans Serif)

 

Tipografia: Fontes Sem Serifa

Brandon-Grotesque

Fontes sem serifa, Sans Serif ou apenas modernas fora muito popularizadas depois  da web.

Com certeza você conhece os nomes Arial ou Helvetica, então elas são referências e também as pioneiras.

Há quem discorde, mas ambas possuem histórias interessantes, a ultima tendo até um Documentário.

Mas esse não é o foco aqui, vamos falar sobre a principal diferenças das fontes sem serifa para as suas irmãs serifadas.

Como deve ter ficado claro na frase acima, a principal diferença é a falta da serifa, mas..

O que é Serifa ou melhor: O que São Serifas?
sans-serif-x-serif

Serifas são esses pequenos caminhos que acompanham o final de cada letra, na imagem acima onde está pintado de vermelho e com um circulo pontilhado em volta.

Para que Servem as Serifas?

Foram e ainda são indicadas onde você deseja facilitar a leitura, pois as serifadas dão mais sentido de continuidade e facilitam a leitura.

Moderno X Antigo (Vintage, Retrô, Histórico)

Já foi mencionado aqui que as fontes sem serifa tem um aspecto e passam a impressão de um layout ou documento moderno, mas é interessante ressaltar que ao contrário delas as fontes serifadas tendem a passar um aspecto e impressão mais Histórica/Vintage.

É interessante notar essas características, principalmente se você trabalha ou pretende trabalhar com design para logos.

Tipografia: Fontes Serifadasdidot-typeface

Bem, se você acompanhou o artigo até aqui você já deve saber bem do que se tratam as fontes serifadas.
Então vamos poupar um pouco de enrolação e vamos te dar alguns exemplos de fontes Serifadas.

  • Georgia
  • Didot
  • Linux Libertine

Combinações Tipográficas ou Font Pairing

Um dos maiores segredos na hora de criar boas composições seja você um designer gráfico ou não.
É a arte de combinar fontes, ou o font pairing, para conseguir se um mestre jedi da arte de combinar fontes, requer  muito estudo e dedicação.
Você precisa conhecer bem os princípios apresentados neste artigo, Peso, Small Cap’s, Ligaturas, Fontes com Serifa, Fontes sem Serif, As Fontes Script.

As combinações são infinitas, as combinações de fontes mais comuns, são:

  • Fontes Sem Serifa + Com Serifa
  • Fontes Sem Serifa + Script
  • Fontes Serifadas com Small Caps + Sans Serif. 
  • Handwritten + Sem Serifas

Você pode parear a mesma fonte também, como? Usando o Peso + Small Caps  ou Letras Maiúsculas.

  • Negrito + Peso Normal
  • Negrito + Fonte Super Fina(Light)
  • Normal + Fonte Super Fina(Light)
  • Maiúsculas (Para fontes pequenas 12 px ou menos ou texto de corpo) + Minúsculas  (para tamanhos maiores e títulos).

Combinações Tipográficas: 5 Combinações de Fontes para Você usar no seu Próximo Design

Montserrat & Courier New

Montserrat é um tipo de fonte amplamente utilizado atualmente (você verá ela em 90% da web)  e o motivo é simples: é uma fonte elegante, moderno, sem-serifa que é perfeita vários casos.

Courier New, por outro lado, é usado menos na web, e como você pode ver, o estilo é um pouco remanescente do tipo de tipo que uma máquina de escrever pode produzir

Proxima Nova e Georgia

Proxima Nova e Georgia está se tornando uma combinação tipográfica clássica, especialmente na web.

Na verdade, você provavelmente já viu a combinação entre vários sites, e há um par de razões perfeitamente válidas para isso.

Em primeiro lugar, é uma combinação impressionante e, em segundo lugar, é perfeitamente adequado para uma variedade de marcas e estilos diferentes. Sem surpresa, trata-se de uma combinação sans serif + serif, sendo a Geórgia utilizada para texto de corpo mais pequeno e a Proxima Nova utilizada para títulos / subposições.

Entre outras, e é claro você sempre vai poder fazer suas próprias combinações sem seguir nenhuma receita, mas para isso é necessário conhecer as características de cada tipo de fonte.

Times New Roman + Source Sans Pro

Times New Roman raramente é usado na web nestes dias, principalmente porque a maioria dos designers optar por mais recentes e aparentemente mais modernos tipos de letra em seus projetos.

No entanto, é importante lembrar que o Times New Roman é um ótimo tipo de letra, especialmente se você está procurando um tipo de letra serif altamente legível que sem dúvida trará um senso de familiaridade ao seu projeto.

Source Sans Pro é uma escolha tipográfica um pouco mais comum, que funciona maravilhosamente ao lado Times New Roman, especialmente se você está olhando para criar uma marca simples e elegante.

Helvetica + Garamond

Aqui está outro site que mantém as coisas relativamente simples, com o uso de Helvetica e Garamond.

Helvetica é o tipo de letra principal usado em todo o site, o que ajuda a manter as coisas o mais simples possível.

É um site de portfólio, por isso é importante que nada diminua o conteúdo, o que torna a Helvetica a escolha perfeita.

Garamond é usado com harmonia e muito boa também, como na sua forma itálica, pode tornar-se arrogante quando usado em grandes quantidades.

Alternate Gothic + Georgia

O Gothic alternativo é um tipo de letra sem-serifa simples, e Geórgia é talvez um dos caracteres mais elegantes, contudo understated, serif para fora lá. Perfeito.

Dica extra, ao comprar(baixar) uma fonte, verifique os arquivos que vem com ela, muitas possuem um pdf com informações importantíssimas e muito interessantes também.

Minhas fontes favoritas são: Gotham, Avenir, Brandon Grotesque, Didot, Pacifico, Quicksand.

Infográfico para combinações de fontes do Google Fonts.

Isso é exclusivo em, nunca vi em um artigo brasileiro, é uma tabela para você escolher as melhores combinações de fontes no Google Fonts.
É Bem simples funciona de acordo com as cores dos quadrados.

  • Branco é uma ótima combinação.
  • Cinza Claro uma combinação não tão aconselhável.
  • Cinza Escuro é uma configuração que você deve evitar.

google-fontes-combination-esqueme

Já citamos algumas neste artigo.

Faça download da Tabela em Alta Qualidade Aqui.

Recapitulando o que Aprendemos

  • O que é Tipografia
  • A importância da Tipografia
  • A Prensa da Guttenberg
  • Tipografia no Design Gráfico
  • Small Cap’s
  • Kerning
  • Peso
  • Ligaturas
  • Serifas
  • Fontes Serifadas
  • Fontes Sem Serifa
  • Tipografia: Fontes Sem Serifa x Fontes Serifadas(Sans Serif)
  • Moderno X Antigo (Vintage, Retrô, Histórico)
  • Combinações Tipográficas ou Font Pairing
  • Combinações Tipográficas: 5 Combinações de Fontes para Você usar no seu Próximo Design
  • Infográfico para combinações de fontes do Google Fonts.

Bônus Imperdível Abaixo 🙂

Deseja saber mais sobre tipografia, teoria das cores ou Design em geral?

Aqui você aprenderá os principais conceitos de Design, abordando desde o significado do termo, até técnicas de diagramação, fotografia, teoria das cores e criação de identidade visual.
O conhecimento adquirido neste curso é importante para a formação de um Designer profissional, pois entenderá como realizar ótimos trabalhos independente de ferramentas.
O treinamento Conceitos de Design é conduzido pela professora Ms Mariana Hortolani da USP.

Este curso conta com 11 horas de conteúdo em 31 aulas. 
Eu recomendo este curso, porque ele foi um diferencial enorme em meus projetos de design.
Eu aprendi tudo o que eu sei sobre tipografia, e ainda aprendi sobre Conceitos muito importantes de Design que eu nem sonhava.
Ainda tenho o diferencial de ter feito o curso com um Mestre da USP em meu currículo.