O documento discute a tipografia como elemento fundamental da identidade visual, definindo-a como a arte da composição de texto. Detalha os elementos constituintes de uma fonte tipográfica e principais grupos tipográficos, além de abordar questões como legibilidade, usabilidade e aplicações na web.

1. INICIAÇÃO A IDENTIDADE
VISUAL
Pt1 - Tipografia

2. Identidade Visual
“Conjunto de elementos gráficos que compõem
as características visuais de um nome, idéia,
empresa, produto ou serviço.”

3. Elementos a serem tratados
 Tipografia
 Símbolo
 Cores
 Manual de identidade visual

4. Tipografia
A tipografia (do grego typos — “forma” — e
graphein — “escrita”) é a arte e o processo de
criação na composição de um texto, física ou
digitalmente.

5. Histórico
 Pi Shêng por volta do ano 1040 da era cristã inventou os
tipos separados que eram feitos de argila, depois madeira
e finalmente de bronze.
 Johanner Gutenberg, em 1445, desenvolve os tipos móveis.
 https://www.youtube.com/watch?v=DRdxfzXyuEE

6. Grupos Tipográficos

7. Elementos de construção
Toda e qualquer fonte tipográfica é composto por elementos distintos, tais como:
 - Linha de Base (baseline)
 - Linha Central (meanline ou midline)
 - Ascendente (ascender)
 - Descendente (descender)
 - Letra Caixa Alta (upper-case)
 - Letra Caixa-baixa (lower-case)
 - Altura de x (x-height)
 - Cabeça ou Ápice (apex)
 - Serifa (serif)
 - Barriga ou Pança (bowl)
 - Haste ou Fuste (stem)
 - Montante ou Trave (diagonal stroke)
 - Base ou Pé (foot)
 - Barra (bar)
 - Bojo (counter)
 - Etc

8. Fonte
 Conjunto de caracteres sob o mesmo estilo e em todos os corpos.
Caixa alta, baixa, sinais de pontuação, acentos e numerais.

9. Usabilidade
 Na maioria dos casos, uma composição tipográfica deve ser especialmente
legível e visualmente envolvente, sem desconsiderar o contexto em que é
lido e os objetivos da sua publicação.
 No uso da tipografia o interesse visual é realizado através da escolha
adequada de fontes tipográficas, composição (ou layout) de texto, a
sensibilidade para o tom do texto e a relação entre texto e os elementos
gráficos na página.
 http://www.youtube.com/watch?v=McZSUjP1AcE

18. Sites para download de fontes
 http://www.dafont.com/
 http://www.fontsquirrel.com/

19. Ferramentas tipográgicas
 http://wordmark.it/
 http://www.lipsum.com/
 http://www.csstypeset.com/
 http://www.myfonts.com/WhatTheFont/

20. Aplicações web
 Tamanho de fonte maior que 13px
 Não utilizar mais que 3 tipos de fontes diferentes
 As fontes mais legíveis são as sem serifas
 Um bom espaçamento entre linhas também é
aconselhável para melhorar a legibilidade

21. Aplicações web
 Contraste de fonte com o fundo. Se não tivermos certeza de que o
contraste é suficiente, podemos fazer um screenshot da página,
abrir num editor de imagem e transformar a imagem em tons de
cinza.
 Prefira alinhar o texto a esquerda
 Utilize espaços entre parágrafos para deixar o texto respirar
 Usar a unidade EM para redimensionar o texto.

22. Aplicações web
 Não utilizar aspas verticais. Do lado esquerdo da citação: “, e do
lado direito ”, o browser irá reproduzir assim: “Melhor citação”.
 Adicionar espaço extra entre as linhas.
 Usar as reticências corretamente em vez de três pontos. Devido ao
comprimento do ponto final, três pontos, não parecem uma interrupção. O
símbolo correcto a usar é uma elipse. Para usar uma elipse usamos …
que fica assim: …

23. Outras fontes de pesquisa
Artigos
 On Web Typography (http://www.alistapart.com/articles/on-web-typography/)
 Typography Guidelines And References (http://www.smashingmagazine.com/typography-guidelines-and-
references/)
 “What Font Should I Use?%rdquo;: Five Principles for Choosing and Using Typefaces
(http://www.smashingmagazine.com/2010/12/14/what-font-should-i-use-five-principles-for-choosing-and-
using-typefaces/)
Tutoriais
 CSS Typography: The Basics (http://sixrevisions.com/css/css-typography-01/)
 10 Web Typography Rules Every Designer Should Know
(http://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/)
 22 Advanced CSS Text Effects And Web Typography Tips (http://www.1stwebdesigner.com/css/advanced-
css-text-effects-web-typography-tips/)
 10 Best Web Typography Tutorials (http://idesignow.com/css/10-best-web-typography-tutorials.html)

24. Bibliografia
 http://log.pt/blog/2012/01/dicas-de-tipografia-
para-a-web/
 http://chocoladesign.com/9-exemplos-de-
tipografia-na-web
 http://rogerlima.wordpress.com/2008/04/25/aul
a-de-tipografia/
 http://brenobrito.wordpress.com/2011/05/22/um
a-verdadeira-aula-sobre-tipografia/