Guia sobre Tipografia [Parte 01] – 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?

Um projeto de design, como você já deve saber, engloba várias coisas, e uma das mais importantes é a escolha tipográfica. Independente se o seu projeto é digital ou impresso a tipografia será a “ voz” dele. Por isso ela deve ser coerente com o objetivo de comunicação do projeto.

A escolha certa da tipografia em um trabalho pode fazer toda a diferença.

Mas antes de escolher aquela “fonte” legal, cheia de curvas e linhas, você precisar saber o que é tipografia. Precisa saber como ela funciona, quais são os tipos, quais elementos compõem esses tipos, como usá-la da melhor maneira, etc.

Então, Galucho, para resolver isso , e para você parar de escolher “tal fonte” só porque é bonitinha, o Chief traz para você esse Guia sobre Tipografia.

Esse assunto é pouco extenso e por vezes um pouquinho complexo, por isso eu decidi criar uma série de artigos sobre esse ele.  Pretendo passar por praticamente todos os tópicos que envolvem a tipografia.

Bele? Preparado?

Então, vamos começar a desvendar esse mundo da tipografia!

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

O que é Tipografia

Tipografia: Do grego typos = forma  e graphein =escrita.

É a mecanização da escrita feita através da tecnologia para a reprodução de textos em série.

Tipografia também é o termo usado para definir o estudo dos tipos (apesar de algumas pessoas usarem bastante também o termo tipologia).

Mas antes de tudo … Vamos voltar um pouco na história…

Começo da escrita

O Homem desde os primórdios sempre buscou meios de se comunicar e se expressar em relação com o mundo e aos seus pares.  Portanto, bem antes do início da escrita o Homem já se comunicava através de sons, cantos, gestos, desenhos, pinturas, danças, esculturas…

Após o desenvolvimento da fala , e obviamente da comunicação oral, surgiu a necessidade de criar registros, de preservar e repassar a memória, etc.

E a consequência dessa necessidade foi a invenção da escrita.

“O surgimento da escrita é um marco importante na história do mundo por demarcar a separação entre a história e a pré-história iniciando o registro dos acontecimentos.”

A escrita é o sistema que utiliza signos para expressar graficamente em um suporte o pensamento humano.

“A assimilação e interiorização da tecnologia do alfabeto fonético translada o homem do mundo mágico da audição para o mundo neutro da visão.” Marshall McLuhan, Agaláxia de Gutenberg, 1972”

A escrita, esse sistema de registro através desse signos, existe a cerca de 3.000 ac e passou por várias fases e evoluções. Não vou adentrar na história, até porque ficaria muito extenso esse artigo, mas é muito válido que você pesquise sobre a história da escrita.

O surgimento da tipografia

Os chineses (tinha que ser os asiáticos hehe) foram os primeiros a criar um sistema de tipografia, muito antes do Gutemberg (veremos mais adiante). O inventor foi Pi Shêng por volta do ano 1040 dc. Os tipos eram feitos em argila cozida, madeira e até bronze e eram dispostos numa tábua, a huóban (tábua viva).

Shên Kua, contemporâneo do inventor, relatou a produção de milhares de cópias, mas não é específico se foram em forma de rolos ou livros. Essas obras impressas eram o que ele chamava de Os cinco Clássicos.”

Mas o grande inventor da tipografia, feita através da prensa com tipos em metal, foi Johann Gutemberg no ano de 1450.

“Nascido na Mangucia, atual Mainz, Alemanha, ele Trabalhou na Casa da Moeda com a técnica de fundir metais e cunhar moedas, o que favoreceu a criação da liga de chumbo com a qual ele passou a preparar as letras para montar os tipos móveis em metal. Gutemberg e a Imprensa A Imprensa A História do Livro e da Editoração”

A invenção de Gutemberg possibilitou a reprodução em série dos textos. No século XV, em 1456, ele imprimiu a “Bíblia de 42 linhas”, o primeiro livro impresso e a primeira comprovação da eficiência da tipografia.  Composto por 642 páginas ela teve uma tiragem que foi de aproximadamente 200 exemplares.  Com isso Gutemberg também tornou mais acessível os livros e a cultura, tirando o monopólio dos mosteiros e abadias responsáveis pelos manuscritos (livros escritos à mão).

Então, agora que já sabemos as origens vamos entender como funcionam as coisas… Vem comigo!

O que é fonte, letra e família tipográfica

Glifos (letras, caracteres):

São signos alfabéticos projetados para reprodução mecânica.

glifos

Família tipográfica:

É o conjunto de caracteres que possuem as mesmas características de desenho independentemente das suas variações (peso, inclinação, corpo).

Helvetica Neue

Fonte:

É conjunto de glifos que compõem uma família tipográfica.
Evanescence-mapa

Anatomia dos tipos:

Os tipos são compostos por um conjunto de elementos. Confira abaixo:

anatomia-font

Ligaduras:

São as conexões de dois ou mais caracteres. Em português, a mais funcional é a FI, mas existem várias ligaduras (st, ae, oe, ff, ij, etc).

ligaturas

Como ou sem serifa:

O elemento , dessa anatomia dos tipos,  que você vai mais ouvir falar , o mais importante e que você DEVE saber o que é a  se chama Serifa.
Existem tipos com e sem serifa (ou sans-serif, do francês) e a classificação dos tipos , em serifados e sem serifa, é a principal forma de diferenciação das letras.

Serifas são os pequenos traços, ou prolongamentos, que existem no final das hastes dos glifos.

serifa

Nos próximos artigos falaremos bem mais sobre essa diferenciação.

Mas de antemão saiba que os tipos serifados são os mais adequados para  as caixas de textos “corrido” em trabalhos gráficos (em livros, por exemplo), pois a serifa tem a função de auxiliar a leitura, proporcionando continuidade para o texto e tornando-o menos cansativo para os olhos.

Enquanto que os tipos sem serifa são mais indicados para títulos, chamadas e também para textos em geral  nas aplicações digitais (em websites, por exemplo), pois as serifas acabam se tornando “borrões” no digital, prejudicando , assim, a leitura e o entendimento.

Corpo:

O corpo é o tamanho do tipo que começa do ponto mais alto (versal ou ascendente) até o ponto mais baixo (descendente).

corpo-font

Ascendentes:

É a parte das letras b, d, f, k, h, l e t que se estendem acima da altura de x.

Descendentes:

É a parte das letras g, j, p, q, y e por vezes a letra J(caixa alta), que se estendem abaixo da altura de x.

ascendentes-descendentes

EIXOS:

É a angulação do traço. Diz respeito ao eixo de inclinação principalmente das letras b, c, e, g, o, p e q.

Eixo humanista: é o eixo oblíquo e que condiz com a inclinação da escrita manual.

Eixo racionalista: é o eixo vertical. Condiz com as formas neoclássicas e românticas .

eixo

Caixa de tipos:

As letras possuem três tipos de tamanhos: caixa baixa, caixa alta e versalete.

Caixa baixa:

É o conjunto de caracteres em letras minúsculas.
caixa-baixa

Caixa Alta (capitais ou versais):

É o conjunto de caracteres em letras maiúsculas.
caixa-alta

Caixa alta e baixa derivam da organização dos tipos em caixas de madeira sobre um cavalete, nas oficinas tipográficas, onde as letras maiúsculas ficavam na parte superior (caixa alta) e as as minúsculas na inferior (caixa baixa).

Versalete (small caps):

É o conjunto de caracteres em letras maiúsculas com a altura de minúsculas (altura de x).

versalete

Algarismos:

Os algarismos (ou numerais) também são classificados em 3 grupos: old style, lining e small caps.

Old style:

São os numerais alinhados pelo texto. Por isso eles ultrapassam a linha de x  e, consequentemente, possuem ascendentes e descendentes.

old-style

Lining:

São os numerais com o mesmo tamanho de uma versal (caixa alta) e não possuem ascendentes e descendentes.

lining

Small Caps:

São os numerais com o mesmo tamanho de uma versalete e não possuem ascendentes e descendentes.

small-caps

Unidades de medidas

As unidades de medidas servem para determinar desde o tamanho do corpo, o tamanho dos caracteres até o tamanho das entrelinhas.

Basicamente as medidas “primárias” (irei chamá-las assim) são o ponto e cícero e a paica. Hoje em dia, graças ao digital, temos outras como  em milímetros (mm) em  pixel (px), etc. Por ora, e por questão mais de conhecimento, falaremos das primeiras: o ponto, a Paica (em inglês pica), usado na Inglaterra e nos países de língua inglesa,  e o Cícero empregado na Europa continental.

Pontos: é  a medida tipográfica estabelecida pelo francês  Francisco Ambrósio Didot. Um ponto equivale aproximadamente de 0,376mm . (ou 2,6 pontos = 1 mm).

Cícero: também é uma medida do sistema Didot e que corresponde a 12 pontos.

Paica (pica): é uma unidade de medida anglo-saxão usada na Inglaterra e nos países de língua inglesa. Corresponde a um sexto de polegada.

Divide-se ambas medidas em 12 partes. E existe uma diferença pequena entre os tamanhos, sendo a paica um pouco menor que o cícero:

1 paica (4,22 mm) = 12 pontos (Inglaterra).

1 cícero (4,52 mm) = 12 pontos (Europa Continental).

Abaixo mais alguns números:

medidas

Antes da era digital era preciso conhecer bem sobre essas medidas porque tudo se fazia com a régua, na mão, com cálculos… Hoje em dia não existe mais tal preocupação, porque o próprio software se encarrega de fazer isso.

E como a maioria dos softwares são oriundos dos USA , logo o sistema por padrão é o  Paica, usando a polegada como referência, ou seja, 1/6 de polegada  (4,23 mm).

Quadratim (ou eme):

É um espaço tipográfico derivado da letra M em caixa alta. Dividindo a largura da letra “M” em 18 unidades essa unidade de medida é usada, principalmente, para determinar os espaços horizontais e endentações.

quadratim

E isso só foi o começo…

Para não ficar muito extenso e cansativo vou parar por aqui essa primeira parte dessa série de artigos sobre tipografia.

Nos próximos artigos continuaremos a destrinchar esse mundo da tipografia para realmente termos  uma boa base para escolhermos a fonte certa para os nossos projetos.

E você gosta de tipografia?  Trabalha com tipografia?  Sabe como usá-la corretamente?

Quem sabe você gostaria de compartilhar conosco a sua experiência com os “tipos”.

Até mais.

Forte Abraço.

Confira a segunda parte aqui  → http://chiefofdesign.com.br/guia-tipografia-parte-02/

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

Anatomia do tipo

http://pt.wikipedia.org/wiki/Hist%C3%B3ria_da_escrita

http://www.museutec.org.br/linhadotempo/inventores/johann_gutemberg.htm

http://tipografos.net/glossario/anatomia.html

http://www.artigonal.com/ciencia-artigos/a-origem-do-livro-1542468.html

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.

  • Andre Ricardo

    Todos os seus artigos e e-books têm me auxiliado bastante. A forma como você sintetiza os assuntos é fantástica, principalmente nos infográficos. Estou ansioso para ver a ‘parte 02’ deste Guia sobre Tipografia.

    • Olá André.

      Muito obrigado pelos elogios !
      E fique ligado, porque em breve lançarei a segunda parte!!

      Forte abraço.

  • Oh! Muito Bom!

    Gostei tanto o seu artigo que eu o colocarei no meu blog, posso?

    Muito sucesso para você! Estou ansioso pelos próximos artigos.

    =D

    • Olá Bruno!

      Que ótimo que gostou. Obrigado!!
      E claro que pode!
      Sucesso para nós :)

      Forte abraço.

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

  • Kennedy Alves

    Baita aula! Parabéns!

  • Átila Santos

    Gostei muito. Adorei!

  • Átila Santos

    Só falta ter feed para o blog hein David.

  • Edu Almeida

    Gostei muito e vai ser super útil, pois é meu tema de tcc. :)

    • Obrigado, Edu!
      Fico feliz em ajudar no seu TCC. Boa sorte aew!

      Vlw! :D
      Forte abraço!!!

  • Mag Magdiel

    Isso é muito útil. Excelente, parabéns!

  • André Costa

    Muito legal, artigo bem completo… Vlw tem ajudado muito David.

    • Olá André.

      Obrigado! Valeu! :D

      Forte abraço!

  • Camilla

    Na parte de ascendente e descendente, você cita a letra “r” no lugar da letra “f”, que possuem ascendentes, conforme a imagem.

    • Oi Camila.

      Sim, verdade. E além da letra “f” também faltou cita a letra “h”.
      Já foi corrigido. Obrigado por avisar.

      Abraço :D

  • Euler

    Bacana! (Y) :D

  • Plinio de Andrade

    Excelente artigo .. parabéns

    • Olá Plinio!

      Muito Obrigado!

      Abraço! :D

  • Alexandre Corre Corre

    Muito legal !!!!

    • Olá Alexandre!

      Muito Obrigado pelo comentário :D

      Valeu!

      Forte Abraço!

  • Renata Martins

    Muito, muito bacana!!!

    • Olá Renata!

      Muito Obrigado pelo comentário :D

      Abraço!

  • Leonardo Vieira

    valeu me ajudou muito

    • Olá Leornado.

      Valeu!

      Muito obrigado!

      Abraço!

  • Júnior Gomes

    Gostei muito do artigo. Perfeito.

    • Olá Júnior.

      Muito obrigado! :D

      Abraço!

  • Toni Joseph

    Cara Sensacional esse artigo era o que eu estava procurando, já te sigo a um bom tempo e mim inspiro em seus trabalhos para tentar projetar os meus em minha nova iniciativa na carreira de Desing web. parabéns pelo seu trabalho e continue assim nos presenteando com essas ricas informações.

    • Olá Toni!

      Muito Obrigado !Fico muito feliz de saber disso! :D

      Sucesso para ti!

      Valeu pelo comentário!

      Forte abraço!

  • Jéssica Alves

    Muito bom, muito bom mesmo!