TIPOGRAFIA DIGITAL

TIPOGRAFIA
APLICADA
Autor: Me. Gabrie l Darc in Alsouza
R ev i s o r : E dn i l t o n S i l v e s t r e Co s t a

Tipografia em
ambientes
digitais
Em 1989, o cientista britânico Tim Berners-Lee concebeu o que seria
a internet no documento chamado “Information Management: a
Proposal” (“Gestão da Informação: uma Proposta”). Inicialmente, a
proposta não foi aceita, sendo considerada vaga, porém promissora.
Após alguns anos de estudo e desenvolvimento, Berners-Lee
desenvolveu as tecnologias que usamos até hoje para acessar a
internet: HyperText Markup Language (HTML), Uniform Resource
Identifier (URI) e Hypertext Transfer Protocol (HTTP). Após isso, a
internet se espalhou rapidamente e passou a ser incorporada na
vida das pessoas (WORLD..., 2021).
Cardoso (2013) afirma que é impossível negar a presença e
influência da internet em nossas vidas:

Hoje, para o mal e para o bem, não conseguimos mais

escapar da onipresença da rede virtual que apelidamos
de internet. Mesmo quem não tem acesso direto a ela
— o que é a maioria dos habitantes do planeta — é
governado por instituições e agências que operam por
meio dela, os quais são cada vez mais regidos por sua
lógica e regras peculiares. Tanto é a rede um fato da
contemporaneidade que, poucas décadas após sua
criação, quase ninguém consegue mais imaginar como
seria o mundo sem ela (CARDOSO, 2013, p. 177).

Desde seu surgimento, os computadores e a internet mudaram

radicalmente, o que envolve as tecnologias que possibilitam o
acesso à internet, a capacidade da web e as transformações nas
interfaces e, consequentemente, na relação entre usuário e
usabilidade. Se antes os computadores eram grandes, espaçosos,
lentos e limitados, com o tempo, tornaram-se mais potentes e
portáteis, alcançando a comodidade de smartphones que utilizamos
atualmente (KRUG, 2014b).

O desenvolvimento de computadores individuais e da internet criou

uma demanda para a criação de interfaces cada vez mais amigáveis
e fáceis de serem utilizadas. Do ponto de vista comercial, a interface
é um fator fundamental que possibilitou a adesão das pessoas às
tecnologias digitais. Se antes os usuários de computadores eram
basicamente cientistas que possuíam algum tipo de treinamento
para utilizá-los, as interfaces democratizaram o acesso às
tecnologias, permitindo que pessoas com cada vez menos
instruções especializadas pudessem se beneficiar dos diversos
recursos disponíveis.

As interfaces hoje são cada vez mais dinâmicas, intuitivas, claras,

rápidas e responsivas. As disciplinas de usabilidade, experiência do
usuário e design centrado no usuário estão sendo mais
reconhecidas e valorizadas. De fato, a usabilidade de um website é
um fator crítico para as empresas, pois é elemento de diferenciação
da empresa e uma estratégia competitiva. “Hoje, as pessoas
esperam muito dos Websites e cada vez menos aceitam um projeto
ruim” (NIELSEN; LORANGER, 2007, p. xvii).

A usabilidade está relacionada às características ergonômicas das

interfaces; à atitude e ao esforço mental dos usuários; ao
desempenho de atividades através da interface; e ao contexto de
uso das interfaces (DIAS, 2007). Corroborando com Dias,
a International Organization for Standardization (ISO, 2018) define
usabilidade como a medida na qual um sistema, produto ou serviço
pode ser utilizado por usuários específicos para atingir metas
especificadas com eficácia, eficiência e satisfação em um contexto
de uso determinado.

Krug (2014b) sustenta uma concepção de usabilidade mais alinhada

com as discussões mercadológicas contemporâneas, demonstrando
um alinhamento maior com o que hoje é chamado de experiência
do usuário. Krug afirma que a “lei de ouro” da usabilidade é evitar
que o usuário pense, isto é, “uma pessoa na média (ou mesmo
abaixo dela) será capaz de descobrir como usá-la para desempenhar
algo sem obter ônus maiores que os bônus” (KRUG, 2014b, p. 7).
Evitar que o usuário pense, contudo, não tem apenas o aspecto
utilitário, mas também mercadológico.

Segundo Cybis, Betiol e Faust (2010),

A experiência do usuário é um conjunto de sensações e

sentimentos vivenciados pela pessoa, relacionados ao
uso de um produto ou serviço. O que desencadeia essa
experiência é a interação com esse produto ou serviço
[...] Ela é individual e não um atributo do objeto da
interação. Desta forma, não se pode falar em projetar
“A” experiência do usuário, mas sim “PARA” a experiência
do usuário. A interação acontece de formas diferentes,
em diferentes momentos. Pode ter início até mesmo
antes de um contato visual, quando o que existe é uma
expectativa, idealização da interação, construída a partir
de relatos de outras pessoas, de experiências similares
vividas anteriormente, de informações coletadas (CYBIS;
BETIOL; FAUST, 2010, p. 360).
A experiência do usuário, portanto, tem relação com o uso, mas
também com os aspectos de venda. Como defendido por Haug
(1989, 1997), a venda das mercadorias não ocorre pela utilidade
delas, mas pela promessa de utilidade apresentada por elas ao
consumidor. Nesse sentido, a experiência do usuário é tanto a
instauração de uma expectativa que desencadeia o uso/compra
como também sua consolidação no uso.

A tipografia é um elemento essencial para a construção da

usabilidade e da experiência do usuário. Ela auxilia a compor as
interfaces e desempenha um papel em sua funcionalidade e
estética. Deste modo, é vital utilizá-la levando em consideração tais
aspectos apresentados.

Lévy (1993) apresenta uma das grandes problemáticas das

interfaces digitais: o hipertexto da internet permite um
deslocamento quase instantâneo do usuário. Em um clique, o
usuário pode sair de um local e ser direcionado a um outro bastante
distante do local em que estava, com informações totalmente
díspares. A não linearidade da internet (hipertexto) é uma das
principais vantagens da web, contudo, instaura um novo problema
de auxiliar o usuário a compreender os deslocamentos do
hipertexto. A navegação, portanto, é um elemento que deve auxiliar
o usuário a compreender a especialidade do ciberespaço. O autor
completa:

A referência espacial e sensoriomotora que atua quando

seguramos um volume mas mãos não mais ocorre
diante da tela, onde somente temos acesso direto a uma
pequena superfície vinda de outro espaço, como que
suspensa entre dois mundos, sobre a qual é difícil
projetar-se. É como se explorássemos um grande mapa
sem nunca podermos desdobrá-lo, sempre através de
pedaços minúsculos. Seria preciso então que cada
pequena fração de superfície trouxesse consigo suas
coordenadas, bem como um mapa em miniatura com
uma zona acinzentada indicando a localização desta
fração (“Você está aqui”). Inventa-se hoje toda uma
interface da navegação, feita de uma infinidade de
 microdispositivos de interface deformados, reutilizados,
desviados (LÉVY, 1993, p. 22).

Lévy destaca que a navegação é fundamental para a utilização de

interfaces digitais que são marcadas pelo hipertexto. Se o hipertexto
possibilita a reunião de um número de informações maiores e
heterogêneas que o leitor deve selecioná-las o tempo todo, cabe à
interface cumprir o papel primordial de sinalizar, guiar e mapear
esse percurso. Os estudos de usabilidade e experiência do usuário,
em grande medida, buscam resolver essa questão, isto é, possibilitar
ferramentas para que o usuário esteja no controle do consumo de
informações.

A tipografia, sem dúvidas, exerce uma grande importância nesse

processo, pois ela é a unidade mais básica de informação textual. A
imagem a seguir apresenta três opções de botões tipográficos. Na
primeira versão, o botão possui recursos em gradiente e sombra
que deram a sensação de que é um botão, sendo portanto
facilmente identificado como um botão e não gerando equívoco
para o usuário. No segundo caso, o botão tem apenas a cor alterada,
e, embora o usuário possa identificar essa mudança de cor como um
sinal de que aquela palavra é um botão para outra rota de
navegação, isso pode demandar um certo tempo do usuário, isto é,
requerer mais cognitivamente dele. No terceiro caso, a palavra não
possui qualquer alteração, e sim aparece como se fosse um texto-
padrão da página. Certamente, isso gera um desafio maior para o
usuário, pois não existem indícios visuais de que é um botão. No
primeiro e segundo casos, apenas por diferenciar a palavra
“Reportar” com recursos visuais, é possível criar indícios de uma
navegação mais clara.
 Figura 4.1 - Botão tipográfico
Fonte: Adaptada de Krug (2014a, p. 54).
#PraCegoVer: a imagem apresenta três quadrinhos. Os três
quadrinhos contêm a mesma imagem ilustrativa: um homem,
sentado à mesa, frente ao notebook. O primeiro quadrinho, mostra
um botão em que está escrito “Reportar” com recursos de
gradiente e sombra e a representação do usuário identificando
com facilidade que aquilo é um link, pois o usuário diz: “Isso é
um link.” No segundo caso, o botão apresenta apenas uma cor
destacada, e o usuário diz: “Hmm, será que isso é um link?”. No
terceiro caso, o botão não possui nenhum indício visual de que é
um botão, e o usuário diz: “Hmm, isso não se parece com um link.”.

O exemplo da imagem é, principalmente, sobre como a tipografia

pode ser utilizada para criar uma hierarquia da informação.
Segundo Morville (1998), a hierarquia de informação: define a
organização, a navegação, a marcação e o sistema de pesquisa nas
interfaces, especificando como o usuário encontra informações;
mapeia como a interface acomoda informações em sua estrutura;
determina o conteúdo dos sites e suas funcionalidades; e evidencia
a missão e visão do site.
Krug (2014b) afirma que o usuário sempre busca algo em sua
navegação e, para isso, normalmente se utiliza da hierarquia
informacional ou de sistemas de busca. A imagem a seguir
apresenta um fluxo de informação na navegação de um site.
Percorra os caminhos possíveis na imagem.

Figura 4.2 - Fluxo de navegação

Fonte: Adaptada de Darcin (2017, p. 29).
#PraCegoVer: a imagem apresenta um possível fluxo de decisões
ao navegar por um site. As informações possibilitam os seguintes
caminhos: o usuário entra no site e tenta navegá-lo; clica em uma
seção e em uma subseção. Caso tenha achado a informação
desejada, sai contente do site. Caso não, tenta realizar o processo
novamente até se sentir frustrado e sair do site insatisfeito. O
usuário pode buscar a informação através da pesquisa; desse
modo, procura a opção de pesquisa, digita um termo e verifica se
os resultados são satisfatórios. Caso os resultados sejam
confiáveis, ele os acesa; caso não, pode repetir o processo ou se
frustrar e sair do site.

Como, no universo digital, o usuário não pode mensurar a

quantidade de informações do site e não tem um senso de direção
e localização, a interface deve, em certa medida, contornar tal
processo. Ao longo dos anos, desenvolveram-se padrões a partir dos
quais é possível produzir interfaces de modo a serem mais
familiares aos usuários e inseri-los em modelos cognitivos
conhecidos, facilitando a navegação. Por conta disso, é importante
que o designer sempre fique atento às boas práticas recorrentes
entre os principais profissionais do ramo.

Krug (2014b) destaca alguns elementos-padrão de interfaces: há um

elemento de identificação da interface (como o logo); a homepage é
uma página principal que reúne os principais caminhos para o
conteúdo do site; as seções são áreas de conteúdo amplas que
podem possuir subseções; os serviços são zonas do site não
destinadas ao conteúdo, mas a alguma funcionalidade (como
cadastro, carrinho de compras etc.); a busca é uma ferramenta para
encontrar conteúdo de forma mais fácil; a navegação é um sistema
no qual é possível selecionar as seções e os serviços desejados,
sendo que ela pode possuir diversos níveis; a navegação pode ser
realizada de diversos modos; as abas também são formas de
navegação, contudo, são normalmente utilizadas de maneira
paralela a outro modo de navegação, como um menu principal;
os breadcrumbs (migalhas de pão) são uma forma de navegação na
qual o trajeto para encontrar a página em que o usuário se encontra
é apresentado, tornando mais simples retornar ou memorizar como
encontrar o conteúdo; as páginas, por sua vez, devem sempre
possuir nomes, links e marcadores claros sobre do que se tratam e
qual a relação com a interface.

A organização da interface e da informação deve: evitar a

ambiguidade; abranger arquivos e formatos distintos, pois
interfaces tendem a assimilar informações diversas; atentar-se à
percepção dos clientes sobre como a informação seria mais
facilmente processada por eles; ser compatível com a política e as
práticas da empresa (KRUG, 2014b).

Existem alguns esquemas de organização de informação. Certos

tipos de informação permitem a organização segundo um critério
claro, como uma ordem alfabética, cronológica e geográfica. Outros
tipos levam em consideração mais de um critério, podendo-se
pensar em algumas modalidades: organização via tópico, que
consiste em um assunto que dá sentido à organização; organização
de tarefas, isto é, em direção a um conjunto de ações que o usuário
pode executar; organização baseada em perfis de utilização da
interface; organização a partir de uma metáfora, sendo esse método
útil para segmentos novos de interface (MORVILLE, 1998).

Reflita
Pense nos sites que você utiliza com frequência, como redes sociais,
portais de notícia, página da universidade e portais de
entretenimento e jogos. Esses sites contêm o mesmo tipo de
informação? Seria possível organizá-los todos da mesma forma?
Existe algum site (ou interface) que você acha confuso? Como seria
possível torná-lo mais organizado?

A organização da informação, contudo, não pode ser realizada

apenas no âmbito informacional, devendo considerar também o
tipográfico. Para fazer isso, o designer deve se utilizar dos atributos
tipográficos (como peso, entrelinha e alinhamento) para tornar clara
a organização entre os elementos da navegação. Por exemplo, em
um menu de navegação, é esperado que as informações em um
mesmo nível possuam os mesmos atributos tipográficos.
Informações de subseções, quando mostradas, devem ser
visualmente subjugadas à seção à qual pertencem. Para isso, por
exemplo, é possível utilizar a variação romana para a seção e o
itálico para a subseção. O designer deve, portanto, articular cor,
formas, tipografia e alinhamento de modo a tornar a informação
identificável a partir de sua relação formal. Embora esse exemplo
tenha sido dado no âmbito da navegação, ele deve ser pensado em
todos os elementos da interface, como hierarquia do texto corrido
da página, rodapés do site, imagens e legendas correspondentes,
tela de login etc.

Teste seus Conhecimentos

(Atividade não pontuada)
A interface medeia a relação entre usuários (pessoas) e
computadores. Por isso, o desenvolvimento de interfaces demanda
um olhar atento do designer para garantir que ambos os atores de
origens heterogêneas se comuniquem de forma efetiva e sem
desgaste cognitivo. Nesse sentido, a tipografia exerce um papel
importante, pois é um dos principais componentes da informação.

Sobre a relação entre interface e tipografia, assinale a alternativa

correta.

a) As interfaces devem ser amigáveis, por isso, a

tipografia deve ser escolhida seguindo o gosto pessoal
do designer.
b) A experiência do usuário busca compreender como as
cores são utilizadas para melhorar o armazenamento de
informações.
c) Os atributos tipográficos devem ser utilizados de
forma estratégica para conferir hierarquia à informação.
d) A navegação deve ser desenvolvida de forma
alfabética para garantir que o usuário sempre encontre a
informação.
e) A criação de interfaces exige criatividade para não
repetir os padrões já utilizados no mercado.
Tipografia nas
redes sociais
A tipografia está relacionada à maneira como percebemos o mundo
e o lemos. Em uma análise mais tradicional, atribui-se ao código o
principal componente para o processo de comunicação, isto é, o
significado ortográfico das palavras utilizadas na comunicação é o
que determina o sentido da mensagem. Contudo, existem revisões
desse pensamento. McLuhan e Fiore (2018), por exemplo, afirmam
que o meio é a mensagem, ou seja, o processo cultural que constitui
o sujeito (família, educação, profissão, política vigente) confere um
sentido à mensagem.

Lévy (1993) se opõe à ideia de que a comunicação está relacionada

apenas ao código. Para ele, o contexto é que cria o significado das
coisas. O autor ilustra isso com o seguinte exemplo:

Em uma partida de xadrez, cada novo lance ilumina com

uma luz nova o passado da partida e reorganiza seus
futuros possíveis; da mesma forma, em uma situação de
comunicação, cada nova mensagem recoloca em jogo o
contexto e seu sentido. A situação sobre o tabuleiro de
xadrez em determinado momento certamente permite
compreender um lance, mas a abordagem
complementar segundo a qual a sucessão dos lances
constrói pouco a pouco a partida talvez traduza ainda
melhor o espírito do jogo (LÉVY, 1993, p. 13).

Isto é, o sentido da mensagem não está apenas no código, mas no

envolvimento do sujeito com a informação e sua relação com a
cultura e o código, sendo o sentido datado, transitório e construído.
O sentido das informações veiculadas nas interfaces segue o mesmo
princípio. A interface é uma combinação de informações
organizadas pelos designers e programadores que interagem com o
sujeito e comunicam algo em um processo dialógico. A tipografia é
parte essencial desse processo, pois é o principal meio para o código
verbal.

Lévy (1993) defende que o significado das coisas depende de uma

rede de associações que o leitor faz. Por exemplo, ao falar a palavra
“maçã”, o leitor desperta uma rede de significados, como formato da
fruta, cores, sabor, tipos de maçãs, receitas com maçã, experiências
vividas, representações da maçã e significados culturais (como o do
fruto proibido). Enfim, a palavra desperta um processo de
navegação nas mais diversas experiências que temos com ela. Lévy
afirma ainda:

Tomando os termos leitor e texto no sentido mais amplo

possível, diremos que o objetivo de todo texto é o de
provocar em seu leitor um certo estado de excitação da
grande rede heterogênea de sua memória, ou então
orientar sua atenção para uma certa zona de seu mundo
interior, ou ainda disparar a projeção de um espetáculo
multimídia na tela de sua imaginação (LÉVY, 1993, p. 14).

A rede heterogênea que possibilita a significação possui uma relação

com os hipertextos que consumimos nas interfaces. O conceito de
hipertexto foi desenvolvido inicialmente por Vannevar Bush em
1945 como uma forma mais eficiente de organizar informações e
mais próxima de como a mente humana funciona. Na década de
1960, tal conceito recebeu o nome de “hipertexto” por Theodor
Nelson “para exprimir a ideia de escrita/leitura não linear em um
sistema de informática” (LÉVY, 1993, p. 17). Lévy define o hipertexto:

enquanto um conjunto de nós ligados por conexões. Os

nós podem ser palavras, páginas, imagens, gráficos ou
partes de gráficos, sequências sonoras, documentos
complexos que podem eles mesmos ser hipertextos. Os
itens de informação não são ligados linearmente, como
em uma corda com nós, mas cada um deles, ou a
maioria, estende suas conexões em estrela, de modo
reticular. Navegar em um hipertexto significa portanto
desenhar um percurso em uma rede que pode ser tão
complicada quanto possível. Porque cada nó pode, por
sua vez, conter uma rede inteira (LÉVY, 1993, p. 20).
O sentido do hipertexto é construído e renegociado à medida que o
leitor caminha entre os nós de informações. A proximidade entre as
informações é o que garante o sentido da leitura. A informação, por
sua vez, é heterogênea, isto é, composta de imagens, palavras, sons,
movimentos, sensações e percepções. O hipertexto é fractal e, desse
modo, cada nó de informação pode se desdobrar em infinitos nós.
O hipertexto, consequentemente, não possui centro ou núcleo
(LÉVY, 1993).

Segundo Lupton (2015, p. 79), “a leitura nunca foi uma experiência

singular. Ela pode ser rápida ou lenta, focada ou distraída, pública
ou privada, impressa ou digital”. Como bem lembra Lupton, a leitura
e o livro, antes do digital, já eram repletos de diversidade. Com o
advento das tecnologias digitais, contudo, tal cenário tem se
expandido.

Embora a interface seja o nome atribuído comumente para

tecnologias contemporâneas, como os celulares e computadores,
Lévy (1993) afirma que a própria invenção da escrita, do papel, do
formato codex para livros e prensa tipográfica são interfaces que,
por si só, alteraram a relação do homem com a informação. O livro
impresso moderno como conhecemos, por exemplo, trouxe novas
formas de organizar a informação a partir de índices e notas de
rodapé, possibilitando novas maneiras de navegar em um livro. O
que vemos atualmente nas interfaces digitais é mais uma expansão
dessas transformações.

A leitura linear é caracterizada por uma relação temporal que

acompanha o leitor, criando a noção de início, meio e fim. O
processo de leitura é, por si só, um processo linear. A leitura linear,
contudo, não diz respeito ao processo de leitura em si, mas à relação
do sujeito com o conteúdo, isto é, a leitura linear é um termo para
textos que têm como objetivo principal serem lidos do início ao fim,
por exemplo, no caso de livros de romance. Embora a internet
explore outras formas de leitura, a leitura linear pode ser
encontrada em livros digitais, como os ePubs. As interfaces de
leitura de ePubs e o livro no formato ePub, portanto, devem levar
em consideração uma leitura mais dedicada e focada, que permite
ao leitor entrar no texto e habitá-lo do início ao fim.

A leitura seletiva é marcada por uma postura ativa do leitor com

relação ao texto. O leitor não busca conhecer o texto como um todo,
mas trechos, elementos e seções de seu interesse. Se, na leitura
linear, o sujeito descobre a partir da ordem proposta pelo autor, na
leitura seletiva, o leitor passa a ter mais controle sobre o que lê,
como lê e em que ordem lê. Por exemplo, “o Google Books dá
suporte a um modo de leitura ativo, aquisitivo e orientado por
objetivos, que é compatível com o foco do Google na pesquisa, como
alicerce fundamental de seu negócio” (LUPTON, 2015, p. 82). Lupton
(2015) faz uma breve descrição da leitura seletiva:

Primeiramente, você precisa escolher o que vai ler e o

que vai ignorar. Depois — às vezes bem depois —, você
mergulha no ato da leitura, talvez divulgando suas
impressões à medida que avança e entrando e saindo
do texto de acordo com sua vontade. Por fim, você
decide como manter o controle do que já foi lido,
guardando trechos úteis e deixando o resto de lado
(LUPTON, 2015, p. 82).

A diferença entre a leitura linear e a leitura seletiva nos auxilia a

compreender as transformações por que a comunicação vem
passando. Primeiramente, o mundo acelerou e, consequentemente,
os materiais informacionais ficaram mais breves, objetivos e
efêmeros. Vejamos, por exemplo, a internet: inicialmente, os blogs
dominavam a rede; com o passar do tempo, o conteúdo passou a
migrar para redes sociais. O Facebook possibilita postagens longas,
mas, no decorrer dos anos, perdeu espaço para outras redes sociais,
como Instagram, TikTok e Twitter, nas quais as informações são mais
reduzidas, dinâmicas e hibridizadas. Nesse sentido, destaca-se uma
certa onipresença de leituras seletivas, isto é, uma posição ativa do
leitor que, caso não se interesse pelo conteúdo, move-se para o
próximo.

A velocidade da comunicação dialoga também com o dinamismo,

isto é, a possibilidade de interagir com o conteúdo. As interfaces
hoje são, cada vez mais, espaços de diálogo entre usuário e
informação. O Instagram, uma das principais redes sociais, por
exemplo, decide se irá apresentar uma informação ou não a partir
de um algoritmo que mede, entre muitos outros aspectos, o
engajamento com o usuário e tópicos de interesse.
Quando influencers famosos fazem enquetes, solicitam indicação de
música e outros recursos, eles estão, sobretudo, buscando novas
formas de se engajar com os usuários e mostrar para o algoritmo
que seu conteúdo é relevante para os seguidores. A imagem a seguir
mostra um exemplo da criação de engajamento por parte
de influencers.

Figura 4.3 - Enquete

Fonte: Ramos (2019).
#PraCegoVer: a imagem apresenta um story do Instagram. É
possível ver a fotografia de uma mesa com toalha quadriculada.
Sobre a toalha, tem-se um prato de comida (possivelmente um
capelete ao molho gorgonzola) e uma taça com alguma bebida
clara (provavelmente um vinho branco). Além das informações da
interface do Instagram, como o botão de sair e “Enviar para”, é
possível ver, na parte inferior, a utilização de figurinhas interativas
do Instagram. A figurinha utilizada é uma enquete de sim ou não,
perguntando “Você conhece a origem do molho gorgonzola?”.
Além disso, as interfaces competem entre si cada vez mais para
manter o usuário e vender produtos e serviços. Em uma sociedade
pautada no consumo como a nossa, as mercadorias são
constantemente expandidas e, consequentemente, ocorre
inevitavelmente a competição entre segmentos de produtos. As
redes sociais também estão inseridas nessa lógica, tanto como
produtos, que disputam com outras redes sociais para manter os
usuários, quanto como um espaço para a venda de outras
mercadorias. Em ambos os casos, é possível ver uma necessidade
de atrair consumidores (seguidores) e vender a eles mercadorias,
serviços e estilos de vida.

Reflita
O designer deve estar atualizado nas tendências das redes sociais
para compreender transformações e antecipar comportamentos.
Nos últimos meses, você notou alguma novidade em alguma rede
social? Você segue influenciadores? Quais são as técnicas utilizadas
por eles para criar engajamento?

A tipografia, nesse sentido, é utilizada como um grande veículo para

comunicar e seduzir os possíveis consumidores. Embora seja mais
lembrada em seu aspecto funcionalista no âmbito das interfaces, ela
é também uma maneira de diferenciar e seduzir o usuário. Mesmo
com o fato de o Instagram e o TikTok serem redes sociais
fundamentalmente baseadas em imagens e vídeos, percebemos
que a tipografia continua sendo utilizada por marcas e usuários
nos stories e no feed (Instagram) e nos vídeos (TikTok).

Dado o dinamismo das informações das redes, a quantidade de

informação, as transformações da leitura, a velocidade da
comunicação e seu aspecto mercadológico, parece cada vez mais
difícil controlar o comportamento do usuário. A comunicação hoje
tem que ser rápida, breve, informativa, encantadora e competir com
muitas outras formas de comunicação acontecendo ao mesmo
tempo, em um clicar do mouse ou toque do celular.

A tipografia é um dos elementos que podem ajudar o designer a

realizar essa missão. Por isso, ele deve ficar atento ao uso de
tipografias digitais, procurando explorá-las de forma estática ou
dinâmica, buscando um balanço entre leiturabilidade e estética
sedutora. Existe uma infinidade de variedades tipográficas e
ferramentas; contudo, o mais importante é aprender os
fundamentos da tipografia e observar os líderes da indústria e como
eles os utilizam para engajar os usuários. A partir desses
conhecimentos, é possível experimentar e inventar novos modos de
comunicar a partir do aspecto subjetivo do designer.

Teste seus Conhecimentos

(Atividade não pontuada)
A tipografia é o elemento essencial da escrita digital. Podemos
observá-la, a todo momento, em interfaces, redes sociais e jogos.
Contudo, esses novos espaços digitais têm transformado a
maneira com que lidamos com a leitura, isto é, hoje os materiais
são pensados para serem lidos de forma distinta de como eram
pensados durante a primeira fase da Revolução Industrial.

Assinale a alternativa correta com base em seu conhecimento

sobre leitura e tipografia digital.

a) O hipertexto trouxe mais linearidade à comunicação.

b) A leitura seletiva permite que o leitor tenha mais
controle sobre a leitura.
c) A leitura linear possibilita ampliar as fontes de
informação.
d) A comunicação nas redes sociais segue a lógica da
leitura linear.
e) O significado das palavras provém unicamente do
código linguístico.
Tipografia
animada
Embora a tipografia cinética (parada) seja bem mais presente em
nosso dia a dia, animações tipográficas são usadas cada vez mais
nas interfaces digitais. Podemos notá-las em filmes, sites, aplicativos
e jogos. As animações nem sempre precisam ser grandiosas, mas
podem conter microanimações que conferem à letra maior
dinamismo.

As animações tipográficas podem utilizar diversos recursos. A forma

do tipo pode ser alterada ao longo do tempo; desse modo, a letra
pode ter mudanças no eixo da escrita, na espessura do traço, no
contraste, na serifa e nas terminações. Apenas alterando a forma do
tipo, é possível criar narrativas e comunicar ideias que vão além do
texto.

Os atributos tipográficos também podem ser utilizados na animação

tipográfica. Tracking, kerning, espacejamento, entrelinhas e
alinhamento compõem o sentido e garantem a legibilidade e
leiturabilidade do texto (FONSECA, 2008). Portanto, é possível alterá-
los em uma animação para alcançar objetivos distintos, como dar a
impressão de expansão da palavra (aumentando o tracking),
compactar o texto (reduzindo o espaçamento entrelinhas) e
alterando a hierarquia através de transformações de alinhamento.

É importante lembrar que a forma tipográfica pode e deve ser

pensada também como imagem, isto é, enquanto desenho. Assim,
é possível compor ilustrações mais detalhadas ou mais estilizadas a
partir da forma tipográfica e transformá-la para comunicar
determinadas ideias. Tanto a tipografia pode virar desenho como o
desenho pode se tornar tipografia.
A movimentação da tipografia também é um elemento
fundamental. As transições auxiliam o designer a transformar uma
cena em outra, podendo utilizar recursos como zoom in e zoom out.
De fato, quando o assunto é movimento, deve-se sempre recuperar,
no universo do cinema e da animação, terminologias que auxiliam a
descrever a movimentação dos objetos. Os movimentos de câmera,
por exemplo, podem auxiliar o designer a pensar em formas de
compor.

Saiba mais
Dentro da linguagem cinematográfica, existem alguns movimentos
de câmera clássicos. Eles são maneiras de movimentar a câmera
em uma cena e podem ser adaptados para a animação. O zoom
in e o zoom out (respectivamente, aproximar-se com a câmera ou
se afastar) propiciam ao espectador o destaque em determinados
trechos e, no âmbito da animação, são ainda mais explorados,
possibilitando alguns efeitos mais dramáticos, como transições de
cena. O travelling é o deslocamento da câmera em uma ou mais
direções, também podendo ser utilizado para explorar um campo
imaginário na tela.

Tal assunto é abordado em detalhes no âmbito do design por

Ludmila Ayres Machado na tese de doutorado intitulada “Design e
narrativa visual na linguagem cinematográfica”.

ASSAR

As animações podem ser feitas de inúmeras formas: manualmente,

por meio de técnicas tradicionais, como o flip book; primeiro
manualmente e depois digitalizadas e transformadas em vídeos,
como a animação de recorte e o stop motion; digitalmente, por meio
de programas (por exemplo, Adobe After Effects), como os motions
graphics tipográficos; primeiro no computador, depois
manualmente e depois novamente no computador, como na
rotoscopia. Enfim, existem diversas tecnologias, técnicas e
linguagens.
As animações podem ser finalizadas em extensões diferentes para
propósitos específicos. Por exemplo, existem microanimações
destinadas à internet. Ao passar o mouse sobre um link,
o designer pode configurar o código HTML e Cascading Style
Sheets (CSS) para realizar alguma animação, como mudança de cor,
alteração de fundo, peso e família tipográfica. Com o CSS3, é possível
desenvolver uma série de animações de forma simples, através da
linguagem de marcação. O mesmo se dá com as animações em
aplicativos, contudo, estes requerem outras linguagens mais
complexas. A animação também pode ser parte integrante de jogos,
materiais didáticos e apresentações. Por último, elas também
podem ser exportadas enquanto vídeo para a visualização-padrão.

Videoanimação
.A animação tipográfica começa a se tornar mais presente a partir
de motion graphics primitivos em filmes no século XX. Saul Bass, por
exemplo, foi um designer americano que ficou famoso, entre outras
coisas, pela produção de vinhetas para filmes (LUPTON, 2015).
Inicialmente, Bass trabalhou produzindo cartazes para os filmes e,
com o tempo, passou a trabalhar efetivamente com o cinema,
desenvolvendo animações tipográficas e outros componentes das
produções.

Os créditos de filmes eram tradicionalmente estáticos e não

colaboravam com as produções. Saul Bass, contudo, revolucionou
os créditos, inserindo formas minimalistas derivadas do estilo
moderno e minimalista europeu. As animações de Bass são muito
inteligentes, pois contam pequenas histórias a partir do filme, que
introduz o espectador na cena. Desse modo, compreende-se que a
animação tipográfica não é apenas uma forma de entretenimento,
mas também uma maneira de comunicação.

As animações, portanto, devem comunicar algo a partir das diversas

relações que desenvolvem com o vídeo. Lupton (2015) afirma que a
animação, por si só, não é suficiente para uma experiência
gratificante, sendo necessário que ocorra a comunicação de uma
história. A autora completa:

Assim como uma história, ele deve ter começo, meio e

fim — ele deve comunicar, já de início, que o movimento
está indo a algum lugar e proporcionar um senso de
completude satisfatório no fim. Uma história totalmente
desenvolvida segue um arco, partindo de um conjunto
de condições iniciais, passando por um problema ou
conflito e chegando a uma resolução final. De maneira
semelhante, uma animação bem-sucedida consiste em
sequências de mudanças de escala, posição ou cor que
atuam em conjunto para transmitir ações completas
(LUPTON, 2015, p. 178).

Ao analisar as redes sociais, por exemplo, é possível encontrar

animações tipográficas com uma certa frequência em filtros,
legendas e até mesmo eventuais motion graphics. Contudo, será que
esses conteúdos exploram de fato a potência comunicativa da
tipografia e do vídeo? Embora as interfaces sejam cada vez mais
dinâmicas utilizando-se de muito conteúdo audiovisual,
compreende-se que o potencial comunicativo da integração entre
vídeo e tipografia é pouco explorado. É necessário pensar que a
animação tipográfica não é apenas uma maneira dinâmica de
apresentar o texto, mas é capaz de compor o significado desse texto,
tal qual as realizadas por Saul Bass.

Mesmo animações curtas e simples podem e devem comunicar algo.

Para isso, portanto, designers devem se atentar mais ao aspecto
comunicacional da animação, às formas, às dinâmicas de
movimentação, às transformações dos atributos tipográficos e à
integração com formas e vídeos. Enfim, todos esses elementos
impactam a mensagem a ser comunicada.

Vamos Praticar
As animações tipográficas são utilizadas amplamente em conjunto
com vídeos. Cinema, curtas, documentários, programas de
televisão, vídeos para o YouTube, stories do Instagram e vídeos do
TikTok são alguns exemplos de mídias que se utilizam de
animações tipográficas para chamadas, explicações e
entretenimento.

Escolha uma vinheta curta de um filme ou canal do YouTube e

descreva o que ocorre na animação. Depois reflita qual a
mensagem que a vinheta comunica e como ela colabora para o
filme ou canal do YouTube.

Conclusão
A tipografia, as interfaces e a leitura têm se transformado ao longo
dos anos, especialmente em função do desenvolvimento
tecnológico. No âmbito das interfaces, por exemplo, a tipografia é
fundamental para organizar informações de natureza heterogênea,
como texto, foto, vídeos, som e imagens tridimensionais. Os
atributos tipográficos auxiliam o designer a sinalizar, organizar e
hierarquizar a informação, tornando a navegação no hipertexto algo
mais amigável. As redes sociais, por sua vez, trazem novos desafios
referentes à leitura, pois a comunicação tem se tornado cada vez
mais reduzida e veloz; contudo, continua tendo que informar e
seduzir o leitor. A animação tipográfica e a integração dela com
vídeos podem ser recursos importantes na dinamização da
comunicação.

Referências
Bibliográficas
AFTER Effects Tutorial - Deconstructed Typography in After Effects
Animation. [S. l.: s. n.], 2020. 1 vídeo (7m05s). Publicado pelo canal
Move Shapes. Disponível
em: https://www.youtube.com/watch?v=LRMJChPori4&t=2s. Acesso
em: 18 fev. 2021.

CARDOSO, R. Design para um mundo complexo. São Paulo: Cosac

Naify, 2013.

CYBIS, W.; BETIOL, A. H.; FAUST. R. Ergonomia e usabilidade:

conhecimentos, métodos e aplicações. 2. ed. São Paulo: Novatec
Editora, 2010.

DARCIN, G. A. Redesign portal web: uma proposta visual para o

website da Universidade Estadual de Londrina. 2017. Trabalho de
conclusão de curso (Bacharelado em Design Gráfico) –
Departamento de Design, Universidade Estadual de Londrina,
Londrina, 2017.

DIAS, C. Usabilidade na web: criando portais mais acessíveis. 2. ed.

Rio de Janeiro: Editora Alta Books, 2007.

FONSECA, J. D. Tipografia e design gráfico: design e produção

gráfica de impressos e livros. São Paulo: Bookman, 2008.

HAUG, W. F. Crítica da estética da mercadoria. São Paulo:

Fundação Editora da Unesp, 1997.

HAUG, W. F. Publicidad y consumo: crítica de la estética de

mercancías. Ciudad de México: Fondo de Cultura Económica,1989.

ISO – INTERNATIONAL ORGANIZATION FOR STANDARDIZATION. ISO

9241-11:2018: ergonomics of human-system interaction — part 11:
usability: definitions and concepts. Genebra: ISO, 2018. Disponível
em: https://www.iso.org/standard/63500.html. Acesso em: 12 fev.
2021.

KRUG, S. Don't make me think, revisited: a common sense

approach to web usability. Thousand Oaks: New Riders, 2014a.
KRUG, S. Não me faça pensar: uma abordagem de bom senso à
usabilidade na web e mobile. Rio de Janeiro: Alta Books, 2014b.

LÉVY, P. As tecnologias da inteligência: o futuro do pensamento na

era da informática. São Paulo: Editora 34, 1993.

LUPTON, E. (org.). Tipos na tela. São Paulo: Gustavo Gili, 2015.

LUPTON, E. Thinking with type: a critical guide for designers,

writers, editors, & students. 2. ed. New York: Princeton Architectural
Press, 2010.

MACHADO, L. A. Design e narrativa visual na linguagem

cinematográfica. 2009. Dissertação (Mestrado em Design e
Arquitetura) – Faculdade de Arquitetura e Urbanismo, Universidade
de São Paulo, São Paulo, 2009. Disponível
em: https://www.teses.usp.br/teses/disponiveis/16/16134/tde-
26032010-142901/publico/design_e_narrativa.pdf. Acesso em: 18
fev. 2021.

MCLUHAN, M.; FIORE, Q. O meio é a massagem: um inventário de

efeitos. São Paulo: UBU, 2018.

MORVILLE, P. Information architecture on the World Wide Web.

Sebastopol: O’Reilly, 1998.

NIELSEN, J.; LORANGER, H. Usabilidade na web: projetando

websites com qualidade. Rio de Janeiro: Campus, 2007.

NORTH By Northwest - Opening Titles. [S. l.: s. n.], 2012. 1 vídeo

(2m15s). Publicado pelo canal 830Q. Disponível
em: https://www.youtube.com/watch?v=xBxjwurp_04. Acesso em:
18 fev. 2021.

O DILEMA das redes | Trailer | Legendado (Brasil) [HD]. [S. l.: s. n.],
2020. 1 vídeo (2m22s). Publicado pelo canal Trailers em Português.
Disponível
em: https://www.youtube.com/watch?v=7X54fS0SQyw&has_verified
=1. Acesso em: 18 fev. 2021.
RAMOS, A. J. Como fazer enquetes para Instagram e as 4 melhores
perguntas para usar nas pesquisas. Rock Content. 12 ago. 2019.
Disponível em: https://rockcontent.com/br/blog/enquetes-para-
instagram/. Acesso em: 12 fev. 2021.

THE MAN with the Golden Arm (1955) title sequence. [S. l.: s. n.], 2019.
1 vídeo (1m40s). Publicado pelo canal MovieTitles. Disponível
em: https://www.youtube.com/watch?v=PhwsLS1XolU. Acesso em:
18 fev. 2021.

WORLD WIDE WEB FOUNDATION. History of the Web. 2021.

Disponível em: https://webfoundation.org/about/vision/history-of-
the-web/. Acesso em: 12 fev. 2021.