Tipografia: fazendo as palavras sobressairem o tempo todo

A tipografia tem sofrido um bocado nos domínios
digitais da internet. De sites que usam o tamanho padrão
100% e preto com Times New Roman até as pessoas
que pensam que você deve ter as mesmas fontes
que elas tem instaladas, temos sacrificado muito da
nossa integridade como designers. Alguns pode até
pensar que o surgimento dos Style Sheets – o tratamento
tipográfico é suportado em quase todos
os browsers que aceitam includes, em grande extensão,
Netscape 4 – não deveríamos ter como superadas
essas barreiras.

Contudo, a vasta maioria de desenvolvedores
independentes de internet acham que a tipografia na
web nunca será como é no papel, então
porque se importar?

Francamente, minha opinião é
que isso é algo em que devemos começar
a nos concentrar. E logo.

Não há razão alguma
para lamentar a futilidade de usar algumas características
proprietárias no texto HTML↳HTML45 conteúdosA importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Como hostear seu site HTML gratuitamente com GitHub PagesDev (Back & Front) · jun 2025SQL Server – Como criar um versionamento de código das suas Stored Procedures em HTML e com comentários da alteraçãoData · nov 2020Ver tudo em Dev (Back & Front) →. Isto não
vai alterar o futuro próximo. Se você está
realmente entre aqueles que pensam assim, faça
todo o conteúdo em Flash, onde você tem
total controle de como seus tipos irão aparecer
e se comportar em qualquer monitor.

Caso contrário, vamos em frente.

Times New Roman, a primeira barreira

Primeiramente vamos dar uma olhada na
disponibilidade das fontes que você pode usar
na web. Claro, existem a Times New Roman e a Arial.
Todo mundo sabe delas. Temos escutado de nossos colegas
da área impressa que em tamanhos suficientemente
grandes, a Times New Roman é a fonte disponível
mais legível. As serifas, embora perturbem uma
pequena minoria, ajudam o leitor a passar os olhos sobre
as palavras numa velocidade considerável. A Arial,
sem nenhuma serifa, tende a fazer o leitor concentrar-se
ligeiramente melhor. Isto não é realmente
um problema, uma vez que a maioria dos internautas hoje
em dia estão acostumados a tipos de fontes sem
serifa, as quais fomos criados para amar, e nenhuma
delas será a mais lembrada. Os resultados são
os mesmos quando Helvetica, Geneva e Palatino são
especificadas para usuários de Macintosh.

Nos últimos dois anos ou menos,
um bando de novas fontes tem tomado a web como uma tempestade,
graças à Microsoft. As primeiras da fila
são Verdana e Georgia, ambas projetadas por Matthew
Carter. Ambas as fontes estão imediatamente disponíveis
e configuradas padrão em praticamente todas as
máquinas nas quais o Internet Explorer foi instalado.
E nós, como desenvolvedores de web, temos nos
sentido perfeitamente confortáveis usando-as
como padrão. Especificar tipos para Linux↳Linux34 conteúdosKali Linux em um Servidor VPS: como, quando e por que usar?DevSecOps · dez 2024Construindo um Windows Service ou Linux Daemon com Worker Service & .NET Core – Parte 2Dev (Back & Front) · jul 2020Criando uma WebApi utilizando .NET, Linux e VSCodeDev (Back & Front) · ago 2019Ver tudo em DevSecOps → é
algo mais que um desafio, mas falando meio por cima
você pode nutrir a esperança de que eles
também terão essas fontes instaladas.

Isto tudo não é novidade.
Isto é o que temos tentado fazer por um bom tempo.
Eu já nem posso mais contar o número de
vezes em que tive de conversar com um programador sobre
a tipografia de elementos estabelecidos colocando de
lado coisas importantes, usando os tipos para trasmitir
algum capricho.

Mas será que é apenas isso
que temos à nossa disposição? Será
isso tudo apenas a formatação de grandes
blocos de texto? Satisfeito? É isso tudo que
está para mudar a web? Eu espero que não.
Seja bem-vindo à hierarquia da tipografia e aos
inerentes benefícios que ela oferece.

Novos passos em negrito

Você pode notar que a Digital Web
Magazine (N.T.: este artigo foi traduzido deste site
que acaba de ser citado, vale a pena conhecê-lo
para compreender melhor as idéias do autor. O
link abre em outra janela.) é formatada com diversos
formatos tipográficos por hierarquia. Isto é
extremamente importante num site que possua muito conteúdo.
Primeiro de tudo, isto torna o conteúdo interessante.
Até algo simples como uma palavra em itálico
ou em negrito faz com que a palavra/frase fique mais
interessante, e que ao mesmo tempo deve ser enfatizado.

Olhando para usos isolados de itálico
ou negrito, você pode ver uma tendência,
um hábito de aplicação. Simplesmente
mudando uma palavra que você julga importante
(como eu acabei de fazer nesta frase), você não
leva o leitor ao ponto – apenas o confunde, e ele procurará
buscar a informação/produto em outra parte.

Vamos imaginar que se tenha um pedaço
de texto num site falando sobre encanamentos. E o conteúdo
fosse como esse:

Ser encanamendor é fácil
e divertido! Qualquer um pode fazê-lo, e ainda
economizar um bom dinheiro para melhorar a casa e resolver
apuros!

…então o público iria
deduzir algumas coisas sobre como o autor se sente sobre
encanamentos (e é como ele queria que tivessem
essa impressão, de fato).

Primeiramente, o autor está levando
ao ponto de que qualquer que pode fazer o serviço.
Pense na frase novamente e enfatize a palavra "pode".
Você notará que isso soa superior, condescendente.
Além disso, o público veria que a única
razão para ser encanador seria melhorar as instalações
da casa e resolver apuros. Se a proposta fosse vender
algo, teria falhado. Reescrevendo a frase…

Ser encanamendor é fácil
e divertido! Qualquer um pode fazê-lo, e ainda
economizar um bom dinheiro para melhorar a casa e resolver
apuros!

…então a frase levaria ao ponto
de economizar dinheiro – algo com que qualquer um se
identifica. Deu para perceber uma tendência?

Títulos que Falam

Títulos são um importante
aspecto da tipografia na web (assim como no design gráfico).
O que seria importante para um leitor para vendê-lo
equipamentos de encanamento? A marca, o preço
e o porque se deveria comprá-lo, correto? Bem,
nós podemos usar a tipografia como mais uma ferramenta
para fazer desta uma tarefa mais fácil.

Recentemente vi um comercial de televisão
dos Fundos Janus. Fiquei admirado com a incrível
tipografia que eles escolheram. As palavras caíam
através da tela enquanto o narrador as pronunciava.
Mas alguma coisa me chamou a atenção:
na frase "Janus pode ajudá-lo a economizar
dinheiro e manter seu negócio vivo", as
palavras "Janus", "dinheiro" e "vivo"
apareceram por um pouco mais de tempo que as demais.
Por um tempo ínfimo, apenas as palavras "Janus",
"dinheiro" e "vivo" aparecem na
tela. Claramente, isso não diz muita coisa, a
não ser pleo fato de que o Janus é algo
sobre dinheiro e manter-se vivo. Você também
sabe que o Janus trabalha exclusivamente para negócios,
portanto sua mente conclui que eles irão salvar
seu negócio do fim.

Faz sentido? É tão
sutil quanto efetivo.

Porque mencionei tudo isso? Simples.
Se você está usando os títulos com
eficácia (assim como "Janus", "dinheiro"
e "vivo" são títulos no comercial
e foram usados eficientemente) então seu público
é capaz de pular de ponto em ponto, prestando
menos atenção e aprendendo mais. Para
que isso?

Porque – sejamos honestos – seu público
não irá perder um tempão lendo
seu texto de missão corporativa. Transforme tudo
em pedaços, dê um título sujestivo
e vamos em frente!

Imagens Típicas

O último passo para vincular tudo
por completo é o trabalho com imagens que você
fizer que fará de seu design um todo. Estou falando
sobre seu sistema de navegação, assim
como as fontes que você usa para transmitir seu
estilo em seu design em geral.

Se todo seu conteúdo, por exemplo,
está em Times New Roman, seus títulos
de segundo nível estão escritos em Georgia
e seu título principal em Georgia caixa alta,
isto só fará sentido se seus elementos
gráficos estiverem com uma fonte serifada, preferencialmente
algo que combine bem com a fonte serifada do corpo do
texto.

Isto é o que se entende por consistência.
Eu jamais ousaria sugerir que se usasse a mesma fonte
para tudo – isto é simplesmente chato – mas vincular
seu sistema de navegação, por exemplo,
com seu conteúdo, faz todo sentido.

Divirta-se no resto das coisas, mas mantenha-as
juntas. Combine-as!

Até muito recentemente, era assumido
que a tipografia na web tinha os designers pela garganta.
Essas regras estão mudando rapidamente e é
importante para nós ficar lado-a-lado das novas
possibilidades de desenvolvimento. Flash, CSS e outras
ferramentas tem nos dado a habilidade de manter nosso
público interessado em nossas palavras, enquanto
ao mesmo tempo preservamos razoáveis tempos de
download e mante-mos os sites altamente práticos.

Além Disso Tudo

Eu mencionei previamente que alguns elementos
sobre tipos devem ser vistos à parte, ou algum
conteúdo irá falhar ao tentar captar o
interesse do leitor.

Não estamos colocando livros online,
um fato que pede por um novo direcionamento. O melhor
exemplo de bom direcionamento que tenho visto online
(consistentemente) tem sido a Adobe. Em seus artigos
(assim como no HTMHell por Jeffrey Zeldman), partes
do corpo do texto são cortadas fora e transformadas
em elementos gráficos para dar ao leitor um ponto
de foco (uma frase, talvez duas) que ajudarão
a decidir se o artigo será vagamente interessante.

Esta é uma ferramenta potente
para uso dos designers. Cotar o artigo numa barra lateral
(ou bloco "flutuante") e dar uma chance ao
leitor para decidir se o conteúdo é importante
o suficiente para ser lido.

Não apenas esta técnica
de design nos dá a oportunidade de usar uma determinada
fonte como um mecanismo de design no conteúdo,
mas também faz do conteúdo algo mais fácil
de se ler. Simplesmente colocado, o elemento gráfico
irá quebrar o conteúdo suficientemente
para, mesmo que haja muito texto a ser lido, não
seja tão monótono. Tente fazer a quebra
a cada 5 ou 6 parágrafos – você ficará
surpreso com a força do que acabara de desencadear.

Estes elementos são especialmente
efetivos como títulos para o conteúdo.
Cada um serve como apoio para o conteúdo que
seguirá. Num blog, como direcionamento, pode
ser usado em pedaços com links. Isso estabelece,
imediatamente, o que o autor/designer acredita ser mais
importante no artigo. Sem isso, ficamos apenas com a
hierarquização – texto arrumado, como
o que existe neste site (N.T.: referindo-se ao site
Digital-Web).

Se este artigo não tiver nenhum
leitor, eu duvico eu mesmo que leria té aqui.
Enorme, blocos chatos de texto não se fazem fáceis
de ler na tela. Temos de começar a estragar tudo
se for o caso.

Vinculando Tudo

Vimos a hierarquia, temos texto partido
em pedaços para que o leitor possa entender e
seguir em frente e elementos à parte para levar
em frente a navegação visual entre o conteúdo.
O que mais falta?

A peça final do quebra-cabeça
tipográfico é a aceitação
e a consistência. Se você pode seguir os
passos para tornar seu conteúdo mais interessante,
na base do dia-a-dia, as chances dele continuar a ser
interessante e divertido para seguir são bastante
boas.

Eu irei agradecer, a web irá agradecer
e seus leitores irão definitivamente agradecer!