Comunicação Visual para Web I AULA 7

Prévia do material em texto

Aula
07Comunicação Visual para Web - UNIGRAN
TIPOGRAFIA
Caros(as) alunos(as) nessa aula veremos o conceito de 
tipografia, como utilizar fontes adequadas no conteúdo editorial do 
website, e como diagramar conteúdos textuais corretamente. Se ao 
final desta aula tiverem dúvidas, vocês poderão saná-las através das 
ferramentas “fórum” ou “quadro de avisos” e “chat”.
Comecemos, então, analisando os objetivos e verificando as 
seções que serão desenvolvidas ao longo desta aula. 
Bom trabalho!
Objetivos de aprendizagem
Ao final desta aula, vocês serão capazes de:
• entender o conceito de tipografia;
• diagramar conteúdo textual de forma escaneável;
• redigir para web de forma apropriada;
• formatar textos, rótulos, títulos e links corretamente;
• utilizar fontes e tamanhos de texto de acordo com o público alvo;
Seções de estudo
• Seção 1 - Tipografia
• Seção 2 - Tipos e tamanhos de fontes
• Seção 3 - Fundo de tela x legibilidade
• Seção 4 - Alinhamento 
115
Comunicação Visual para Web - UNIGRAN
Seção 1 - Tipografi a
A palavra tipografia vem 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. 
A escolha da tipografia (fontes), em um site deve suprir tanto o papel 
estético como funcional. O emprego de recursos gráficos podem fornecer outras 
informações no contexto de uma mensagem, através do tamanho da fonte, cores, 
contorno etc. Através do estilo gráfico que um texto é personalizado, este poderá 
transmitir sensações, como humor e dramaticidade. 
Nos meios digitais, a tipografia deve ser adequada à baixa resolução das 
telas e o brilho do monitor. A resolução das telas dos computadores varia de 72 a 
96 ppi (points per inch, pontos por polegada), já os produtos impressos a resolução 
varia de 300 a 2.400 dpi, o que torna a legibilidade superior ao meio digital. No 
entanto com a crescente evolução tecnológica a resolução dos dispositivos digitais 
esta aumentando, no iPhones 3GD, por exemplo, a densidade é de 264 ppi. A dos 
iPhone 4 e 4S, iPods Touch é de 326 ppi, já os iPads2 e iPads3 possuem 326 ppi.
Embora a densidade de pontos dos monitores venha aumentando e 
melhorando a legibilidade, a leitura nas telas é 25% mais lenta que no papel, e por 
isso a escolha da tipologia é tão importante para o projeto. Uma fonte adequada 
garante a legibilidade e contextualização do conteúdo. 
• Seção 5 - Propriedades de texto
• Seção 6 - Orientações gerais quanto ao uso de textos
A escolha de fontes deve ser criteriosa, pois para que uma fonte seja exibida 
é necessário que ela esteja instalada no computador do usuário, caso contrário o 
browser irá substituí-la por outra fonte default do browser. Existem apenas algumas 
fontes universais utilizadas na Web, são elas:
As pessoas com maior grau de instrução apresentam uma leitura 
desconƟ nua, ou seja, lêem palavras aleatóriamente, já as pessoas 
com menos grau de instrução fazem uma leitura conƟ nua do texto. As 
pessoas leem 18%, em média, das palavras de texto na Web.?
VOCÊ SABIA
116
Comunicação Visual para Web - UNIGRAN
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Nas páginas configuradas via estilo CSS, é possível também especificar 
várias fontes organizadas de forma hierárquica, assim o browser irá buscar a 
primeira fonte declarada e caso esta não exista a próxima fonte será selecionada, 
seguindo assim a ordem da sequência em que elas foram declaradas. 
Exemplo: 
Font-family: Arial, Helvetica, Sans-serif, Tahoma;
Para suprir essa limitação, de um número restrito de fontes, utilize 
imagens no lugar do título, ou e um texto que você queira utilizar uma fonte 
diferente, mas use com moderação para não deixar sua página muito pesada. 
Outra solução seria utilizar técnicas de image-replacement via CSS, ajuda muito 
na hora de usar uma fonte diferente nos títulos. Sempre teste o resultado em 
diferentes monitores e resoluções.
Esse aplicativo é muito útil, pois além de comparar as fontes, você pode 
testar a distancia entre linhas, cores de fundo, alinhamento, dividir o texto em 
colunas, dentre outras funcionalidades. 
Dica! Há alguns anos o uso de fontes estava limitado há uma meia dúzia de famílias de 
fontes, hoje podemos uƟ lizar fontes diferentes uƟ lizando scripts CSS.
DICA! Uma ferramenta que pode auxiliá-lo na escolha das fontes é o Typetester, um 
aplicaƟ vo on-line que permite a comparação das fontes na tela, e esta disponível no 
endereço: hƩ p://www.typetester.org.
Serifa: Na 
Ɵ pografi a, as 
serifas são os 
pequenos traços e 
prolongamentos que 
ocorrem no fi m das 
hastes das letras.
Image-replacement: 
técnica, em CSS, 
uƟ lizada para 
subsƟ tuir textos por 
imagens.
117
Comunicação Visual para Web - UNIGRAN
Seção 2 - Tipos e tamanhos de fonte
1) Corpo do texto: 
Pesquisas indicam que as fontes sem serifa com o corpo do texto configurado 
em tamanho igual ou inferior a “10”, oferecem melhor capacidade de leitura que as 
fontes com serifa. 
Veja no exemplo a seguir o mesmo texto formatado com uma fonte com serifa 
e uma fonte sem serifa em tamanho 10: 
No entanto quando o corpo do texto for configurados com tamanho 
superior a “10”, a legibilidade é equivalente para fontes com ou sem serifa. 
De uma forma geral os textos configurados com fontes sem serifa são 
mais legíveis e mais rápido de ler, ao contrário dos meios impressos nos quais as 
fontes com serifas são mais indicadas. 
2) Tamanhos de texto recomendáveis:
3) Fontes adequadas para conteúdo editorial
O uso de muitas fontes nos textos de uma única página pode dificultar a 
compreensão da mensagem que pretende ser passada, assim como a hierarquização 
das informações, conforme grau de relevância, devido ao seu mal posicionamento e 
agrupamento na estrutura do site. É permitido utilizar várias fontes no mesmo projeto, 
com ou sem serifa, no entanto a combinação destas deve ser feita com bastante critério. 
O uso da fontes conciliada a recursos como negrito e itálico agregam valor a mensagem 
e contribuem na função estética e informacional.
Não utilize muitos blocos de textos, títulos e links em um espaço reduzido, 
recomenda-se que as informações importantes sejam exibidas na home, já os textos 
menos importantes devem ser colocados nas páginas internas que podem ser 
acessados através de links na home.
Time News Roman (com serifa)
Apple Inc. é uma empresa multinacional 
norte-americana que tem o objetivo 
de projetar e comercializar produtos 
eletrônicos de consumo, software de 
computador e computadores pessoais.
Arial (sem serifa)
Apple Inc. é uma empresa mulƟ nacional 
norte-americana que tem o objeƟ vo 
de projetar e comercializar produtos 
eletrônicos de consumo, soŌ ware de 
computador e computadores pessoais.
Público-alvo Tamanho em pontos
Público em geral 10 - 12
Idosos e pessoas com defi ciências visuais 12 - 14
Crianças e outros leitores iniciantes 12 - 14
Adolescentes / adultos 10 - 12
118
Comunicação Visual para Web - UNIGRAN
Seção 3 - Fundo de tela x legibilidade
A legibilidade dos textos depende do contraste da cor da fonte com a cor 
do fundo. O fundo branco com a fonte preta é uma combinação perfeita, no entanto 
não limite-se a utilizar apenas estas duas cores. O uso de cor nos textos pode realça-
los e acrescenta informações que são percebidas cognitivamente pelos usuários, no 
entanto o uso de cores em texto e fundo de tela devem ser utilizadas com critério. 
Veja o exemplo abaixo de como as escolha incorreta de cores pode comprometer a 
legibilidade do texto. 
Seção 4 - Alinhamento
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Bom contraste
Apple Inc. é uma empresa mulƟ nacional 
norte-americanaque tem o objeƟ vo 
de projetar e comercializar produtos 
eletrônicos de consumo, soŌ ware de 
computador e computadores pessoais.
Péssimo contraste
Apple Inc. é uma empresa mulƟ nacional 
norte-americana que tem o objeƟ vo 
de projetar e comercializar produtos 
eletrônicos de consumo, soŌ ware de 
computador e computadores pessoais.
119
Comunicação Visual para Web - UNIGRAN
Os alinhamentos à direita e centralizados são mais difíceis de ler, pois 
eles criam lacunas que dificultam a sequência da leitura. 
Veja um exemplo com textos utilizando estes dois tipos de alinhamento.
Seção 5 - Propriedades de texto
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Alinhamento à esquerda Alinhamento centralizado
Apple Inc. é uma empresa mulƟ nacional 
norte-americana que tem o objeƟ vo 
de projetar e comercializar produtos 
eletrônicos de consumo, soŌ ware de 
computador e computadores pessoais.
Apple Inc. é uma empresa mulƟ nacional 
norte-americana que tem o objeƟ vo 
de projetar e comercializar produtos 
eletrônicos de consumo, soŌ ware de 
computador e computadores pessoais.
120
Comunicação Visual para Web - UNIGRAN
Seção 6 - Orientações gerais quanto ao uso de textos
1) Coloque nas áreas privilegiadas as informações mais importantes:
Para que possamos assimilar melhor o conteúdo exposto vamos analisar 
o leiaute da página de principal do website O ESTADÃO, que é um portal de 
notícias referência em seu segmento.
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Como foi explanado na segunda aula desta disciplina a área mais 
privilegiada está posicionada no canto superior esquerdo da página, assim as 
principais chamadas e informações sempre devem ser colocadas nesta área. 
Observe no site O Estadão. Veja que a principal notícia do momento “Estado 
de saúde de Genoino é questão humanitária, diz Dilma” foi posicionada 
estrategicamente na área “nobre” do site.
121
Comunicação Visual para Web - UNIGRAN
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
2) Utilize estrutura textual em Pirâmide invertida: 
A pirâmide invertida é uma técnica de estruturação de texto jornalístico cujas 
as informações são dispostas em ordem decrescente conforme o grau de importância, 
desta forma as notícias mais importantes e interessantes são posicionadas em primeiro 
lugar e na sequência aparecem as notícias de menor relevância. 
Note que as informações próximas ao título principal são complementares 
a ele reforçado a consistência do conteúdo e informando ao usuário uma síntese 
dos principais fatos ao entorno do assunto principal. 
O uso desta técnica de estruturação de textos deve ser empregada em 
todos os textos do site e não apenas e chamadas de notícias. A navegação na web 
é muito dinâmica, veloz e não linear, assim para reter a atenção do usuário faça 
uma síntese do assunto e coloque no início do texto, para estimular a leitura do 
restante do texto. 
Saiba mais sobre pirâmide inverƟ da: <hƩ p://www.slideshare.
net/jessygama/o-que-pirmide-inverƟ da>.
122
Comunicação Visual para Web - UNIGRAN
3) Use títulos rótulos claros: 
Os títulos das páginas e dos textos devem informar claramente do assunto 
que será tratado no decorrer do texto e serem compreensíveis até mesmo fora do 
contexto do site, para que fique claro para os usuários que irão acessar através de 
uma ferramenta de busca por exemplo. Já os rótulos de menus e botões devem 
claramente expressar sua funcionalidade, para que o usuário não cometa erros ou 
equívocos durante a navegação. 
Nos títulos utilize recursos como negrito e itálico, para sinalizá-los e 
descarta-los do restante dos textos, assim você conduzirá a navegação do usuário 
dentro do conteúdo, e também fornecerá uma síntese dos assuntos que estão sendo 
abordados no site. 
O título é de extrema importância, pois mesmo que o texto seja 
excelente se o título não atrair atenção do usuário este não será lido. Os títulos 
preferencialmente devem ser curtos, e possuir aproximadamente 8 palavras, desde 
que não percam a eficiência da mensagem. 
4) Estruture textos longos em blocos 
Para tornar a leitura do texto mais dinâmica e atrativa os textos devem 
ser apresentados em blocos identificados por subtítulos, desta forma o usuário 
poderá visualizar a explanação do tema do conteúdo de uma forma geral e ler 
aquilo que considera relevante. O texto segmentado encoraja a leitura e informa 
com mais clareza o assunto que está sendo abordado.
5) Utilize listas para estruturar o conteúdo:
As listas são uma alternativa interessante para estruturar o conteúdo ao 
invés de parágrafos corridos. Não utilize listas muito longas nem muito curtas. 
Veja abaixo um exemplo de um texto no formato tradicional e outro em listas: 
Texto não oƟ mizado Texto escaneável
Segundo o IBGE a cidade mais populosa 
do Brasil é São Paulo, com mais de 11,8 
milhões de habitantes, e em seguida vem 
o Rio de Janeiro, com mais de 6,4 milhões. 
Salvador e Brasília possuem pouco mais 
de 2 milhões e 700 mil.
Segundo o IBGE as capitais mais populosas 
do Brasil são: 
• São Paulo
• Rio de Janeiro
• Salvador 
• Brasília 
123
Comunicação Visual para Web - UNIGRAN
6) Formate o conteúdo para torná-lo escaneável: 
Para estruturar o texto e deixar o conteúdo escaneável evite grandes 
blocos de textos, pois estes tornam a leitura cansativa e apática. Prefira blocos e 
parágrafos curtos para facilitar a leitura. Evite elementos no texto que distraia a 
atenção do leitor.
Em geral os usuários lêem 18% das palavras de um texto on-line. É 
fundamental otimizar a leitura na Web e elaborar textos claros e sucintos, assim o 
leitores se sentirão mais confortáveis e lerão os textos mais rapidamente.
7) NÃO use palavras desnecessárias: 
Segundo Jakob Nilesen a leitura na Web é 25% mais lenta que nos 
meios impressos, sendo assim redija textos sucintos e prefira palavras simples à 
rebuscadas. Seja objetivo e claro.
8) Utilize palavras chaves no texto: 
Para explicar a importância do uso de palavras chaves elucidaremos o 
seguinte exemplo: João, aluno do curso de informática, realizou uma pesquisa 
sobre usabilidade no Google. João pesquisou a palavra “usabilidade” e o buscador 
lhe retornou os seguintes resultados:
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Veja que nos resultados da pesquisa o termo “usabilidade” aparece 
grifado no título, no link e no corpo do texto. Na web as informações são no 
formato texto e escrevê-lo de forma adequada é fundamental para que o web site 
seja visitado. No módulo II desta disciplina você irá aprender conceitos sobre 
SEO ou otimização de sites e entenderá melhor sobre a importância do conteúdo 
textual nos canais online. 
Em síntese a utilização de palavras chaves no texto é extremamente 
importante para que possam ser indexadas pelas ferramentas de busca.
124
Comunicação Visual para Web - UNIGRAN
9) Mantenha o conteúdo atualizado: 
Mantenha o conteúdo atualizado e informe a data de atualização, assim 
os usuários vão se sentir motivados para retornar no site em outra ocasião para 
ver as últimas atualizações.
10) Faça correções gramaticais: 
Erros gramaticais remetem ideia desleixo e comprometem a credibilidade 
do site. A falta de cuidado e organização na apresentação do textos remetem ima 
imagem negativa ao usuário que não atribuirá credibilidade ao conteúdo que está 
sendo informado. 
Encontrar fontes adequadas para serem utilizadas no editorial do website 
nem sempre é uma tarefa fácil. Confira essa dica:
Aproximadamente 90% da navegação na web se inicia 
no Google.?
VOCÊ 
SABIA
DICA! Para aprender mais comoredigir para web faça a leitura do ebook: 
O GUIA COMPLETO DO WEB REDATOR, disponível nos materiais de aula da 
plataforma UNIGRANET. 
DICA! Veja alguns sites com fontes gratuitas para download:
<www.netfontes.com.br>. 
<http://www.dafont.com/pt/>. 
125
Comunicação Visual para Web - UNIGRAN
Retomando a conversa inicial
• Seção 1 - Tipografia
Tipografia vem 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. A escolha 
da tipografia (fontes), em um site deve suprir tanto o papel estético como funcional.
• Seção 2 - Tipos e tamanhos de fontes
As fontes com serifa são indicadas para produtos impressos, já no 
ambiente digital o emprego desta fonte por ser utilizado quando o corpo do texto 
for configurados com tamanho superior a “10”. 
É permitido utilizar várias fontes no mesmo projeto, com ou sem serifa, 
no entanto a combinação destas deve ser feita com bastante critério. O uso da 
fontes conciliada a recursos como negrito e itálico agregam valor a mensagem e 
contribuem na função estética e informacional.
• Seção 3 – Fundo de tela x legibilidade
A legibilidade dos textos depende do contraste da cor da fonte com a cor 
do fundo.
• Seção 4 – Alinhamento 
• À esquerda: recomendado para blocos de texto;
• À direita: é indicado para parágrafos curtos, a fim de causar efeitos estéticos.
• Justificado: indicado em casos que o projeto requer um bloco de texto 
quadrado ou retangular.
• Centralizado: é indicado para textos curtos, e nunca para textos longos, 
pois dificulta a leitura.
• Seção 5 – Propriedades de texto
• Negrito: utilize esse recurso para destacar textos, como títulos e subtítulos, 
mas utilize com moderação para que não perca o efeito de destaque. 
Parece que estamos indo bem. Então, para encerrar esse tópico, 
vamos recordar:
126
Comunicação Visual para Web - UNIGRAN
• Itálico: utilize este recurso para destacar textos que não possuem grau de 
importância suficiente para serem destacado com o negrito. 
• Sublinhado: utilize este recurso apenas para links.
• Letras Maiúsculas: utilize este recurso para siglas.
• Seção 6 – Orientações gerais quanto ao uso de textos
• Coloque nas áreas privilegiadas as informações mais importantes;
• Utilize estrutura textual em Pirâmide Invertida; 
• Use títulos rótulos claros; 
• Estruture textos longos em blocos;
• Utilize listas para estruturar o conteúdo;
• Formate o conteúdo para torná-lo escaneável; 
• NÃO use palavras desnecessárias;
• Utilize palavras chaves no texto;
• Mantenha o conteúdo atualizado; 
• Faça correções gramaticais; 
Sugestões de leituras
Como criar scripts CSS para utilizar diversas fontes de texto: <http://imasters.com.
br/artigo/1439/css/usando-fontes-diferentes-sem-o-auxilio-de-imagem>.
127