iniciação a identidade visual pt1
TRANSCRIPT
![Page 1: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/1.jpg)
INICIAÇÃO A IDENTIDADE
VISUAL
Pt1 - Tipografia
![Page 2: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/2.jpg)
“Conjunto de elementos gráficos que compõem as características visuais de um nome, idéia, empresa, produto ou serviço.”
Identidade Visual
![Page 3: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/3.jpg)
Elementos a serem tratados
Tipografia
Símbolo
Cores
Manual de identidade visual
![Page 4: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/4.jpg)
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
![Page 5: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/5.jpg)
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
![Page 6: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/6.jpg)
Grupos Tipográficos
![Page 7: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/7.jpg)
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
![Page 8: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/8.jpg)
Fonte
Conjunto de caracteres sob o mesmo estilo e em todos os corpos.
Caixa alta, baixa, sinais de pontuação, acentos e numerais.
![Page 9: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/9.jpg)
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
![Page 10: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/10.jpg)
![Page 11: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/11.jpg)
![Page 12: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/12.jpg)
![Page 13: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/13.jpg)
![Page 14: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/14.jpg)
![Page 15: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/15.jpg)
![Page 16: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/16.jpg)
![Page 17: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/17.jpg)
![Page 18: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/18.jpg)
Sites para download de fontes
http://www.dafont.com/
http://www.fontsquirrel.com/
![Page 19: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/19.jpg)
Ferramentas tipográgicas
http://wordmark.it/
http://www.lipsum.com/
http://www.csstypeset.com/
http://www.myfonts.com/WhatTheFont/
![Page 20: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/20.jpg)
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
![Page 21: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/21.jpg)
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.
![Page 22: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/22.jpg)
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: …
![Page 23: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/23.jpg)
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)
![Page 24: Iniciação a identidade visual pt1](https://reader034.vdocuments.site/reader034/viewer/2022042516/55ab20841a28abe3058b471c/html5/thumbnails/24.jpg)
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/