Iniciação a identidade visual pt1

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/