Aula 06 textos na web
-
Upload
cristiano-pires-martins -
Category
Technology
-
view
159 -
download
0
Transcript of Aula 06 textos na web
![Page 1: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/1.jpg)
Cristiano Pires Martins
![Page 2: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/2.jpg)
Leitura de Textos• Escrever para Web é diferente de escrever para impressão.
• A leitura na web é feita de forma “escaneável”, ou seja, as pessoas não lêem da esquerda para direita como em um livro.
• O texto do site precisa ser rapidamente “escaneável e facilmente digerível”
• 15% das pessoas lêem mais lentamente na web do que um documento impresso.
2
![Page 3: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/3.jpg)
Texto escaneável
3
• Fornece ao usuário uma melhor experiência no site, o que significa que eles ficarão por mais tempo e voltarão com mais frequência ao site.
• Para auxiliar na montagem do texto, é sugerido o uso da técnica da Pirâmide Invertida.
![Page 4: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/4.jpg)
Pirâmide Invertida
• É a forma dos usuários lerem o texto e já saberem através do topo da pirâmide o que é mais importante.
• Primeiro: comece com uma pequena conclusão para que os usuários possam ver a parte principal da página e adicionar detalhes depois, dessa forma, os usuários param de ler a qualquer momento e ainda tem a confiança de que já leram as partes importantes da informação.
4
![Page 5: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/5.jpg)
Pirâmide Invertida
5
.
Um pequeno texto de compor para dar ao usuário algum contexto e uma pequena
introdução do conteúdo da página
Cabeçalho Principal
• alguns pontos importantes
• que contêm os destaques
• do conteúdo da página
Outro CabeçalhoMais algum texto de corpo
que fornece ao usuário detalhes sobre
o conteúdo da pagina
etc...
IMPORTÂNCIA
![Page 6: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/6.jpg)
Pirâmide Invertida
6
.
Conteúdo com menos importância progressiva, mesmo que bem escrito.
O que não é essencial para a compreensão
do artigo pelo usuário pode ficar aqui.
Coloque a coisa mais importante No topo de seu texto. Os usuários devem ser capazes de ler seu primeiro parágrafo e tem uma ideia do todo.
![Page 7: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/7.jpg)
E qual fonte usar?
• Para não errar, temos 9 de famílias de fontes suportado pela maioria dos sistemas operacionais existentes, elas são chamadas de fontes da Lista Segura.
1. Arial
2. Arial Black 3. Comic Sans MS 4. Courier New
5. Georgia 6. Impact 7. Times New Roman 8. Trebuchet MS 9. Verdana
7
![Page 8: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/8.jpg)
Tipografia
A palavra tipografia é formada pelos radicais typos (impressão ou marca) e grapheia (escrita), ou seja, produzir impressões por meio da escrita.
8
![Page 9: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/9.jpg)
Anatomia de um tipo de letra
9
![Page 10: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/10.jpg)
Terminologias1 – Linha Base: é a linha horizontal imaginária sobre a qual a maioria dos caracteres se assenta. 2 – Altura da Caixa Alta: é uma linha imaginária que marca a altura de todas as letras maiúsculas em um tipo de letra. A altura da caixa alta é inferior à altura máxima do tipo da letra. 3 – Barra Transversal: é um traço que une as linhas nos tipos de letras maiúsculas como as letras “A” e “H”, sendo diferente do traço transversal das letras “f” e “t”.
10
![Page 11: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/11.jpg)
Terminologias4 – Serif (Cerifa): é o nome dado aos traços do acabamento na base e no topo de certos tipos de letras. 5 – Linha Média: uma linha imaginária que marca a extremidade superior das maiúsculas. 6 – Barriga: é a curva redonda que encerra o espaço negativo em um tipo de letra. Exemplo as letras “D”, “o” e “g”. 8 – Descendente: é a parte inferior das letras minúsculas, como “g”, “j”, “p”, “q” e “y” e também alguns numerais como das fontes Georgia.
11
![Page 12: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/12.jpg)
Terminologias9 – Haste: é o principal traço vertical ou diagonal de um tipo de letra, como as letras “I”, “H”, “W”. 10 – Título: é o nome dado ao ponto acima das letras minúsculas, como o “j” e o “i”. 11 – Terminal: é a extremidade de uma haste ou traço sem serif, como a letra “c” do exemplo. 12 – Ascendente: é a extensão de algumas letras minúsculas que chegam até a linha média como exemplo as letras: “b”, “d”, “f”, “h”, “l”, “t”.
12
![Page 13: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/13.jpg)
Terminologias13 – Perna ou caudas: são os traços inferiores angulares como os das letras “K”, “R”e “Q” 14 – Ligadura: é a junção de letras, que dão a impressão de serem um único caractere, como a palavra “fix”. 15 – Altura x: é a altura do “x” minúsculo em um tipo de letra, ele é a distância entre as linhas base e média de um tipo de letra. Também pode ser utilizado como unidade relativa de medição em CSS (ex).
13
![Page 14: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/14.jpg)
Distinções entre tipos de Letra• Fonte é um conjunto de letras com estilo visualmente parecido.
• Elas já vêem instaladas no computador. Por exemplo nos sistemas operacionais Windows oferece cerca de 40 fontes como padrão enquanto os usuários do Mac tem mais de 100 fontes.
• As fontes são agrupadas por famílias que representam uma variação diferente da fonte original.
• As famílias de fonte incluem os tipos: normal, itálico, negrito e negrito itálico.
14
![Page 15: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/15.jpg)
Fontes Serif• As fontes serif são fontes que permitem tornar mais legíveis as letras em um bloco de textos para leitura, principalmente quando impressa, pois criam uma linha horizontal de referência.
• A fonte mais conhecida atualmente é a Times New Roman.
• Há uma grande variedade de fontes serif, entre elas podemos destacar: – Garamond, – Baskerville, – Didot. 15G
![Page 16: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/16.jpg)
Fontes Sans Serif
• São fontes que não possuem a serifa, são fontes mais legíveis e práticas para qualquer finalidade.
• As fontes mais utilizadas atualmente são: Arial e Verdana.
• Uma boa prática no design é utilizar fontes com serifa nos cabeçalhos para chamar atenção e nos blocos de texto fontes sem serifa para uma melhor legibilidade.
16
![Page 17: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/17.jpg)
Fontes Manuscritas
• As fontes manuscritas são ideais para representar a humanidade, sofisticação, tradição, é muito utilizada na criação de logotipos e também como títulos de matérias.
• O lado negativo é conseguir uniformizar os tipos de letras, espaçamentos e alinhamentos;
• Também apresenta bastante dificuldades de leituras em textos longos.
17
![Page 18: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/18.jpg)
Exemplos de Fontes Manuscritas
Blackadder Bradley Hand Brush Script Edwardian Script
French Script Kunstler Script Monotyoe Corsiva
Palace Script MT 18
![Page 19: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/19.jpg)
Fontes Novelty
• São conhecidas como fontes de exibição ou decorativas, representam a grande maioria das fontes disponíveis gratuitamente on-‐line.
• São versões modificadas das populares serif ou sans serif .
• São menos legíveis que suas correspondentes originais.
• Quando usadas com moderação podem enriquecer o design com bastante estilo.
19
![Page 20: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/20.jpg)
Exemplos Novelty
Curls MT AlphaWoodOld English TextAlmonte SnowB SurfersPlaneChinese takeawa
20
![Page 21: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/21.jpg)
Fontes Dingbat
• Também chamadas de fontes símbolos, as fontes originais consistiam em ornatos e símbolos comumente usados.
• As letras Dingbat podem ser ajustadas em qualquer tamanho sem perder a legibilidade.
• As fontes mais conhecidas são: Wingdings e Webdings, que já estão pré-‐instaladas no Windows.
21
![Page 22: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/22.jpg)
Exemplos de dingbat
WP Arabic SihafaWP Arabic Sihafa
WP Hebrew DavidWP Hebrew David
!"#$%&'(Webdings
W♓■♑♎♓■♑⬧ Wingdings
22
![Page 23: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/23.jpg)
Fontes de Tamanho Fixo• São fontes que possuem espaçamento uniforme, os
tipos das letras são elaborados de forma que as larguras de cada letra são semelhantes.
• Elas foram elaboradas baseadas nas máquinas de escrever que utilizavam a letra “w” como medida de espaçamento para todas as letras e depois nos primeiros computadores.
• A fonte mais utilizada neste formato é a Courier New.
• Na web, utilizamos o comando <pre> que preserva tabulações, espaços e quebras de linha.
23
![Page 24: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/24.jpg)
Escolhendo Fontes Corretas• A escolha da fonte correta depende do foco do site, do público que deseja, do contexto em geral.
• Procure “ligar” a fonte escolhida como alguma conexão emocional ou que lembre alguma sensação agradável para o site.
• Tente não usar mais do que 4 fontes para testar o design do site,
• Procure evitar uma combinação de duas fontes serif diferentes ou de duas sans serif diferentes no mesmo projeto.
24
![Page 25: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/25.jpg)
Um "em" é uma unidade de
medida relativa, é igual ao tamanho vertical de um
texto do elemento.
Definir Tamanho da Fonte
• O tamanho de fonte padrão na maioria dos navegadores é de 16 pixels
• Para exibir uma fonte no tamanho de 12 pixels é necessário definir o tamanho da fonte no parágrafo em 0,75em.
• Por quê utilizar o em? – Porque nem todos os navegadores suportam o “aumentar” fonte como o internet explorer 6
25
![Page 26: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/26.jpg)
Definindo o tamanho• Para facilitar o trabalho de conversão de pixels para "em" alteramos o tamanho da fonte do elemento do body em 62,5%. Com isto, o valor do em passa para 10 pixels.
• Dessa forma, 12 pixels equivalem a 1,2 eme e assim por diante. Veja o exemplo em CSS.
26
body { font-size: 62,5%; }
p{ font-size: 1,2 em; } h1{ font-size: 3,5 em; }
![Page 27: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/27.jpg)
Onde encontrar mais fontes?• Em galerias de fontes gratuitas e shareware como:
• www.sofontes.com.br • www.1001fonts.com • www.dafont.com • www.fontesgratis.com.br
• Fontes à venda, que tem como benefício ao pagar por uma família de fontes o pacote completo de negrito, itálico, etc..
• www.fontshop.com • www.myfonts.com • www.itcfonts.com • www.adobe.com/type 27
![Page 28: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/28.jpg)
Espaçamento do texto
• Temos dois tipos de controle de espaçamentos: – Vertical: – Horizontal
28
![Page 29: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/29.jpg)
Espaçamento Horizontal• Para controlar os espaçamentos horizontal das letras utilizamos o Kerning e o Tracking.
• Kerning: aproximação horizontal, é o processo de ajuste do espaço entre letras individuais. Em CSS utilizamos a propriedade letter-‐spacing.
• Tracking: espaçamento horizontal, ajusta o espaçamento mas aplicando-‐se ao espaço existente entre cada letra. Em CSS, utilizamos a propriedade word-‐spacing..
29
![Page 30: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/30.jpg)
Espaçamento Vertical
• O espaçamento vertical também é conhecido como entrelinhas (leading).
• Em CSS ajustamos a propriedade line-‐height. Exemplo:
line-‐height: 1.5em;
30
![Page 31: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/31.jpg)
Alinhamento do Texto
• É o alinhamento dos textos as margens. • Os tipos de alinhamentos mais comuns são: esquerda, centro ou centralizar, direita e justificado.
• Cuidado ao usar o justificar em todos os textos na web, pois ao fazê-‐lo é ajustado também os espaçamentos entre os caracteres provocando em alguns casos o efeito “percorrendo o rio”.
31
![Page 32: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/32.jpg)
Não use justificado na WEB
• Apesar de os textos justificados apresentarem uma informação visual mais limpa e organizada, essa não é maneira correta de alinhar textos web.
• O texto justificado fica melhor em jornais e revistas, onde ele é organizado em duas ou três colunas verticais.
• Na web os textos são corridos e usados em áreas de até 800px, o que acaba gerando uma grande quantidade de espaços vazios, somente para que o texto se mantenha justificado.
32
![Page 33: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/33.jpg)
MOTIVOS PARA NÃO USAR TEXTOS JUSTIFICADOS NA WEB
33
![Page 34: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/34.jpg)
• A maioria das pessoas não lêem os textos da web de forma convencional, apenas passam os olhos captando palavras e formando informações, e os espaços deixados pelos textos justificados dificultam esse processo.
• A leitura dos textos justificados demora 20% mais tempo se comparado ao texto alinhado à esquerda, pois os espaços criam falsas pausas.
• Além disso, devemos tocar no ponto das pessoas com dislexia, que é uma dificuldade no aprendizado da linguagem que atinge cerca de 200 mil pessoas no Brasil. Um disléxico tem dificuldade dobrada a leitura de textos justificados. 34
![Page 35: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/35.jpg)
Exemplo
• Para evitar isto a maioria dos editores utilizam a hifenização, mas os navegadores web não conseguem fazer, então é melhor evitar textos justificados em espaços estreitos.
• Em CSS podemos utilizar a propriedade text-‐aligment c om a s o p ç õ e s : l e f t (esquerda), right(direita), center (central izado) e justify(justificado).
• Há vários softwares e sites que fazem os testes de ajustes de textos, um site é o http://www.typetester.org/
35
![Page 36: Aula 06 textos na web](https://reader034.fdocuments.net/reader034/viewer/2022052509/55ab20301a28abf1058b46c7/html5/thumbnails/36.jpg)
Referências• BEAIRD, J. Princípios do Web Design Maravilhoso. Rio de Janeiro:
Altabooks, 2008. • KALBACH, J; PIVETA, E K. Design de Navegação Web. Bookman, 2009. • WATRALL, E; SIARTO, J. Use A Cabeça! Web Design. Alta Books, 2009.
Fonte de material Fabiana Caravieri Masson
36