Web Design > Tipografia
-
Upload
felipe-fernandes -
Category
Design
-
view
2.235 -
download
3
Transcript of Web Design > Tipografia
![Page 1: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/1.jpg)
WebDesignFontes, types e tipos...
![Page 2: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/2.jpg)
WebDesign | Tipografia na web
Tipografia é a arte e o processo de criação na composição de um texto, fisica ou digitalmente. Assim como no design gráfico em geral, o objetivo principal da tipografia é dar ordem estrutural e forma à comunicação.
fonte: Wikipédia
![Page 3: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/3.jpg)
WebDesign | Tipografia na web
Tipo ou Fonte?Na verdade, querem dizer a mesma coisa.O termo fonte nasce com equívocos na tradução de textos sobre o assunto para a língua portuguesa, e hoje é usado com frequência.
![Page 4: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/4.jpg)
WebDesign | Tipografia na web
Mas são tantas opções...
Exatamente. A variedade de tipos de fontes torna o trabalho da escolha ainda mais sensível, no entanto, a escolha com sabedoria da fonte valoriza e contribui com a unidade e conceito visual do projeto.
![Page 5: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/5.jpg)
WebDesign | Tipografia na web
Legibilidade é a chave quando se trata de textos.
![Page 6: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/6.jpg)
WebDesign | Tipografia na web
LegibilidadeUma fonte simples tende ser mais legível em meio digital. Fontes com peso médio e sem serifas são melhores.
![Page 7: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/7.jpg)
WebDesign | Tipografia na web
LegibilidadeO contraste deve ser elevado, e o tamanho para massas tipográficas não devem ser menor que 12px.Quantidade de fontes em um mesmo texto também não devem ser superior que três.
![Page 8: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/8.jpg)
WebDesign | Tipografia na web
O EstiloA fonte escolhida em um site é uma das chaves do sucesso de um projeto. Ela deve estar alinhada com os conceitos e a linguagem visual aplicada ao layout.
![Page 9: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/9.jpg)
WebDesign | Tipografia na web
O EstiloA fonte escolhida em um site é uma das chaves do sucesso de um projeto. Ela deve estar alinhada com os conceitos e a linguagem visual aplicada ao layout. Por exemplo...
![Page 10: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/10.jpg)
WebDesign | Tipografia na web
O Estilo
![Page 11: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/11.jpg)
WebDesign | Tipografia na web
O Estilo
![Page 12: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/12.jpg)
WebDesign | Tipografia na web
O Estilo A fonte mal escolhida do exemplo anterior com mais representatividade do conceito de diversão e jovialidade é muito bem aplicado ao exemplo 2; o que já não acontece no exemplo 1, que remete ao conceito de algo clássico.
![Page 13: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/13.jpg)
WebDesign | Tipografia na web
Estilo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere, mauris a feugiat tempor, nisi est porta nisi, quis fringilla urna est at eros. Sed et diam purus, quis tincidunt risus. Curabitur ipsum felis, dictum gravida mollis vitae, laoreet eget neque. Sed semper tristique turpis non aliquam. Fusce ornare ligula tortor, eget vestibulum risus. Vestibulum id facilisis nisi. Vivamus pharetra mauris sit amet lacus ornare feugiat. Nulla mi odio, consectetur nec luctus in, feugiat eget justo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere, mauris a feugiat tempor, nisi est porta nisi, quis fringilla urna est at eros. Sed et diam purus, quis tincidunt risus. Curabitur ipsum felis, dictum gravida mollis vitae, laoreet eget neque. Sed semper tristique turpis non aliquam. Fusce ornare ligula tortor, eget vestibulum risus. Vestibulum id facilisis nisi. Vivamus pharetra mauris sit amet lacus ornare feugiat. Nulla mi odio, consectetur nec luctus in, feugiat eget justo.
![Page 14: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/14.jpg)
WebDesign | Tipografia na web
Estilo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere, mauris a feugiat tempor, nisi est porta nisi, quis fringilla urna est at eros. Sed et diam purus, quis tincidunt risus. Curabitur ipsum felis, dictum gravida mollis vitae, laoreet eget neque. Sed semper tristique turpis non aliquam. Fusce ornare ligula tortor, eget vestibulum risus. Vestibulum id facilisis nisi. Vivamus pharetra mauris sit amet lacus ornare feugiat. Nulla mi odio, consectetur nec luctus in, feugiat eget justo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere, mauris a feugiat tempor, nisi est porta nisi, quis fringilla urna est at eros. Sed et diam purus, quis tincidunt risus. Curabitur ipsum felis, dictum gravida mollis vitae, laoreet eget neque. Sed semper tristique turpis non aliquam. Fusce ornare ligula tortor, eget vestibulum risus. Vestibulum id facilisis nisi. Vivamus pharetra mauris sit amet lacus ornare feugiat. Nulla mi odio, consectetur nec luctus in, feugiat eget justo.
![Page 15: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/15.jpg)
WebDesign | Tipografia na web
Estilo O estilo também tem influência quando existem massas de texto. Sendo assim, quanto menos elementos decorativos na fonte, mais legibilidade ela terá.
![Page 16: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/16.jpg)
WebDesign | Tipografia na web
Contraste É importante se ter atenção a cor e elementos do fundo em relação ao texto aplicado.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere, mauris
a feugiat tempor, nisi est porta nisi.
![Page 17: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/17.jpg)
WebDesign | Tipografia na web
Tamanho Outro fator de que contribui diretamente para legibilidade dos textos.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere, mauris a feugiat tempor, nisi est porta nisi, quis fringilla urna est at eros. Sed et diam purus, quis tincidunt risus. Curabitur ipsum felis, dictum gravida mollis vitae, laoreet eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere, mauris a feugiat tempor, nisi est porta nisi, quis fringilla urna est at eros. Sed et diam purus, quis tincidunt risus. Curabitur ipsum felis, dictum gravida mollis vitae, laoreet eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere, mauris a feugiat tempor, nisi est porta nisi, quis fringilla urna est at eros. Sed et diam purus, quis tincidunt risus. Curabitur ipsum felis, dictum gravida mollis vitae, laoreet eget neque.
![Page 18: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/18.jpg)
WebDesign | Tipografia na web
Hierarquia Está relacionada ao tamanho do texto, e é usada para destacar a importância de um texto sobre outro ao longo da página.
Eu sou importanteEu sou menos importanteEu começo a ser insignificanteQuem sou eu mesmo?.
![Page 19: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/19.jpg)
WebDesign | Tipografia na web
Espaço em branco Trata-se do espaço negativo que existem entre os diferentes blocos que compõem uma página, não necessariamente branco, mas os "espaços" que permitem que o conteúdo "respire". Na tipografia trabalha-se com espaços entre letras e espaços entrelinhas para definir uma boa legibilidade.
![Page 20: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/20.jpg)
WebDesign | Tipografia na web
AlinhamentoNa web não é uma boa idéia usar um alinhamento justificado, pois este vai separar as palavras de maneira pouco natural, o que dificulta a leitura.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere, mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere, mauris.
![Page 21: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/21.jpg)
WebDesign | Tipografia na web
AlinhamentoNa web não é uma boa idéia usar um alinhamento justificado, pois este vai separar as palavras de maneira pouco natural, o que dificulta a leitura.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere, mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere, mauris.
![Page 22: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/22.jpg)
WebDesign | Tipografia na web
No desenvolvimento de um projeto web, é recomendável utilizar para as massas de texto fontes websafe, que são famílias de fontes que são encontradas em diversos sistemas operacionais.
![Page 23: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/23.jpg)
WebDesign | Tipografia na web
No desenvolvimento de um projeto web, é recomendável utilizar para as massas de texto fontes websafe, que são famílias de fontes que são encontradas em diversos sistemas operacionais. São elas:Arial, Arial Black, Century Gothic, Comic Sans MS, Helvetica, Impact, Trebuchet MS, Verdana e Times New Roman
![Page 24: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/24.jpg)
WebDesign | Tipografia na web
Alguns bons exemplos de contribuições das fontes aos layouts...
![Page 25: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/25.jpg)
WebDesign | Tipografia na web
![Page 26: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/26.jpg)
WebDesign | Tipografia na web
![Page 27: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/27.jpg)
WebDesign | Tipografia na web
![Page 28: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/28.jpg)
WebDesign | Tipografia na web
![Page 29: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/29.jpg)
WebDesign | Tipografia na web
![Page 30: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/30.jpg)
WebDesign | Tipografia na web
![Page 31: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/31.jpg)
WebDesign | Tipografia na web
![Page 32: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/32.jpg)
WebDesign | Tipografia na web
http://vimeo.com/40110798
![Page 33: Web Design > Tipografia](https://reader034.fdocument.pub/reader034/viewer/2022042607/5584e32ad8b42a84408b5170/html5/thumbnails/33.jpg)
WebDesign | Tipografia na web
Thanks! ;)