Eae. Td Bele?
Vamos falar sobre Tipografia?
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 mesmo.
É a tipografia que vai definir se é uma mensagem séria, divertida, urgente, dita em voz baixa ou gritando.
Assim como as cores, existe uma psicologia por trás das fontes tipográficas e a mesma não deve ser ignorada.
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ê precisa 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 ele. Pretendo passar por praticamente todos os tópicos que envolvem a tipografia.
E antes de prosseguir com o artigo, eu quero aproveitar a oportunidade, já que estamos falando sobre Tipografia, para te avisar que estamos com inscrições abertas para o nosso curso de Fundamentos do Design Visual. O curso Fundamentos do Design Visual é focado nos fundamentos, conceitos e princípios do Design Visual.
Neste curso, juntamente com os outros fundamentos, você poderá se aprofundar ainda mais sobre Tipografia. Clique no link abaixo e conheça o nosso curso.
⭐️Curso Fundamentos do Design Visual⭐️
Saiba mais ➡ https://www.fundamentosdodesign.com.br
Bele? Preparado?
Então, vamos começar a desvendar esse mundo da tipografia!
O que você verá nesse artigo?
- O que é tipografia
- A história da tipografia
- O que é fonte, glifo e família tipográfica
- A anatomia dos tipos
- A caixa de tipos
- As unidades de medidas
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 ao 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, A galáxia de Gutenberg, 1972”
A escrita, esse sistema de registro através desses 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 este 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 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.
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).
Fonte:
É conjunto de glifos que compõem uma família tipográfica. O termo também é utilizado para designar os arquivos de fonte digitais, ou seja, uma coleção de glifos digitais em forma de arquivos para serem utilizados em computadores.
Anatomia dos tipos:
Os tipos são compostos por um conjunto de elementos:bojo, haste, barra, perna, serifa, oco, cauda, terminal, ombro, vértice, ligação, orelha, gancho, junção, espora, incisão, abertura, espinha e braço. Confira a imagem a seguir para ver cada parte da anatomia.
Ao menos que você seja um tipógrafo, você não precisa decorar cada parte que compõe a letra, mas é interessante você saber principalmente se for lidar com alguma ilustração do tipo lettering.
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). Ela pode ajudar na legibilidade e estética da palavra.
Como ou sem serifa:
A Serifa é o elemento, da anatomia dos tipos, que você vai mais ouvir falar. É o mais importante e o que você DEVE conhecer obrigatoriamente.
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.
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. Mas isso não é uma regra, ainda mais em tempos de telas de retinas, por isso o bom senso deve sempre prevalecer.
Corpo:
O corpo é o tamanho do tipo que começa do ponto mais alto (versal ou ascendente) até o ponto mais baixo (descendente).
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.
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 ↓.
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 Alta (capitais ou versais):
É o conjunto de caracteres em letras maiúsculas.
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), já que eram mais utilizadas e assim era mais fácil de pegá-las.
Versalete (small caps):
É o conjunto de caracteres em letras maiúsculas com a altura de minúsculas (altura de x).
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.
Lining:
São os numerais com o mesmo tamanho de uma versal (caixa alta) e não possuem ascendentes e descendentes.
Small Caps:
São os numerais com o mesmo tamanho de uma versalete e não possuem ascendentes e descendentes.
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, o cícero e a paica. Hoje em dia, graças ao digital, temos outras como: milímetros (mm), 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.
Ponto: é 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 1/6 polegada.
Divide-se ambas medidas (Cícero e Paica) em 12 partes. E existe uma diferença pequena entre os tamanhos, sendo a paica um pouco menor que o cícero. Veja a seguir:
1 paica (4,22 mm) = 12 pontos (Inglaterra).
1 cícero (4,52 mm) = 12 pontos (Europa Continental).
Abaixo mais alguns números:
Antes da era digital era preciso conhecer bem sobre essas medidas porquê 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):
Outro tipo de medida é o 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.
E isso só foi o começo…
Para não ficar muito extenso e cansativo vou parar por aqui essa primeira parte da 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, bele?
E se quiser saber mais sobre essa aula sobre tipografia que gravei para os alunos do curso Web Designer PRO.
Confira:
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 → https://www.chiefofdesign.com.br/guia-tipografia-parte-02/
Confira a terceira parte aqui →https://www.chiefofdesign.com.br/guia-tipografia-parte-03/
Referências:
Livro Elementos Do Estilo Tipográfico – Robert Bringhurst
Livro Pensar com Tipos – Ellen lupton
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
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.
Olá Bruno.
Na integra não pode, pois o google pode punir vc por isso.
Mas pode colocar como referência desde que respeito a autoria. 😀
Muito obrigado pleo comentário!
Abraço!
Pingback: Guia sobre Tipografia (parte 03)– Escolhendo a fonte certa
Baita aula! Parabéns!
Obrigado, Kennedy 😀
Abraço!
Gostei muito. Adorei!
Muito Obrigado Atila. 🙂
Abrs!
Só falta ter feed para o blog hein David.
Vou dar uma olhada nisso!
VLw.
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! 😀
Forte abraço!!!
Isso é muito útil. Excelente, parabéns!
Vlw Mag!! 😀
Muito obrigado!!
Abrs
Muito legal, artigo bem completo… Vlw tem ajudado muito David.
Olá André.
Obrigado! Valeu! 😀
Forte abraço!
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 😀
Bacana! (Y) 😀
Valeu Euler! 😀
Forte abraço!
Excelente artigo .. parabéns
Olá Plinio!
Muito Obrigado!
Abraço! 😀
Muito legal !!!!
Olá Alexandre!
Muito Obrigado pelo comentário 😀
Valeu!
Forte Abraço!
Muito, muito bacana!!!
Olá Renata!
Muito Obrigado pelo comentário 😀
Abraço!
valeu me ajudou muito
Olá Leornado.
Valeu!
Muito obrigado!
Abraço!
Gostei muito do artigo. Perfeito.
Olá Júnior.
Muito obrigado! 😀
Abraço!
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! 😀
Sucesso para ti!
Valeu pelo comentário!
Forte abraço!
Muito bom, muito bom mesmo!
Olá Jéssica!
Muito obrigado! 😀
Forte abraço!
David, não estou conseguindo acessar as continuações… ~^
Olá Everson.
Qual o erro?
Os links são esses:
https://www.chiefofdesign.com.br/guia-tipografia-parte-02/
https://www.chiefofdesign.com.br/guia-tipografia-parte-03/
Abraço!
krl, representou!
Valeu Vinicius 😀
Parabens pela organização e qualidade do material.
Quem compartilhar legal citar a fonte do material para valorizar o esforço do amigo.
Parabéns.
Olá Wilton.
Muito Obrigado 😀
Abraço
show
Valeu Alex. 😀
Forte abraço!
Obrigado! Ótimo artigo!
Olá Chico!
Muito obrigado!
Abraço!
Fantástico. Instigante!
Parabéns!!!
Excelente!!! Muito obrigado!!!
Fala Bruno!
Muito obrigado! 😀
Abraço!
Muito bom. Parabéns e obrigado (:
Fala Caio!
Muito obrigado pelo comentário!
Forte abraço!
Muito bom o artigo, David. Parabéns!
Tmj
Olá Pedro.
Muito Obrigado 😀
Abraço!
Adorei o post…. adoro tipografia!
Abraço
Oi Renata.
Tbm adoro, somos dois 😀
Obrigado pelo comentário.
Abraço!
Valeu David, parabéns pela iniciativa!!
Valeu Renan!
Muito Obrigado 😀
Abraço!
Ena!! Isto vai me dar jeito!
Obrigado pela partilha 🙂
Arrebentou!!! Nunca tinha visto um post tão completo sobre tipografia!
Fala Cleber.
Obrigado 😀
Abraço!
Pingback: Tipografia | Tegra – Blog
Pingback: 10 dicas de tipografia para conferir antes de publicar seu projeto | tutano
Muito obrigado por compartilhar conhecimento e bom conteúdo, meu amigo.
Pingback: Na mesa do Chief - Entrevista com a Designer Nayane Nathalie
Pingback: Sinalização, Sinalética e Design de informação - Chief of Design
Pingback: Guia sobre Manual de Marca - Chief of Design
Pingback: [Infográfico] O que todo Web Designer Precisa Saber – [Parte 01] - Conceitos de Web Design
Pingback: 5 formas interessantes de causar um impacto visual através da Tipografia
Pingback: Como usar a Tipografia para melhorar a Conversão de seus projetos?
Pingback: Participação no Grupo de Pesquisa Arte Impressa – Abraham Sagaraz
Ótimo Artigo Parabéns 🙂
Teste
Pingback: WebaDesign – Empresa de Webdesign – Desenvolvimento Web Design Macaé e Curitiba » Tipografia: Guia Sobre Tipos – Escolhendo a fonte certa [parte 01]
Artigo indispensável para quem quer conhecer tipografia!
Pingback: Tipografia: Guia Sobre Tipos - Escolhendo a fonte certa [parte 02]
Pingback: Tipografia: Guia Sobre Tipos - Escolhendo a fonte certa [parte 03]
Gratidão por esta série incrível David! 😀
Muito obrigado, Marcos 😀
Abraço.
Pingback: Google
Obrigada! vou usar as referencia também!
Valeu. Eu que agradeço pelo comentário 😀
Valeu
Ótimo artigo, PARABÉNS!
Oi Karina.
Muito Obrigado 🙂
Abraço.
Interessante, esta de parabéns…
Obrigado 🙂
Abraço
Pingback: Pensar com Tipos - Livro da Ellen Lupton com Desconto de 25%
Pingback: Criar sites - Por onde eu começo a aprender? O que devo fazer?
Pingback: Alterando a fonte da loja - Central de Ajuda
Pingback: Design para Eventos - Curso do Emerson Medeiros com 20% de desconto
Pingback: Social Media Design - Aprenda do zero Social Media Design
Pingback: 5 dicas que irão ajudar a fazer seu TCC de Design
Pingback: Design para Social Media – Aprenda do zero social media design
Pingback: Tendências de Design para 2017 - A Era da Experiência
Pingback: Qual é a melhor Tipografia? Como escolher a fonte certa?
Pingback: O lettering, a caligrafia e a vida de freela - Vivendo de Freela
Pingback: Design para Redes Sociais - O que é Social Media Design?
Pingback: O que é Branding, Marca e Identidade Visual? E quais as diferenças?
Pingback: O que é Design Gráfico? O que faz um Designer Gráfico?
Pingback: O que é design gráfico? O que faz um designer gráfico? – Andreia Lisboa
Pingback: Alterar Fonte da loja virtual - Central de Ajuda
Pingback: Tipografia: do papel ao digital – Blog - expoLAB
Pingback: Design para redes sociais – O que é Social Media Design? – Andreia Lisboa
Pingback: Design para redes sociais – O que é Social Media Design? – Web Agencia
Pingback: Design Gráfico: aprendizado, conceito básicos e dicas.