Upload
daiane-moraes
View
434
Download
1
Embed Size (px)
Citation preview
INICIAÇÃO A IDENTIDADE
VISUAL
Pt1 - Tipografia
“Conjunto de elementos gráficos que compõem as características visuais de um nome, idéia, empresa, produto ou serviço.”
Identidade Visual
Elementos a serem tratados
Tipografia
Símbolo
Cores
Manual de identidade visual
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.
Tipografia
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
Grupos Tipográficos
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
Fonte
Conjunto de caracteres sob o mesmo estilo e em todos os corpos.
Caixa alta, baixa, sinais de pontuação, acentos e numerais.
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
Sites para download de fontes
http://www.dafont.com/
http://www.fontsquirrel.com/
Ferramentas tipográgicas
http://wordmark.it/
http://www.lipsum.com/
http://www.csstypeset.com/
http://www.myfonts.com/WhatTheFont/
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
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.
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: …
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)
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/