Aprenda a utilizar

a tipografia

no seu design

Arraste e confira

nossas dicas
Antes de tudo, vamos entender por que tipografia

importa...

Imagine acordar e encontrar este bilhete:

Uma ótima forma de começar o dia, né?

Agora imagine se o bilhete fosse reescrito...

 No mínimo... assustador!

A tipografia influencia diretamente na forma com

que uma marca ou o produto é percebido.

Além da identidade, ela influencia também em

toda a experiência do usuário na interface!

Por isso, aqui vão algumas dicas

para você acertar na tipografia

 Escolha da fonte
(ou input field)

A função mais essencial de uma fonte, sem dúvidas, é ser

lida! É fundamental que a leitura seja fácil e fluida em
diferentes tamanhos e pesos de fonte.

Poppins

Roboto
Estas são algumas
indicações de fonte para
Inter
produtos digitais que
gostamos muito por aqui!
Manrope

Nunito
 Espaçamento
(ou input field)
entre

linhas
Também chamado de entrelinha, é a distância vertical entre
as linhas do texto, que irá torná-lo mais ou menos legível.

Este é um exemplo com pouco

espaçamento entre as linhas. Repare
como é complicado acompanhar a
leitura... Fica até difícil respirar, né?

Fica muito melhor ler assim, não é?

O correto espaçamento entre as

linhas facilita a legibilidade do texto.
 Hierarquia visual
(ou input field)

A hierarquia visual determina a ordem de visualização dos

conteúdos na sua interface.

Bolsa tiracolo Bolsa tiracolo

R$ 399,00
Carregue tudo o que precisa para o
dia a dia com conforto e
praticidade, ideal para levar os seus
pertences de forma organizada.
R$ 399 00
Carregue tudo o que precisa para o
dia a dia com conforto e praticidade,
ideal para levar os seus pertences de
forma organizada.

Comprar agora Comprar agora

É fundamental trabalhar com variações no tamanho, peso e cor.

 Utilize(oufontes
input field)
que se

complementam
Ao utilizar dois tipos de fonte no seu design, escolha pares
que sejam consistentes e que comuniquem entre si.

Montserrat

Este par é ruim

Este par é bom

Não há muita diferença entre o Há uma diferença clara entre

título e o corpo do texto, além da
legibilidade das fontes não ser
muito boa
o título e o corpo do texto.
Essas tipografias permitem
uma leitura fácil e rápida.
Roboto
 Alinhamento
(ou input field) do texto
É a forma com que os elementos textuais são organizados
na interface, de modo a torná-la mais fluida e estruturada.

Este é um exemplo de texto alinhado à esquerda.

Ele é o mais indicado para web por respeitar nosso

padrão natural de leitura (da esquerda para direita)

Este é um exemplo de texto centralizado.

Ele é indicado para dar destaque a algum elemento

na interface (exemplo: Call To Actions e Botões).

Este é um exemplo de texto alinhado à direita.

Ele é menos indicado, já que cada frase se inicia em um

ponto diferente, o que dificulta a leitura.
Quer aprender mais dicas (ou
como essas?
input A Cubos Academy tem
field)
um curso completíssimo para aprender tudo sobre UX Design!

E, você, que me segue,

tem 10% de desconto
usando meu cupom: