Você sabe usar tipografia em UI Design?
12 dicas para você fazer dos tipos um aliado em seus projetos
A tipografia está em todos os lugares. Passamos por milhares de mensagens tipográficas todos os dias, a maioria das quais ignoramos ou nem mesmo enxergamos. Seja nas contas, nas embalagens, na TV ou na internet, você com certeza se envolve com os tipos durante muitos momentos do seu dia.
Você pode não perceber ou simplesmente não fazer ideia mesmo, mas existe uma complexidade bem grande por trás da tipografia. Seria justo dizer que a utilização dos tipos é a parte mais difícil da UI Design. Mas vou tentar tornar isso um pouco mais fácil compartilhando algumas dicas para você usar em seus projetos.
Bom, vamos lá!
1. Tamanho da fonte
O primeiro passo é encontrar o tamanho certo para o corpo de seu texto principal. Lembrando que um tamanho que parece ideal no mobile pode aparentar ser pequeno na tela de um computador. As pessoas tendem a segurar o celular próximo ao rosto, enquanto sentam mais longe das telas desktop.
Um bom ponto de partida para desktop é 16px. Em dispositivos móveis, os tipos podem ser menores, porque o usuário pode ajustar a distância entre a tela e seu rosto para obter o tamanho mais adequado às suas necessidades. Já para mobile o tamanho pode começar em 12px.
O mais importante é garantir que o texto esteja em um tamanho confortável para leitura. Acredite na sua percepção. Não confie apenas no tamanho em pixels. Por exemplo, abaixo temos duas fontes com a mesma medida em px, porém não possuem o mesmo tamanho visualmente.
Você já ouviu falar em escalas modulares?
Basicamente é você criar proporções relacionadas a partir de um primeiro tamanho de fonte definido — vale lembrar a dica acima e começar definindo o corpo do texto. Você pode criar essa relação usando a proporção áurea, por exemplo, multiplicando 16px por 1,618 para encontrar o próximo tamanho, ou dividir pelo mesmo número para encontrar o valor anterior.
“Uma escala modular é um conjunto preestabelecido de proporções harmoniosas, como uma escala musical..”
—Robert Bringhurst
Projetar com escalas modulares é uma forma de fazer escolhas mais conscientes. Usar proporções agradáveis, cria harmonia visual. Dificilmente você chegará nesse resultado usando valores aleatórios.
Você não precisa — e nem deve — se prender apenas na proporção áurea. Existem diversas escalas que você pode usar. Recomendo a leitura d0 artigo Tips for choosing a scale, do Billy Whited.
Esse assunto pode ir bem longe e merece um artigo só pra ele. Caso você se interesse em saber mais, leia o artigo More Meaningful Typography, do Tim Brown. Nele, o autor, explica tudo detalhadamente, deixa claro que é um direcionamento e não uma regra cravada em pedra, fala um pouco de como trabalhar com duas escalas e mais algumas coisas. É excelente e bem esclarecedor. ;)
Ferramentas:
2. Blocos de parágrafo
Comprimento da linha é a distância entre as margens laterais de um bloco de texto. As linhas excessivamente longas (acima de 100 caracteres) são um problema muito comum. Linhas mais curtas farão uma grande diferença na legibilidade e profissionalismo de seu layout.
Como o comprimento de um bloco de texto pode variar de acordo com o tamanho da fonte utilizada, a forma mais eficaz de controlar essa medição é por meio da quantidade de caracteres.
Linhas mais curtas são mais confortáveis de ler. Linhas mais longas — como nosso olho precisa viajar mais longe da extremidade de uma linha para o início da próxima — são mais difíceis de acompanhar e se manter engajado com a leitura.
“A linha de 66 caracteres é considerada como ideal.” — Robert Bringhurst
Procure usar um comprimento médio de linha de 45–75 caracteres, incluindo espaços e pontuação. Na prática, as limitações de espaço ou as ordens de uso especial podem exigir comprimentos maiores ou menores. Em todo caso, mantenha-se atento para perceber quando o bloco está extremamente longo ou curto a ponto de prejudicar uma boa leitura.
3. Alinhamento
Escolha um estilo de alinhamento que se adapte à estrutura de seu layout e a personalidade dos elementos individuais do conteúdo. Cada modo de alinhamento tem suas vantagens e desvantagens.
A tipografia centralizada é elegante e atraente, mas pode ser difícil de alinhar o texto com outros elementos. No entanto, funciona super bem dentro de espaços delimitados, como por exemplo: botões e barras de menu.
O texto justificado possui intervalos feios se não for hifenizado corretamente. Dificilmente será possível ter controle de uma boa hifenização em um conteúdo dinâmico.
O alinhamento à esquerda é a composição mais comum na web. Não há variação nos espaços entre palavras, de modo que nunca há grandes buracos dentro das linhas de texto. Este formato respeita o fluxo da nossa direção natural de leitura.
O texto alinhado à direita é difícil de ler já que o ponto inicial de cada linha é completamente irregular. No entanto, esse formato pode ser bastante eficiente em trechos curtos de texto, como legendas ou citações, agregando um elemento de movimento e surpresa à composição.
4. Espaçamento entre linhas
O espaçamento entre linhas, também chamado de entrelinha ou altura de linha, molda a aparência dos parágrafos e estrutura da página, dando ritmo vertical à medida em que o usuário acompanha o texto.
“Espaço na tipografia é como o tempo na música. É infinitamente divisível, mas alguns intervalos proporcionais podem ser muito mais úteis do que uma escolha ilimitada de quantidades aleatórias” —Robert Bringhurst
Um texto composto por entrelinha muito apertada estimula o movimento vertical dos olhos, o usuário pode facilmente se perder —esse estilo pode ser usado para passar uma ideia de urgência ou exagero. Da mesma forma, tipos compostos com entrelinha muito afastada criam listras que também distraem a leitura.
Como estabelecer um altura de linha confortável?
Praticamente todos os softwares tomam como entrelinhamento padrão o valor de 120% do tamanho do tipo (um tipo de 10px é composto com uma entrelinha de 12px, um tipo de 12px por uma entrelinha de 14,4px). Um espaçamento de 150% é muito comum na web. No entanto, você pode aplicar outros estilos usando as proporções, igual já vimos neste artigo. ;)
Ferramenta:
5. Espaçamento entre caracteres
Existem pares específicos de caracteres, como Ty e We, que podem precisar de ajustes nos espaços entre eles. Chamamos essa prática de kerning. A maioria das fontes digitais possuem tabelas de kerking embutidas, não exigindo o processo manual. Mas há exceções, principalmente ao compor títulos em tamanhos grandes, que evidenciam o espaçamento ruim.
O tracking se refere ao espaço entre os caracteres de uma linha ou bloco de texto. Quando o tamanho do tipo aumenta muito, principalmente em títulos, é uma boa ideia apertar um pouco o tracking. Também é comum ver esse espaçamento bem evidenciado dentro de sequências de maiúsculas ou versaletes em títulos, subtítulos e menus.
Em resumo, o kerning é o ajuste entre dois pares de caracteres, sem interferir no restante da palavra. Já o tracking é o ajuste feito em todo bloco de texto por igual.
6. Hierarquia
A hierarquia define como ler o conteúdo. Um layout atraente requer um sistema hierárquico bem planejado. Mudanças de tamanho, peso e cor são formas de expressar a hierarquia de um texto. A informação deve ser colocada em uma ordem que permita ao usuário entrar no espaço tipográfico e navegar por ele.
Existem muitas maneiras de diferenciar componentes distintos do texto em um projeto. Uma das opções é por meio da organização espacial. Agrupar itens relacionados, ou alinhá-los, estabelece uma relação entre eles e uma sensação de regularidade. Ao retirar um item específico desse alinhamento, atrai o olhar para ele e essa diferença no posicionamento chama a atenção do usuário para sua importância em relação aos demais elementos.
7. Cor na expressão tipográfica
A cor tipográfica diz respeito somente a mudanças na intensidade da luz ou valor. Uma composição em preto e branco, por exemplo, pode apresentar uma coloração tipográfica muito dinâmica — contrastes de dimensão, valor de cinza e espacejamento — mesmo que o tipo só apareça em preto. Entretanto, a cor cromática também pode desempenhar um papel importante na tipografia.
Cor e espaço
A cor possui diversas propriedades espaciais. Cores frias parecem recuar, enquanto cores quentes parecem avançar. Uma cor tem aspecto mais escuro quanto maior a sua área. Um tipo grande e um pequeno da mesma cor parecem ter valores diferentes — o subtítulo Cor e espaço parece ser mais escuro que o restante do texto, concorda?.
Hierarquia por meio da cor
A aplicação de cor em uma composição tem efeito imediato na hierarquia. Por exemplo, se a informação principal é composta em um laranja vibrante, enquanto a informação secundária é composta por um cinza frio, os dois níveis da hierarquia são visualmente separados em um grau ainda maior. A cor também pode ser utilizada para conectar componentes informativos relacionados dentro da composição.
Psicologia da cor
As cores carregam uma variedade de mensagens psicológicas que podem ser usadas para influenciar o sentido verbal da tipografia. A seleção de uma cor para palavras específicas em uma composição pode influenciar o usuário em suas ações.
8. Espaço em branco
Qual a sua reação ao ver um bloco de texto gigante em um site? Imagino que, assim como a maioria dos usuários, você desista prontamente. E, acredite, a culpa não é sua, e sim de um projeto mal planejado.
Já pensou se este site não tivesse essas áreas brancas em volta? Certamente você não teria chego até aqui. Se a composição está muito pesada, o conteúdo torna-se difícil de ser consumido e pouco atraente. Os espaços em branco — também conhecidos como áreas de respiro — são utilizados para tornar o nosso layout mais escaneável e não sobrecarregar o usuário com um conteúdo denso. O espaço em branco guia nossos olhos pela composição e cria a sensação de ordem, sofisticação e elegância.
9. Separadores
Uma boa maneira de dividir o conteúdo em seções é usar o separador. O mais popular é a linha simples. É sutil, elegante, cumpri bem a função de delimitar a área do conteúdo e mantém a legibilidade do layout.
Outra forma muito utilizada são os cards. Eles foram tão bem sucedidos que se tornaram uma opção quase que padrão quando se trata de equilibrar a estética clean e atraente com uma usabilidade simples.
O design baseado em cards geralmente dá ênfase no uso de imagens e isso torna o design mais atraente para os usuários. Estudos confirmam que imagens atraem os olhos de forma eficiente e imediata.
10. Repetição e ritmo
O ritmo ajuda a controlar o fluxo em uma composição. É um movimento modelado. Padrões rítmicos são construídos a partir dos elementos e seus intervalos. Assim como seu ouvido irá acompanhar o ritmo de uma música, seu olho seguirá o ritmo criado visualmente.
Um padrão e um ritmo existirão assim que adicionarmos elementos a uma composição. Você deve aprender a controlar isso. Qualquer elemento que é repetido cria fluxo e ritmo. A repetição pode ser posicionamento, tamanho de texto, cores, espaçamentos, linhas ou qualquer outro elemento. Variações no padrão deixam a composição mais interessante.
11. Como escolher a fonte certa?
A clareza é o valor mais importante de uma interface de usuário bem projetada. O melhor tipo de letra é aquele que passa despercebido.
“Seu texto precisa ser legível, no tom certo. Se a sua tipografia dificulta o texto ou simplesmente o torna impossível de ser lido, então é inútil, não importa o quão incrível ele pareça estar.”
Em 2006 a iA escreveu um artigo sobre tipos, chamado Web Design é 95% tipografia. Segue uma citação:
Um grande designer sabe como trabalhar 0 texto não apenas como conteúdo, ele trata como uma interface de usuário.
O texto é UI. E, claro, a tipografia é muito mais do que apenas um tipo de letra ou o texto de uma composição. Trata-se de equilíbrio, posicionamento, hierarquia e estrutura. Ainda assim, sua escolha de tipo de letra é parte importante deste processo.
Características importantes para considerar na hora de escolher a sua fonte:
- Legibilidade - Os caracteres são bem distintos entre si? Fontes altamente modulares ou geométricas podem ser menos legíveis do que aquelas com formas mais orgânicas e individualizadas. Muitos tipos não possuem boa distinção entre os glifos il, 1l e Il, cComo por exemplo a fonte Gill Sans.
- Leitura - A leitura da fonte é confortável no corpo do texto? A fonte funciona em textos longos? Um bom tipo de letra para UI tem que ser extremamente legível em tamanhos pequenos. Como o texto fica muito pequeno, precisamos de um tipo com uma grande altura-x — altura-x é o tamanho das letras em caixa-baixa.
- Flexibilidade - A fonte funciona em diferentes tamanhos e pesos? Ela funcionaria bem tanto para títulos quanto para corpo de texto? Uma fonte versátil é capaz de solucionar muitos tipos de problemas e expressar uma rica hierarquia.
- Carisma - Seus detalhes são únicos? Sua aparência fica atraente quando ampliada?
- Adaptabilidade - Ela é otimizada para tela?
Não se esqueça que cada uma das fontes possui suas características e sua história. Por exemplo:
Georgia. Construída sob encomenda para utilização na tela em 1996. Possui uma altura-x alta. Por já estar disponível virtualmente em todos os sistemas operacionais modernos e contar com um meticuloso hinting — ajustes para a máxima legibilidade em monitores de computador — , a Georgia mantém sua popularidade na web. Ela funciona muito bem em tamanhos menores, porém sua personalidade no modo display (em grandes tamanhos) é pouco expressiva. Por se tratar de uma fonte serifada, passa a ideia de uma fonte clássica, elegante e tradicional.
DIN. Tornou-se uma fonte padrão para sinalização na Alemanha dos anos 1940, usada com frequência em ferrovias e rodovias. Com seus ângulos rígidos e geometria quadrada, a DIN é adequada para manchetes sempre que for necessária uma aparência impactante e arquitetônica. Sua grande altura-x e suas formas abertas a tornam uma opção adequada também ao corpo de texto, embora possa ser cansativa em longas leituras. Um fonte sem serifa, que passa a ideia de uma fonte moderna, minimalista e amigável.
Pode parecer besteira, mas conhecer a história por trás de uma fonte pode ser determinante para a mensagem que você quer passar no seu layout. Um spoiler do artigo do Tim Brown: ele conta que usou a fonte Minion em seu layout porque ela é baseada em ideias renascentistas. Ele também optou por usar a proporção áurea pelas conexões históricas. Como o projeto era sobre a história e tradição tipográfica, fazia sentido usar elementos relacionados às raízes culturais.
12. Combinando tipos
Misturar fontes é como escolher roupas—não há regras imutáveis. Algumas pessoas têm um talento especial para isso, já outras…
Tenha em mente estes princípios:
- Misturar fontes nunca é um requisito — é uma opção. Você pode construir hierarquias utilizando variações de tamanho, peso e contraste.
- É aceitável a combinação de duas fontes. Em alguns casos três funcionam. Mas quase nunca uma composição com quatro tipos ou mais terá um resultado satisfatório.
- Você pode misturar quaisquer duas fontes, desde que sejam visivelmente diferentes. Se você já ouviu alguém dizer que só pode misturar uma fonte serifada com outra sem serifa, não é verdade.
- Mistura de fontes tem um melhor resultado quando cada fonte tem um papel consistente no documento. Por exemplo, uma determinada fonte para os títulos e outra para o corpo de texto.
- Lembre-se: menos é mais! ;)
Ferramentas:
—
Está acabando!
Conclusão
- Ler o texto nunca deve ser uma luta. Deve ser fácil e natural.
- Tipografia vai muito além de: qual fonte devo usar nesse projeto?
- Todos os seus projetos, muito provavelmente, terão textos. Não adianta pensar que isso é um problema e ter medo de trabalhar-los. Torne-o seu aliado para construir interfaces incríveis. Enxergue a tipografia como parte da UI. Explore as possibilidades.
- Deixe seus olhos serem o juíz. Na tipografia, assim como no design em geral, o ajuste óptico é quase sempre necessário e muito bem-vindo!
- Tudo que vimos aqui não são regras imutáveis. Não estão cravadas em pedra. São apenas direcionamentos. Está confiante para fazer algo diferente? Faça!
Por fim, não jogue os textos simplesmente na tela. O bom trabalho vem com muita dedicação. Estude, domine os tipos, entenda os porquês e se envolva completamente no projeto.
Você quer desenhar interfaces memoráveis? Então use bem os tipos! ;)
Sente falta de mais artigos em português sobre UI Design? Deixe sugestões de assuntos nos comentários.
Está a fim de bater papo sobre design ou tirar alguma dúvida? Bora conversar e trocar experiências!
Vlw! ;)
Livros
- Manual dos Tipos — John Kane (Editora GG)
- Tipos na tela — Ellen Lupton (Editora GG)
- Guia de tipografia — Timothy Samara (Bookman)
- Tipografia & Design Gráfico — Joaquim da Fonseca (Bookman)
- Pensar com tipos — Ellen Lupton (Cosac & Naify)
- Elementos do Estilo Tipográfico — Robert Bringhurst (Cosac & Naify)
