seja em nossos telefones, em livros ou em sites, estamos constantemente digerindo palavras escritas. De folhetos de instrução a fachadas de lojas, o tipo está à nossa volta. Muitas vezes refletimos sobre o poder da palavra escrita, mas raramente consideramos o papel do designer em imitar o tom da palavra ou frase.
nos bastidores, um designer levou o tempo para considerar a relação entre a aparência do texto e o que o texto diz. Na realidade, diferentes humores, atmosferas e emoções podem ser expressos simplesmente através da escolha do tipo. Mas o que é realmente a tipografia—e por que é tão vital?neste artigo, vamos levantar a tampa sobre tudo o que precisa saber sobre tipografia. Vamos começar com a definição de tipografia, incluindo uma breve história das suas origens. Em seguida, abordaremos os benefícios de uma boa tipografia e o impacto que ela pode ter em seus usuários. Finalmente, vamos olhar para os diferentes elementos que compõem a tipografia, e o que todos eles significam.aqui está o que vamos cobrir.:o que é a tipografia?por que a tipografia é importante?
Ready? Vamos mergulhar!o que é a tipografia?
vamos começar com o básico: o que realmente é tipografia? Em essência, a tipografia é a arte de organizar cartas e textos de uma forma que torna a cópia legível, clara e visualmente atraente para o leitor. A tipografia envolve o estilo da fonte, aparência e estrutura, que visa suscitar certas emoções e transmitir mensagens específicas. Em suma, a tipografia é o que dá vida ao texto.no vídeo abaixo, a tutora Olga, responsável pelo design da CareerFoundry UI, levanta a tampa sobre a importância da tipografia—e qual a diferença que isso faz para os seus utilizadores.
Typography can be dated back to the 11th century, during the innovation of movable type. Antes da era digital, a tipografia era um ofício especializado associado a livros e revistas, e, eventualmente, obras públicas. O primeiro exemplo de tipografia pode ser visto na Bíblia de Gutenberg, que deu início a uma revolução tipográfica no ocidente. Fato engraçado: o estilo do tipo usado na Bíblia de Gutenberg é agora conhecido como Textura, e você vai encontrá-lo no menu fonte para baixo nas principais aplicações desktop hoje!
Fast forward to modern day, where typography is mostly associated with both the digital world and print. Com o nascimento da internet veio uma explosão criativa da arte da tipografia. De repente, os web designers tinham uma abundância de fontes e opções de tipo à sua disposição, tornando a tipografia mais visualmente diversificada do que nunca.por que a tipografia é importante?
Typography is so much more than just choosing beautiful fonts: it’s a vital component of user interface design. Uma boa tipografia irá estabelecer uma forte hierarquia visual, fornecer um equilíbrio gráfico para o site, e definir o tom geral do produto. A tipografia deve orientar e informar seus usuários, otimizar a legibilidade e acessibilidade, e garantir uma excelente experiência de usuário.vamos aprofundar um pouco o porquê da tipografia ser tão importante.
Typography builds brand recognition
Not only will good typography enhance the website’s personality, but your users will subliminally begin to associate the typeface featured on your site with your brand. Tipografia única e consistente irá ajudá-lo a estabelecer um usuário forte que segue, construir a confiança com seus usuários, e ajudar a levar a sua marca para a frente.
a tipografia influencia a tomada de decisões
a tipografia tem um efeito profundo na forma como os utilizadores digerem e percebem a informação transmitida pelo texto. O tipo de captura de olhos é muito mais persuasivo do que fontes fracas que não reforçam a mensagem do texto.
Typography holds the attention of the readers
Good typography could be the difference between someone staying on your website for one minute or half an hour. É importante que o seu site seja visualmente estimulante e memorável, e a tipografia desempenha um papel enorme neste processo.
os diferentes elementos da tipografia
para começar na tipografia, é necessário começar a lidar com os oito elementos essenciais do desenho Tipográfico.
tipos de letra e tipos de letra
existe alguma confusão em torno da diferença entre tipos de letra e tipos de letra, com muitos a tratar os dois como sinónimos. Um tipo de letra é um estilo de design que compreende uma miríade de caracteres de tamanhos e peso variados, enquanto uma fonte é uma representação gráfica de caracteres de texto. Simplificando, uma fonte é uma família de fontes relacionadas, enquanto fontes se referem aos pesos, larguras e estilos que constituem uma fonte.
There are three basic typeface: serif, sans-serif, and decorative. Para manter a interface livre e simplificada, um bom designer nunca irá usar mais de três fontes—e manter fontes decorativas ao mínimo. A maioria dos designers da IU vai emparelhar fontes serif com fontes sans-serif, tais como colocar o texto do corpo principal em uma fonte serif e colocar o seu título em uma fonte sans-serif, ou vice-versa.
Contraste
Muito como hierarquia, contraste ajuda a transmitir idéias ou a mensagem que você deseja enfatizar para os seus leitores. Passar algum tempo em contraste torna o seu texto interessante, significativo, e apalpador de atenção. A maioria dos designers criam contraste ao brincar com diferentes tipos de letra, cores, estilos e tamanhos para criar impacto e quebrar a página.
consistência
manter os seus caracteres tipográficos consistentes é a chave para evitar uma interface confusa e confusa. Ao transmitir informações, é essencial manter o mesmo estilo de fonte, para que os seus leitores entendam instantaneamente o que estão lendo, e comecem a notar um padrão. Embora seja bom brincar com níveis de hierarquia, em certa medida, é uma boa prática estabelecer uma hierarquia consistente de caracteres tipográficos (uma fonte consistente para cabeçalhos, outra para sub-rubricas) e mantê-la.
espaço em branco
muitas vezes referido como “espaço negativo”, espaço em branco é o espaço em torno de texto ou gráficos. É muitas vezes ignorado e tende a passar despercebido pelo usuário, mas o uso adequado do espaço em branco garante que a interface não é filtrada e o texto é legível. Espaço branco pode até mesmo chamar a atenção para o texto e fornece uma experiência esteticamente agradável geral. Espaço em branco muitas vezes assume a forma de margens, estofamento, ou apenas áreas sem texto ou gráficos.
Alinhamento
Alinhamento é o processo de unificação e composição de texto, gráficos e imagens para garantir que não há igualdade de espaço, o tamanho e as distâncias entre cada elemento. Muitos designers UI criam margens para garantir que seu logotipo, cabeçalho e corpo do texto estão alinhados uns com os outros. Ao alinhar sua interface de usuário, é uma boa prática prestar atenção aos padrões da indústria. Por exemplo, alinhar o seu texto à direita parecerá contra-intuitivo para os leitores que lêem da esquerda para a direita.
cor
cor é um dos elementos mais excitantes da tipografia. É aqui que os designers podem realmente ser criativos e elevar a interface a um novo nível. A cor do texto, no entanto, não deve ser tomada de ânimo leve: nailing sua cor da fonte pode fazer o texto se destacar e transmitir o tom da mensagem —mas ficar errado pode resultar em uma interface bagunçada e texto que não combina com as cores do site.
A cor tem três componentes principais: valor, tom e saturação. Um bom designer saberá equilibrar estes três componentes para tornar o texto visível e claramente legível, mesmo para aqueles com deficiências visuais. Muitas vezes, os designers irão testar isso vendo o texto em tons de cinza (sem cor) e fazendo ajustes se o texto é muito escuro ou muito claro contra a cor de fundo.
hierarquia
estabelecer hierarquia é um dos princípios mais vitais da tipografia. A hierarquia tipográfica visa criar uma distinção clara entre as peças proeminentes de cópia que devem ser notadas e lidas primeiro, e a cópia de texto padrão. Em uma era de curta atenção spans trazidos pelas mídias sociais, os designers são instados a ser concisos e criar tipografias que permitam aos usuários consumir a informação necessária em pequenas quantidades de tempo.
hierarquia pode ser criada usando dimensionamento, cor, contraste e alinhamento. Por exemplo, se você tiver uma linha de cópia com um ícone de ponto de exclamação no início que está em vermelho e maior do que a cópia anterior, esta é uma pista visual para os leitores que é uma chamada à ação. O exemplo mais típico da hierarquia tipográfica é o tamanho: as rubricas devem ser sempre maiores do que as sub-rubricas e o texto padrão.
como você escolhe o tipo de letra certo para o seu site?
Agora que nos familiarizamos com os diferentes elementos de tipografia, vamos falar sobre o processo de escolher os caracteres tipográficos para a sua interface. Com tantas fontes e tipos de letra diferentes para escolher, é fácil sentir-se sobrecarregado. Fazer a escolha certa depende de muito mais do que apenas ver o que parece bonito. Aqui estão algumas considerações fundamentais:
pense sobre a personalidade
como você quer que seus usuários se sintam quando eles entram pela primeira vez no seu site. Queres imitar uma atmosfera amigável? Você quer que o site se sinta topo de gama, acolhedor, brincalhão, ou Sério? É imperativo que a tipografia reflita a personalidade da marca ou produto. Um bom ponto de partida quando confrontado com este desafio é definir os traços centrais de sua marca, e começar a reunir caracteres tipográficos que refletem esses traços. A partir daí, você pode começar a notar uma tendência.
reflectir sobre o tom
é igualmente importante considerar como a fonte harmoniza com o tom da mensagem. Por exemplo, se você quiser transmitir informações sérias ou importantes, Escolha uma fonte menos estilizada ou decorativa que seja claramente legível e irá limitar a distração.
não poupe na função
a função é tão vital quanto a forma: não há nada pior do que um site que parece bonito, mas é totalmente ilegível, levando você a clicar no botão errado ou tomar uma volta errada, porque as instruções não estavam claras. Ao decidir que tipos de letra incluir em sua interface, coloque o estilo, estética e voz de lado e refletir sobre se a fonte é legível, legível e acessível. O texto pode ser legível sem esforço? As personagens são suficientemente distintas?
considere o desempenho
uma coisa que muitos designers muitas vezes ignoram é escolher os tipos de caracteres que são amigáveis ao navegador web. Bibliotecas de tipos de letra comumente usadas, como o Google fonts oferecem arquivos de tipos de letra baseados na web que podem ser renderizados perfeitamente em um navegador sem quaisquer problemas. Dica Pro: ao transferir tipos de letra web, nunca Transferir mais conjuntos de caracteres do que o necessário. Assim, evitará o excesso de peso!
inspire-se em
Se não tiver a certeza por onde começar, dedique algum tempo para ver o que as outras pessoas estão a fazer. Abre os olhos para a tipografia que vês à tua volta. Nota padrões semelhantes? Você pode ver bons e maus exemplos de tipografia? Mesmo a seguir as hashtags de tipografia nas redes sociais ou a procurar a tipografia no Pinterest dar-lhe-á algumas boas ideias do que está lá fora. Você também pode olhar para estas oito tendências de tipografia para mais inspiração.
demora algum tempo a testar
a melhor maneira de decifrar qual o tipo de letra a usar na sua interface? Teste, teste e teste! Ao coletar feedback útil de usuários reais, você terá uma visão mais clara sobre o que funciona, o que não funciona, o que é legível e o que se sente contra-intuitivo ou desajeitado.
conclusão
tipografia é muitas vezes ignorado, mas é um componente crucial do design da interface do utilizador. Masterização tipografia vai vê-lo bem no seu caminho para se tornar um designer UI fantástico! Se você não tem certeza por onde começar, por que não ir para os seus sites favoritos e começar a fazer uma nota de que tipos eles foram para.
Keen to learn more about UI design? Confira estas postagens relacionadas no blog:
- 10 exemplos de belos blogs que pregaram o seu design UI
- 32 elementos de interface de usuário para designers UI: o seu glossário final
- aqui está como desenhar um ícone do zero: um guia passo a passo