Design e Gestao de Web 2

BA online – Centro Universitário Belas Artes de São Paulo
Design e Gestão de Web, Mídias Digitais e Móveis
Administração Belas Artes

Dr. Paulo Antonio Gomes Cardim
Reitor
Prof. Dr. Francisco Carlos Tadeu Starke Rodrigues

Pró-Reitor Administrativo
Prof. Dr. Sidney Ferreira Leite

Pró-Reitor Acadêmico
Dra. Josiane Maria de Freitas Tonelotto

Superintendente Acadêmica
Departamento BA online
Profa. Ma. Leila Rabello de Oliveira
Coordenação
Lucas de Mattos Millan

Claudio Villa da Costa Filho
Design Instrucional
Gustavo Nogueira Pereira

João Paulo Tenório da Silva
Web Design
Gabriel Kwak
Publicação Marina de Mello Fontanelli
Este e-book é uma publicação da
Revisão de Texto
Beatriz Melhorine Basílio

Hanna Carolina Brino Barretto
Rua Dr. Álvaro Alvim, nº 90
Analise Educacional
Vila Mariana – SP
Fone: (11) 5576-7300
É proibida a venda e a
reprodução deste material sem
autorização prévia do Centro
Universitário Belas Artes de São
Paulo.
2
Educação a Distância – Centro Universitário Belas Artes de São Paulo
Profa. Ma. Denise de Paiva Tangerino
Design e Gestão de Web

Mídias Digitais Móveis
Educação a Distância
2018
Centro Universitário Belas Artes de São Paulo

Sumário
Para início de conversa 6
Módulo 2: Tipografia: variações, criação e interface com 7

outras ferramentas
Referências 42
4
Professora autora
Ma. Denise de Paiva Tangerino
Meu sonho sempre foi mudar o mun-

do, trazendo alegria e leveza por onde
eu passasse, e ser professora era ape-
nas consequência desse meu sonho.
Sou graduada e pós-graduada em
Design Gráfico, com foco em de-
sign editorial. Já no mestrado, parti
para os estudos da Comunicação e
das Práticas do Consumo, na ESPM,
visando compreender a juventude e
suas rotas de consumo individuais e cole-
tivas. Em 2011, começo minha carreira de docente
universitária e em 2014 entro para o time Belas Artes (afinal, deve
ser muito triste não ser Belas Artes). Paralelo a isso, mantenho pe-
quenas produções de audiovisual, como gosto, e minha profunda
formação em séries e Netflix sempre ativa.
Bon appétit!
5
Para início de conversa
Caro aluno, é com satisfação que lhe desejo boas-vindas

ao estudo da disciplina de Design e Gestão de Web, Mídias Digitais
e Móveis, preparada exclusivamente para seu curso. Você é meu
convidado especial para, ao longo de nossa jornada, compreender
os aspectos que caracterizam o estudo do design gráfico aplicado à
web, os pontos técnicos para a criação de algumas plataformas on-
line e, principalmente, as formas mais usuais e práticas de gestão
desses produtos digitais, essenciais para a formação de qualidade de
futuros profissionais. Afinal, independente da habilitação que você
estuda dentro da Comunicação Social, deverá ter um conhecimento
aprofundado em criação e gestão de produtos digitais.
Para tanto, ao longo de oito Módulos estruturados de maneira a

facilitar a absorção de seu conteúdo, daremos importância a objetivos
cruciais relacionados ao ambiente educacional, como fomentar uma
visão crítica e estratégica ante os meios de comunicação da web,
desenvolver um espírito criativo, dotá-lo de ferramentas básicas
e fundamentais para o desenvolvimento de peças, alinhadas ao
planejamento estratégico, e ensinar a gestão desses meios como
processos fundamentais para a ativação de campanhas e retenção de
público.
6
Do mesmo modo, abordaremos temas como: as formas básicas

do design (ponto, linha e forma) e suas aplicações relacionais; o uso
das cores em diversos suportes (impressos e digitais); morfologia e uso
coerente e eficiente das diversas tipografias existentes no mercado; o
uso de imagens e as possibilidades de edição das fotografias; criação
de marca e desenvolvimento do MIV (Manual de Identidade Visual);
aspectos gerais de criação para web (Usabilidade e Leiturabilidade);
aplicação dos aspectos imagéticos e textuais para a concepção e
aplicação em diversos suportes virtuais, especialmente sites e redes
sociais; e, por último, a gestão de todos esses aspectos. Tudo isso de
maneira leve e dialógica, com elementos que o ajudarão a conhecer o
contexto da disciplina, para que você se sinta motivado a atingir, com
sucesso, os objetivos propostos em nossos Módulos e consiga, deste
modo, êxito em suas carreiras profissional e estudantil.
7
MÓDULO 2
Tipografia: variações, criação e
interface com outras
ferramentas
Unidade 2 – Tipografia: variações, criação e interface com outras ferramentas
Objetivos
Ao término dos estudos propostos nesta Unidade, você

deverá estar apto a:
 Perceber que a tipografia tem uma importância

visual nos layouts e deve ser estudada inclusive como
imagem;
 compreender a importância da tipologia e das
aplicações das tipografias aos projetos gráficos;
 utilizar as famílias tipográficas como instrumento de
criação aplicado ao web design;
 compreender o uso da tipografia com o objetivo de
criar layouts alinhados aos briefings solicitados pelos
clientes;
 aprender a utilizar as famílias tipográficas alinhadas a
outras ferramentas de criação visual, como cor.
9
Seções
1. Tipologia e usos da tipografia

2. Tipologia e aplicação das famílias tipográficas
3. Tipografia: peso, largura, inclinação e distância
4. Relações estabelecidas entre as fontes
5. Tipografia nos suportes digitais
10
Introdução

Caro aluno,
Seja bem-vindo ao segundo Módulo de nossa disciplina
Design e Gestão de Web, Mídias Digitais e Móveis. Nele avaliaremos
os objetivos propostos, base de conteúdo das cinco seções deste
Módulo. Elas servirão de apoio para o seu aprendizado e para a cons-
trução do seu processo cognitivo.
Com participação e reflexão, você aprenderá, de maneira agra-
dável e conveniente, a utilizar as famílias tipográficas de maneira séria
e coerente aos seus objetivos mercadológicos. Ainda, saberá quais
são os diferencias de todas as tipografias existentes no mercado, qual
é a mais eficaz para a concepção de marcas e quais são os default
dos sistemas da web, como Wordpress. Sendo assim, convido-o
a tomar parte desta aventura para que possamos ampliar nossos
conhecimentos.
Bons estudos!
11
Seção 1
Tipologia e usos da tipografia
Olá, pessoal, vamos começar o Módulo no qual trataremos o assunto

tipografia, suas variações e seus usos em diferentes contextos. Mas,
afinal, qual a importância da tipografia para passarmos 5 seções
somente neste tema?
Eu responderia com muita propriedade que, dentre as ferramentas
da caixa, aquelas que trabalhamos no Módulo 1, tipografia costuma
ser a que traz maior dificuldade na hora de aplicarmos aos nossos
projetos. Apesar de existirem inúmeras fontes tipográficas e vários
sites nos quais podemos baixá-las gratuitamente, muitas vezes não
sabemos qual tem o conceito mais apropriado ao nosso projeto.
Para facilitar o entendimento deste assunto, então, recorrerei a alguns
tópicos da história do design gráfico e da publicidade que nos ajuda-
rão a afinar o olhar para essas questões.
A primeira coisa a ser abordada é que a tipografia faz parte de um

contexto histórico-cultural, e é desenhada com o fim de atender a
uma demanda mercadológica ou simplesmente como resultado de
um estilo artístico, como os cartazes do movimento punk.
Parece óbvio, mas vale sempre lembrar que a tipografia está intrin-
secamente ligada à escrita, pois só existe a necessidade de desenhar
letras quando alguém vai lê-las.
Daqui, tiramos mais uma conclusão que parece clara, contudo, muitas
vezes não paramos para pensar que quanto maior o letramento da
população, mais necessidades de material gráfico para leitura tere-
mos e, consequentemente, mais famílias tipográficas aparecerão.
12
De forma muitíssima reduzida, quase uma pílula de conhecimento,

podemos pensar que o primeiro sistema precursor do alfabeto como
conhecemos hoje foi o egípcio, associado a fé local, na qual os faraós
eram deuses.
Mais
A linguagem era considerada sagrada e poucos eram aqueles
que dominavam os hieróglifos
13
Com o tempo, o comércio se expandiu e, por isso, a necessi-

dade de padronização da comunicação surgiu como uma urgência
primária, afinal os povos precisavam definir uma linguagem unificada
para a mercantilização dos produtos, que nesse caso foi atribuído aos
fenícios.
Veja, levantamos três grandes pontos para o crescimento
do desenho das letras: o sagrado, a comunicação e o comércio.
Podemos pensar, vide a imagem, que tivemos alguns alfabe-

tos ou pré-alfabetos antigos, que não tinham a lógica de escrita oci-
dental como conhecemos hoje: hieróglifo, hierático, fenício e hebrai-
co (utilizado até os dias atuais pelos israelitas). E, posteriormente, o
grego antigo, o grego moderno, o latino e o romano.
Este último, o romano, é o que utilizamos no mundo ocidental

contemporâneo.
14
Vamos dar uma grande corrida na

história? Afinal, estamos apenas pincelan-
do alguns tópicos para nos ajudar a pensar
os tipos para nossos layouts na web.
Na Idade Média (ops, pulamos mais
de 1000 anos), existiu uma figura muito im-
portante, os monges copistas, que além de
copiarem a Bíblia (bingo, o sagrado apare-
cendo novamente), começaram a ilustrar,
com todo apuramento e detalhamento, a O versalete é muito
empegado para dar ênfase
primeira letra de cada capítulo dela, ação a determinada palavras ou
que chamamos de capitular. expressões para chamar a
atenção do leitor, ao início
A grande importância deste feito, que pode parecer banal do texto, expressões iniciais
para os dias contemporâneos, é que eles trouxeram para as letras um ou entradas de dicionários.
valor estético, isto é, a letra como uma imagem. Sem contar que, cada
vez que a Bíblia era copiada, ficava mais iluminada a ideia de que seria
necessário algum instrumento de reprodução para esse material.
A grande importância deste feito, que pode parecer
banal para os dias contemporâneos, é que eles trou-
xeram para as letras um valor estético, isto é, a letra
como uma imagem. Sem contar que, cada vez que a
Bíblia era copiada, ficava mais iluminada a ideia de
que seria necessário algum instrumento de reprodu-
ção para esse material.
Um último adendo, não é à toa que a primeira impressão que

o mundo ocidental conheceu foi a Bíblia de Gutenberg.
Afinal, qual a importância da Bíblia de Gutenberg, de
1420, para o design gráfico aplicado para a web?
Entre outras coisas, ela foi registrada em um sistema de
tipos móveis, a raiz do que conhecemos como impressora na
contemporaneidade, que nos norteia no uso, nos estilos, na aplicação
e no glossário que utilizamos na área de criação.
15
Para que houvesse a impressão era necessário que cada tipo,

letra, fosse preparada separadamente e, logo após, montada em um
quadro/moldura, o qual a segurava de forma fixa para que não se
deslocasse em todo o processo. Por isso, chamamos as letras de tipos
móveis.
Os tipos eram organizados em caixas, o que hoje conhecemos
como minúsculas ficavam nas caixas baixas e as maiúsculas nas caixas
Na tipografia, a letra
capitular é a letra que inicia
altas, expressões que utilizamos até hoje. Quando aplicamos todas as
uma obra, um capítulo ou letras em caixa alta, mas deixamos a primeira letra visualmente maior
um parágrafo, possuindo que as demais, estamos usando a técnica do versalete.
tamanho maior que o
restante do corpo do
texto, chegando a ocupar
várias linhas do corpo do
texto. A letra capitular é
detalhadamente decorada.
Uma característica que você não pode esquecer sobre a

tipografia é seu uso de serifa; fundamental para a aplicação nos
layouts.
Tipografias serifadas são aquelas que possuem uma “perna”,
ou forma construtiva, em sua base. Já as que não são estruturadas
com essa base, chamamos de sem serifa ou bastão. E, ainda, temos
mais dois tipos: as manuscritas (escritas a mão) e as fantasias (criadas
exclusivamente para o lettering de produto ou para a marca de uma
empresa).
Para facilitar o entendimento das partes que compõem
uma tipografia, deixo aqui uma imagem que servirá de glossário
de termos técnicos aplicados.
16
Fonte: slideshare.net
Na próxima seção entraremos nos usos e aplicações de cada
uma das famílias tipográficas.
17
Multimídia
O Brasil é um País conhecido pela capacidade criativa em

diversas áreas artísticas e do design, não à toa temos tantos
grafiteiros, artistas, publicitários e fotógrafos conhecidos
internacionalmente. Particularmente, eu gosto muito de três
tipógrafos, que me marcaram como profissional do design
gráfico, e eu amaria compartilhar com você esses profissionais
feras:
Tide Hellmeister – Teve como grande
contribuição nacional a percepção da
tipografia como imagem, trabalhando-a com
cores, texturas, dimensões e profundidades
diferentes. Para conhecer o trabalho do Tide,
sugiro visitar a página do Itaú Cultural.
Tony DeMarco – Tipógrafo brasileiro

que tem trabalhos reconhecidos
internacionalmente e consolidou sua
carreira brigando para que a área do design
gráfico ganhasse força no Brasil. Sugiro que
conheçam seu portfólio.
Marina Chaccur – Brasileira radicada na

Holanda, tem um trabalho super sensível e
utiliza materiais diversos na criação de suas
famílias tipográficas, o que confere à ela uma
autenticidade e a marca como um expoente
desta geração. Também sugiro conhecer seu
portfólio e segui-la nas redes sociais.
Agora é a sua vez!
Classifique as fontes tipográfica abaixo em “Bastão (sem

serifa)”, “Egípcia (com serifa)”, “Elzevir (serifa triangular) ou
Dibot (serifa simples)
1. ( ) IMG1 A. Egípcia
1–B/2–C/3–A/4–D
2. ( ) IMG2 B. Bastão
Resposta correta
3. ( ) IMG3 C. Elzerir
4. ( ) IMG4 D. Dibot
18
Seção 2
Tipologia e aplicação das famílias tipográficas
Vamos seguir em frente?
Para mim, a parte que considero mais interessante é a aplica-

ção de cada uma das famílias tipográficas nos projetos gráficos, afinal
eu gosto da prática com consistência. Para começar, peço que preste
bastante atenção em cada uma das explicações, pois serão aplicadas
nas imagens, então não faça corpo mole e veja cada um dos exem-
plos.
Segundo o Senai, um dos órgãos que mais trabalham para

a padronização das artes gráficas, podemos classificar estes estilos
tipográficos em 7 modelos, como vemos na imagem ao lado.
Cada uma destas classificações foi sendo formada historica-

mente, dentro de um contexto, para dar sentido ao que havia sido
criado.
Podemos nos basear na análise desses produtos criativos para

criar nossos próprios layouts, então aproveite os exemplos como um
pequeno guia norteador de criação.
Multimídia
Se você quer crescer em criação, é preciso que conheça o Saul

Bass. Além de ser considerado um dos maiores criadores de
vinheta para cinema, ele aplica com seriedade e criatividade
a tipografia em seus trabalhos. Tendo a dizer que seu site tem
muitos exemplos interessantes de cartaz de cinema, mas o seu
ápice do processo criativo são as aberturas em si.
Farei algumas sugestões para os aplicados:
Abertura do filme Abertura do filme O site do

Vertigo (1958) Mad Mad Mad designer
World
19
O primeiro estilo tipográfico listado na classificação do Senai,

que chamamos de Romana Antiga, é visto como um grupo de fontes
elegantes, delicadas pela sua diferença de grossura entre as hastes
e que, por possuir serifas mais leves, são ótimas para grandes textos
impressos e, por isso, a indústria editorial sempre abusou de seu uso.
Por ser muito empregado em contextos diversos, acabou se

tornando default dos sistemas informatizados e hoje já vêm instalado
em softwares de edição de texto.
Contudo, sempre tome cuidado, pois seu uso corriqueiro pode

se tornar banal sem uma pitada criativa e, também, fique esperto
quanto a leitura, pois na internet as serifas podem desaparecer.
Já a Romana Moderna, família tipográfica também serifada,

tem desenho bastante delicado, com hastes finas e serifas contínuas,
sem variação de peso.
São tipografias delicadas e luxuosas, cheias de personalidade

e força visual, sendo muito utilizadas, por tais motivos, pelo mercado
da moda e do luxo.
Preste muita atenção à sua aplicação, pois, apesar de serem

Saul Bass ótimas para criação de marcas e rótulos, sempre é necessário fazer
testes de redução para verificar sua leitura.
A Manuscrita ou Cursiva é linda,

gestual, cheia de curva e feminina, traz
a essência de fazer com a própria mão.
Traduz sofisticação e calma. Então, use
e abuse dela na criação de layouts que
tenham esses conceitos, como convites
e capas de revistas, mas tome cuidado
na aplicação para a web, pois pode se
tornar difícil para leitura, mesmo quando a utilizamos para a criação
de marcas.
20
Agora vêm as mais utilizadas, para dar

peso visual a um determinado produto
criativo, as Egípcias. Elas são pesadas,
fortes e marcantes, do tipo que se
fôssemos associar a um estilo musical, eu
as chamaria de heavy metal! São muito
utilizadas em títulos, jamais para corpo
de texto extenso, e não perdem suas
características ao serem aplicadas na
web.
As Lapidárias ou Bastões vão com tudo,
são muito versáteis, agradáveis de ler e de
fácil aplicação. São simples e uniformes,
aplicadas em textos, títulos e marcas. Servem
para leitura de textos de todos os tamanhos.
Seu maior problema é que muitas vezes sua
aplicação, se não for criativa, podem perder a
força e ser sem graça, desanimadas.

A Fantasia, como seu próprio nome diz,

traz uma imensa expressividade, pois foi criada
para um objetivo específico. Um grupo de
fontes alegóricas, que traduzem o espírito de
uma época, de um estilo, de uma tecnologia, de
uma personalidade ou de um setor. As famílias
tipográficas fantasias são ótimas para aplicação
em marcas e em produtos que possuem um
quê de época. Abuse em projetos que trazem
conceitos específicos e refinados de historicidade.
Por último, mas não menos importante, as Góticas, inspiradas no
estilo medieval, são de complexa leitura e são aplicadas em segmentos bem
específicos, como vinícolas e produtos associados aos países germânicos.
21
Multimídia
Se você está se apaixonando por

tipografia, como eu, sugiro que aproveite
um fim de semana e faça uma maratona
de Netflix.
Uma das séries que chegaram no

Netflix em 2016 foi o Abstract,
documentário que traz a cada capítulo
um designer e como ele pensa a
aplicação das imagens.
Além de muito bem produzido, o roteiro

é bárbaro e já podemos ficar de olho na
edição, tema do nosso próximo Módulo.
Caso você queira assistir apenas um episódio, sugiro o 6, na qual

Paula Sher dá um show de criação. Costumo falar que onde não
há repertório não há inovação. Aproveite!
Eu sei que são muitos estilos, muitas classificações e muitos

exemplos e que tudo pode ficar um pouco confuso quando estudamos
de uma vez só.
Isso é super normal!
Vamos, ao longo das próximas seções e Módulos, aplicar

muitos desses conhecimentos, o que facilitará na prática da criação.
Fique tranquilo e faça o exercício proposto com seriedade, pois ele o
ajudará a crescer em repertório visual.
Multimídia
Você irá se aprofundar no estudo da legislação aplicada à

publicidade e ao design, mas gostaria de enfatizar que as fontes
tipográficas são desenvolvidas por criativos e seu uso deve ser
pago.
Alguns sites disponibilizam fontes sem autorização
e seu uso comercial pode acarretar em processo,
então não brinque com os direitos autorais.
Na dúvida, dê preferência a fontes livres que podem
ser baixadas pelo site Google Fonts, que foi um achado
incrível para nossa área.
22
Agora é a sua vez!

Assinale com Verdadeiro ou Falso as asserções abaixo
1. ( ) É pesada, forte e marcante, do tipo que se fôssemos
associar a um estilo musical, eu a chamaria de heavy metal!
2. ( ) Seus caracteres são lindos, gestuais, cheios de curva e
femininos, trazem a essência de fazer com a própria mão.
3. ( ) Vai com tudo, é muito versátil, agradável de ler e de fácil
aplicação. É simples e uniforme, aplicada em textos, títulos e
marcas.
4. ( ) Como seu próprio nome diz, traz uma imensa
expressividade, pois foi criada para um objetivo específico.
5. ( ) Família tipográfica também serifada, tem desenho
bastante delicado, com hastes finas e serifas contínuas, sem
variação de peso.
1–A/2–B/3–C/4–D/4–E
A. Egípcia
B. Fantasia
C. Lapidária ou Bastão
Resposta correta
D. Manuscrita ou Cursiva
E. Romana Moderna
23
Seção 3
Tipologia e usos da tipografia
Já sabemos muitas coisas

sobre tipografia, conhecimento
que nos dá uma boa base de cria-
ção. Contudo, agora refinaremos
nosso olhar.
De forma geral, uma boa

família tipográfica, desenvolvida
por um tipógrafo com conheci-
mentos aprofundados da área, possuirá muitas variações pensadas
por meio do peso de cada letra.
Por esse motivo, chamamos de família, pois possui uma varia-

ção grande de espessuras.
Para compreender melhor a profundidade do que estou falan-

do, utilizarei como exemplo a fonte Libre Franklin, a qual baixei no
site do Google Fonts.
Primeiro temos a fonte inteira, com todos os caracteres, pois

muitas vezes, ao baixarmos uma fonte de sites menos sérios, encon-
traremos os alfabetos pela metade ou sem os acentos.
Chamamos de regular a fonte padrão, como se fosse o zero, a ma-
triz, base primária. A partir daí, podemos acrescentar pontos ou tirar pon-
tos, tornando-a mais pesada ou mais fina.
A versão mais fina chamamos de thin e a mais pesada de black,
porém temos uma gama de variações entre as duas. O peso da fonte esco-
lhida servirá para pensarmos em destaques, ou seja, aquilo que no design
chamamos de hierarquia visual.
24
Antes de começar o trabalho, veja se a fonte

está completa e se não gerará problemas para seu
processo de criação futuro.
Pare para reparar em

todas as publicações que você
já viu.
Elas costumam ter a

seguinte lógica: quanto mais
importante uma informação,
maior e/ou mais pesada deve ser
a tipografia, como os títulos que
ocupam uma área maior da pági-
na.
Da mesma forma, o título de um filme tem
maior destaque do que o diretor.
Nas redes sociais, a lógica é a mesma, nos posts as informações em
destaque são grandes, e as demais em menor proporção.
Também, o peso da fonte fará toda

a diferença na leitura de um texto,
que denominamos corpo de texto no
design editorial.
Um texto em black faz com que a

mancha visual, o peso gráfico que o
texto tem em um layout, fique muito
pesado e, talvez, uma thin dificulte a
leitura por ser leve demais.
Talvez você esteja se perguntando qual a melhor equação

entre as fontes e seus pesos.
Eu diria que o melhor ponto é aquele que traz um equilíbrio

ao layout, que não seja intenso demais a ponto de cansar, nem leve
demais a ponto de não segurar o leitor.
Como toda regra tem exceção, quan-

do o trabalho tem como base um determina-
do grupo ou estética, tudo isso pode mudar.
Por exemplo, se estamos fazendo um

cartaz para um show de rock, a família tipo-
gráfica utilizada pode ser muito mais pesada;
quando arquitetamos algo que envolva velo-
cidade, itálico pode ser um bom uso. Portan-
to, o uso das fontes segue o conceito do que
está sendo solicitado pelo cliente.
25
Na prática
Uma das dicas que mais gosto de dar, quando entramos em
softwares, é de sempre transformar a fonte em vetor, o que
significa que ela não será mais uma fonte e se transformará
em um desenho construído por linhas, vetores. Esses vetores
podem ser alterados no próprio software que aqui, no caso, será
o Illustrator.
Vamos lá:
Escreva o texto > selecione-o com a seta preta (a primeira ferra-

menta da lateral) > na barra superior clique em Tipo > Criar
contornos. Pronto, o texto estará vetorizado.
Para conseguir fazer alteração, em cima do texto clique em

Command + U (ou ungroup) e os pontos estarão prontos para
mexermos.
Boa sorte!
Vamos avançar um pouco mais?
Que tal ligarmos dois recursos da nossa caixa de ferramentas

(de acordo com o software que você estiver utilizando, por exemplo)
para aumentar nossas possibilidades de criação gráfica?
Vamos ligar cor e tipografia?
Aqui já estamos entrando em tipografia e web, afinal, o

contraste entre fundo e texto é fundamental para segurar o usuário
em seu site ou dispositivo.
O peso da tipografia terá uma variação dependendo do fundo

no qual ele estará inserido.
No exemplo que disponibilizei aqui, uma mesma fonte em sua

forma thin ou light tem um peso visual que traz uma grande leveza,
enquanto que em seu modelo black fica muito mais pesado do que
com o fundo branco.
Vamos fazer o teste com fundo frio e escuro, como com o

azul? E a mesma variação de tipografia em fundo branco ou em
fundo preto?
Que tal olharmos mais atentamente?
26
Mais
O fundo quente tende a
expandir, logo as letras
tendem a ter menos contraste
com o fundo, enquanto que o
fundo azul é mais estático e,
por isso, dá a sensação de que
o contraste é maior.
No branco, as letras reinaram
sozinhas, já no de cor preta,
o fundo tem mais contraste
e chama muito mais atenção.
Quanto mais bold/black maior o contraste, mas no fundo preto
elas ficam gritantes.
Por último, vamos pensar a distância entre as letras, pois ela

dará um resultado de proximidade ou distanciamento.
Uma boa fonte é construída com o fim de servir para texto,

assim o espaço entre as letras foi pensado para a leitura de textos
corridos, corpo de textos.
Especialmente para a criação de marcas, o espaço entre as

letras tende a ser reduzido em relação ao de corpo de texto.
Para usarmos a denominação correta, chamamos o espaço

médio entre as letras de trecking e o espaço manual entre eles de
kerning.
27
Mais
O kerning e o trecking
podem ser alterados no
Illustrator de maneira
bem simples.
Selecione o texto que deseja alte-

rar o espaço entre as letras > vá
em caracteres > à esquerda estará
o trecking e à direita o kerning.
Na imagem abaixo mostro o local na qual você encontra a aba

caractere.
Muito bem!
Espero que tenha gostado desta seção!
Lembre-se, coloque em prática o que você aprendeu.
Multimídia
Uma das coisas mais geniais que assisti no universo dos docu-
mentários de design foi a história da fonte Helvética. Você deve
estar pensando que estou falando isso apenas para incentivá-lo
a ver esse tipo de material, mas falo porque você não consegue
imaginar o quanto uma única fonte tipográfica pode ser utilizada
de tantas maneiras, de cartazes a sinalização de rua.
Sem dúvida, essa é uma fonte que abre diversas possibilidades

de uso. Genial!
Título Original: Heveltica, A Documentary Film by Gary Hustwit

Gênero: Documentário
Ano de Lançamento (Suíça): 2007
Direção: Gary Hustwit
Produção: Gary Hustwit
Duração: 82 minutos Idioma: Inglês
Veja o trailer aqui.
28
Agora é a sua vez!

Assinale com Verdadeiro ou Falso as asserções abaixo
A. ( ) A versão mais fina chamamos de thin e a mais pesada de
black, porém não temos uma gama de variações entre as duas.
B. ( ) Devemos pensar na distância entre as letras, pois ela dará
um resultado de proximidade ou distanciamento.
A–F/B–V/C–F/D–V
C. ( ) O fundo quente tende a contrair, logo as letras tendem a
ter mais contraste com o fundo, enquanto que o azul é menos
Resposta correta
estático e, por isso, dá a sensação de que o contraste é maior.
D. ( ) O peso da tipografia terá uma variação dependendo do
fundo no qual ele estará inserido.
29
Seção 4
Relações estabelecidas entre as fontes
Como comunicadores, temos que usar as imagens como estra-

tégias para comunicar uma mensagem clara e específica aos nossos
leitores.
Muitos alunos acreditam que, ao conseguirmos uma imagem

visualmente interessante, já chegamos ao nosso resultado, indepen-
dente do que está sendo transmitido. Outros ficam tão presos na
estratégia que se esquecem de trabalhar o fator estético.
Um bom layout, seja um site

ou um anúncio, consiste na ligação
entre a forma e a função, como já
falamos anteriormente.
Para chegarmos nesses resul-

tados, podemos nos valer de algu-
mas técnicas gerais, que nos ajudam
na criação independente do suporte
que utilizaremos.
Multimídia
Eu posso lhe dizer que poucas coisas

me chamaram tanta atenção este ano
quanto a descoberta do livro Tipos na
tela, da Ellen Lupton.
Talvez você não goste tanto de ler e

curta muito mais criar, mas prometo
que esse livro, de leitura tão curta,
mudará sua maneira de criar, afinal
são as teorias aplicadas que nos fazem
pensar em coisas do dia a dia, como o
tamanho de tipografia para web.
Quer crescer em criação para suportes digitais? Então, esse é

o caminho. LUPTON, Ellen. Tipos na tela.
Neste caso, focando na tipografia, gostaria de norteá-lo com três

frentes que sempre me ajudam na hora de construir produtos visuais, ou
melhor, duas delas são estratégias, concordância e contraste, a outra é erro,
mas que nos vale de observação bem séria a ser seguida.
30
Concordante
Chamamos de concordante quan-
do em um layout utilizamos apenas uma
família tipográfica com variações de
tamanho, estilo e peso.
Talvez você utilize a versão em itáli-

co ou negrito da mesma fonte ou, ainda,
coloque um tamanho maior nos títulos e
use palavras CAIXA ALTA ou caixa baixa. A
estética criada acaba sendo calma, formal
e muitas vezes até chata.
Conflito
Um design tem conflito quando se adotam duas ou mais
fontes SIMILARES na mesma página, mas que não são efetivamente
diferentes ou iguais.
Quando se colocam duas fontes parecidas (mas não iguais)

juntas, o nosso olhar entende como um erro, não como uma estraté-
gia de comunicação visual. Evite dúvidas no visual do trabalho, assim
o conflito deve ser evitado.
Contraste
O contraste marcante atrai os olhos. Uma das maneiras mais
eficazes, simples e satisfatórias de se conferir contraste a um design, é
justamente através da tipologia. Essa é a estratégia mais interessante,
pois dá muita força ao material.
Não deixa dúvidas da intenção do DESIGNER.
As três técnicas que vimos podem ser facilmente aplicadas a

web, pois cada vez mais as tipografias são responsivas, isto é, seus
tamanhos vão variar dependendo de como o usuário está utilizando
a interface, por exemplo o tablet no qual as informações se reorgani-
zam caso ele seja movido do horizontal para o vertical.
Guarde o termo responsivo, pois será muito utilizado ao

longo do curso para pensarmos formatos e grids.
31
Multimídia
Todo criativo sempre tem seus conteúdos especiais na manga.

Nos momentos em que falta inspiração, sempre recorremos a
alguns repertórios na esperança de que alguma inspiração nos
venha… Esperamos que o outro mundo nos mande uma luz,
hehe.
Um dos sites que mais utilizo para inspiração é o Design Culture,

pois sempre me abre a mente sobre possibilidades que nunca
pensei e, o melhor de tudo, todos os conteúdos estão em portu-
guês.
Vou deixar de aperitivo para você dois artigos super gostosos

sobre tipografia.
Por favor, deguste-os com muita calma e prazer!
Bon appétit!
Sobre tipos para leitura
Avalanche tipográfica
Vamos dificultar um pouquinho mais?
Existem dois tipos de layout responsivo:
No design líquido, segundo Ellen Lupton, “o fluxo de elementos é

ajustado de acordo com a largura do navegador, tendo fluidez.
Já nos adaptativos a resposta vem em passos fixos, com base no
tamanho ou na orientação do navegador ou dispositivo”. Desta forma, em
um layout líquido, o tamanho da fonte se ajustará ao tamanho da tela, das
colunas que estão sendo utilizadas.
No adaptativo, o que muda é a quantidade de colunas e os textos
podem ou não permanecer do mesmo tamanho. Ultimamente, o que mais
vemos como web design são os responsivos adaptativos, como o Wor-
dpress que, por exemplo, disponibiliza essa função para seus templates
mais comuns.
32
Multimídia
Está empolgado com criação?
Que tal criar sua própria família tipográfica?

Isso é totalmente possível pelo site: fontstruct.com. Além de
conseguir desenhar as letras, ainda será possível fechá-la para
usar em seu computador.
Bom uso!
Agora é a sua vez!

Complete a frase abaixo.
líquido / largura / adaptativos / tamanho

No design ............................................., segundo Ellen Lupton, “o
fluxo de elementos é ajustado de acordo com a ...............................
do navegador, tendo fluidez. Já nos ............................................. a
Resposta correta
resposta vem em passos fixos, com base no .......................................
ou na orientação do navegador ou dispositivo”.
33
Seção 1
Tipografia nos suportes digitais
Em um período anterior à web e aos suportes digitais diver-

sos, como o mobile, a relação entre o leitor e o produto editorial era
completamente diferente, pois não havia uma interação concreta na
qual o leitor interagia com o produto.
Por mais que alguns livros tentassem construir esse ambien-

te participativo, no qual o leitor era convidado a fazer determinadas
atividades, não chegou ao que hoje transforma o leitor em usuá-
rio, isto é, em participante ativo que escolhe o caminho a percorrer
dentro da interface.
Na verdade, um dos maiores estudos realizados pelos profis-

sionais de redes sociais digitais é o de entender qual o percurso que
os usuários fazem dentro dos sites comerciais, pois, uma vez que
entendido este fluxo, fica mais fácil propor campanhas e conteúdos.
Exemplo interessante, que podemos

pegar para nos nortear nesta discussão, é o
livro digital, ou seja, aquele que podemos ler
em nossos celulares, tablets ou computado-
res, e que são cada vez mais comuns entre os
jovens por conta das diversas facilidades.
Esses e-books podem ter diversas estru-

turas, que vão desde as mais simples (uma coluna
com apenas texto) até as mais detalhadas, com inserção de imagens
e vídeos.
Aqueles que trabalham com colunas fixas acabam utilizando

a técnica de leitura linear, na qual há um formato fixo que conduz
o leitor em uma direção só, não havendo outras possibilidades ao
longo da leitura (LUPTON, 2015, p. 80).
Neste modelo de edição, há uma enorme necessidade em

aplicar a hierarquia dos tipos para dar destaque aos títulos, subtítu-
los e demais informações relevantes. Ótimo lugar para aplicarmos a
técnica de concordância.
34
Já em outras plataformas, como Google Books e sites de notí-

cias, o conteúdo não está disposto linearmente, dando abertura para
uma leitura seletiva, na qual procuramos exatamente o que quere-
mos dentro do conteúdo, pulando partes, procurando palavras-cha-
ves, abrindo links ou até mesmo assistindo vídeos ao longo do texto.
Esta modalidade de leitura

permite uma maior interatividade
com o leitor, afinal ele tem total
controle sobre como e quando
quer obter determinadas informa-
ções (LUPTON, 2015, p. 82).
Multimídia
Inúmeros alunos me procuram para pedir dicas

de cursos on-line e presenciais para aprende-
rem softwares.
Ultimamente, os melhores cursos que tenho

conhecido são os oferecidos pelas escolas
on-line patrocinadas pelas empresas de redes
sociais digitais.
Deixo a dica do Linkedin Learning, que possui vários tutoriais

dos softwares da Adobe e é super completo para outras áreas
também. Uma outra boa opção é o Canal Adobe Creative Cloud,
que não traz a lógica de um curso passo a passo, mas possui
vários tutoriais bacanas de tendências de design e construção de
imagem.
Divirtam-se!
35
Além de pensarmos a tipografia como estímulo à leitura, que agre-

gará fatores ergonômicos como legibilidade, podemos pensá-la como in-
formação visual, isto é, como imagem que traz conceitos embutidos.
Uma tipografia bem aplicada pode conduzir o leitor a outras partes
do texto, chamá-lo para assistir um determinado conteúdo, que está em
outra página, convidá-lo para clicar no link de um vídeo, bem como mantê-
-lo interagindo com sua marca.
A maneira como o texto será disponibilizado em relação às ima-
gens fará com que seu leitor/usuário fique ou não mais tempo no site do
seu cliente.
Ellen Lupton (2015, p. 88), lembra a questão dos conteúdos

orbitais, aqueles que selecionamos se queremos ler agora ou depois,
salvar o conteúdo ou deletá-lo, que nos permitem comentar e deixar
arquivado nossas opiniões.
De certa forma, o Facebook nos permite guardar links para

lermos mais tarde ou como um banco de informações e referências,
trabalhando na ideia de conteúdos orbitais.
A única coisa que devemos ter muito cuidado é para não

distrairmos o leitor. Muitos alunos, na angústia de não deixar espaços
em branco, acabam enchendo o layout de imagens, famílias tipográ-
ficas, ícones e afins, deixando tudo tão poluído e de mal gosto que o
usuário tenta evitar ficar naquela página.
O criativo se sente tão vazio com o branco da tela que acaba

utilizando fontes imensas, com tamanho de título de jornal impres-
so, para preencher o espaço. Calma, amigo, podemos deixar espaços
livres, de respiro visual, e criar um ambiente onde o leitor sentirá mais
prazer em ler.
36
Quando penso em jornal impresso ou revista,

proponho sempre que se utilize como base para corpo
de texto no máximo 12pt (sei que, à primeira vista, isso
poder chocante, pois parece bastante pequeno para lei-
tura).
Já para título, chamariz para o texto, eu uso tama-
nhos bem maiores e, na maioria dos casos, mais pe-
sadas, como bold e black.
Faça você mesmo o teste: abra um arquivo no sof-
tware que se sentir mais familiarizado e escreva uma
frase com o tamanho 10pt e depois a mesma frase
com 14pt. Envie-se o arquivo por e-mail e o abra no celular.
Qual conclusão você chegou?
Dá para ler?
Não precisamos colocar o texto do tamanho de um outdoor

para que o leitor preste atenção.
37
Multimídia
Uma das técnicas que uso para que o texto não sofra modifica-
ções ao salvar o meu arquivo é a rasterização, na qual o texto é
transformado em imagem bitmap.
Para facilitar o entendimento, segue o link para uma videoaula

de Photoshop
Como toda regra, vamos pensar na exceção. Em projetos

voltados para um público mais velho, especialmente idosos, temos
que caprichar no tamanho e no peso das fontes, pois a capacidade de
leitura nesta idade já está diminuta.
Outra dica, pense no contraste do texto com o fundo, pois

algumas cores podem ficar agressivas demais caso a tela do monitor
ou mobile seja muito iluminado.
Sempre pense que estamos criando para diversos tipos de equipa-
mentos, que terão uma imensa variação de cores e iluminação. Seu projeto
pode ficar muito prejudicado caso não haja esse cuidado.
38
Agora é a sua vez!
Complete a frase abaixo.
Além de pensarmos a ............................................. como es-

tímulo à ............................................., que agregará fatores
ergonômicos como .............................................podemos
pensá-la como informação visual, isto é, como imagem
tipografia / leitura / legibilidade / conduzir / marca

que traz conceitos embutidos.
Uma tipografia bem aplicada pode ..........................................

... o leitor a outras partes do texto, chamá-lo para assistir
a um determinado conteúdo, que está em outra página,
Resposta correta
convidá-lo para clicar no link de um vídeo, bem como
mantê-lo interagindo com sua ..............................................
39
Recapitulando
Você aprendeu, neste Módulo, como escolher e aplicar a

tipografia de forma coerente e efetiva em seu projeto. Para iniciar
nossa aventura tipográfica, estudamos, na seção 1, um pouco da
história da tipografia a fim de entender como foi atribuído à letra um
valor estético, isto é, a visão da letra como imagem. Vimos, também,
como os primeiros processos de impressão foram decisivos para a
concepção da letra como tipos móveis e para sua organização do
modo como conhecemos hoje: caixas baixas, caixas altas, a técnica do
versalete, o uso de serifa e a separação de famílias tipográficas.
Na seção 2, identificamos quais são as famílias tipográficas e

quais os melhores meios para a aplicação de cada uma. Em seguida,
na seção 3, refinamos o nosso olhar ao explorarmos como o peso, a
largura, a inclinação e a distância das letras influenciam o processo de
criação. Com a seção 4, entendemos a importância de nos utilizarmos
de estratégias para comunicar uma mensagem clara e específica aos
nossos leitores e quais são as relações estabelecidas entre as fontes.
Por fim, na última seção, vimos como utilizar a tipografia nos suportes
digitais e como isso agregará fatores ergonômicos como legibilidade.
Neste Módulo, pudemos, então, pensá-la como informação visual, isto
é, como imagem que traz conceitos embutidos.
Ainda tem muito mais a ser aprendido e, caso você tenha o

desejo de se aprofundar ainda mais neste tópico, sugiro que leia nossa
bibliografia básica e complementar. Muito obrigada pela viagem que
fizemos juntos até aqui.
A gente se vê no próximo Módulo.
Obrigada!
40
MÓDULO 3
Imagem: como trabalhá-las no
contexto da web
Referências
Módulo 2
BRINGHURST, Robert. Elementos do estilo tipográfico. São Paulo:

Cosac Naify, 2005.
CLAIR, Kate; BUSIC-SNYDER, Cynhtia. Manual de tipografia: a história,

as técnicas e a arte. Porto Alegre: Bookman, 2009.
FARIAS, Priscila. Tipografia digital. Rio de Janeiro: 2AB, 1998.
FRUTIGER, Adrian. El libro de la tipografía. Barcelona: Gustavo Gili,

2007.
GRUSZYNSKI, Ana Cláudia. Design gráfico: do Invisível ao Ilegível.

São Paulo: 2AB, 2000.
KEEDY, Jeffery. The rules of typography according to crackpots

experts. In: Looking closer 2: critical writings in graphic design.
BEIRUT, Michael Beirut (org.) et al. New York: Alltworth Press and
American Institute of Graphic Arts: 1997, p.27-31.
KLEIN, Simo. Achieving good legibility and readability on the web.

Disponível em: <http://klepas.org/achieving-good-legibility-and-
readability-on-the-web/#notebook>. Acesso em: 2 mai. 2012.
LUPTON, Ellen. Pensar com tipos: Um guia para designers, escritores,

editores e estudantes. São Paulo: Cosac Naify, 2006.
__________. Tipos na tela. São Paulo: Gustavo Gili, 2015.
NIEMEYER, Lucy. Tipografia: uma apresentação. Rio de Janeiro: 2AB,

2010.
PERFECT, Christopher; AUSTEN, Jeremy. The complete typographer.

London: Wuatro, 2001.
ROCHA, Claudio. Tipografia comparada – 108 fontes clássicas

analisadas e comentadas. São Paulo: Rosari, 2005.
RUDER, Emil. Typography: a manual of design. Suíça: Zollikofer et co.

ag, 1967.
SAMARA, Timothy. Guia de tipografia. Porto Alegre: Bookman, 2011.
42
BA online – Centro Universitário Belas Artes de São Paulo

Design e Gestao de Web 2

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Design e Gestao de Web 2

Enviado por

Direitos autorais:

Formatos disponíveis

BA online – Centro Universitário Belas Artes de São Paulo

Design e Gestão de Web, Mídias Digitais e Móveis

Administração Belas Artes

Prof. Dr. Francisco Carlos Tadeu Starke Rodrigues

Prof. Dr. Sidney Ferreira Leite

Dra. Josiane Maria de Freitas Tonelotto

Lucas de Mattos Millan

Gustavo Nogueira Pereira

Beatriz Melhorine Basílio

Design e Gestão de Web

Centro Universitário Belas Artes de São Paulo

Para início de conversa 6

Módulo 2: Tipografia: variações, criação e interface com 7

Meu sonho sempre foi mudar o mun-

Para início de conversa

Caro aluno, é com satisfação que lhe desejo boas-vindas

Para tanto, ao longo de oito Módulos estruturados de maneira a

Do mesmo modo, abordaremos temas como: as formas básicas

Ao término dos estudos propostos nesta Unidade, você

 Perceber que a tipografia tem uma importância

1. Tipologia e usos da tipografia

Olá, pessoal, vamos começar o Módulo no qual trataremos o assunto

A primeira coisa a ser abordada é que a tipografia faz parte de um

De forma muitíssima reduzida, quase uma pílula de conhecimento,

Com o tempo, o comércio se expandiu e, por isso, a necessi-

Podemos pensar, vide a imagem, que tivemos alguns alfabe-

Este último, o romano, é o que utilizamos no mundo ocidental

Vamos dar uma grande corrida na

Um último adendo, não é à toa que a primeira impressão que

Para que houvesse a impressão era necessário que cada tipo,

Uma característica que você não pode esquecer sobre a

O Brasil é um País conhecido pela capacidade criativa em

Tony DeMarco – Tipógrafo brasileiro

Marina Chaccur – Brasileira radicada na

Agora é a sua vez!

Classifique as fontes tipográfica abaixo em “Bastão (sem

Vamos seguir em frente?

Para mim, a parte que considero mais interessante é a aplica-

Segundo o Senai, um dos órgãos que mais trabalham para

Cada uma destas classificações foi sendo formada historica-

Podemos nos basear na análise desses produtos criativos para

Se você quer crescer em criação, é preciso que conheça o Saul

Farei algumas sugestões para os aplicados:

Abertura do filme Abertura do filme O site do

O primeiro estilo tipográfico listado na classificação do Senai,

Por ser muito empregado em contextos diversos, acabou se

Contudo, sempre tome cuidado, pois seu uso corriqueiro pode

Já a Romana Moderna, família tipográfica também serifada,

São tipografias delicadas e luxuosas, cheias de personalidade

Preste muita atenção à sua aplicação, pois, apesar de serem

A Manuscrita ou Cursiva é linda,

Agora vêm as mais utilizadas, para dar

A Fantasia, como seu próprio nome diz,

Se você está se apaixonando por

Uma das séries que chegaram no

Além de muito bem produzido, o roteiro

Caso você queira assistir apenas um episódio, sugiro o 6, na qual

Eu sei que são muitos estilos, muitas classificações e muitos

Isso é super normal!

Vamos, ao longo das próximas seções e Módulos, aplicar

Você irá se aprofundar no estudo da legislação aplicada à

Alguns sites disponibilizam fontes sem autorização

e seu uso comercial pode acarretar em processo,