Alguns web designers podem considerar a tipografia como um dos elementos menos importantes do design de web, no entanto, ela pode ser determinante para a experiência do usuário de diversas maneiras.

Boas escolhas tipográficas podem fortalecer a legibilidade, a leiturabilidade, a identidade da marca, a acessibilidade e a taxa de conversão. Por outro lado, escolhas tipográficas inadequadas podem enfraquecer esses fatores e arruinar a experiência do usuário.

A tipografia, portanto, é um aspecto crucial do design de web, e algo que todo designer deve aprender quando inicia um negócio de design de web. Felizmente, a web está repleta de tutoriais e cursos de tipografia úteis para web designers.

Neste artigo, iremos analisar 20 tutoriais de design de web. Embora muitos desses tutoriais estejam disponíveis gratuitamente online, também incluímos alguns cursos online pagos. Afinal, quando você está tentando encontrar trabalho em design de web, é necessário ser capaz de se destacar, e ter um certificado de conclusão de uma instituição ou provedor de curso reconhecido pode auxiliar nesse aspecto.

Descubra as Últimas Tendências em Tipografia e Inspire-se

Índice

20 Incríveis Tutoriais Online de Tipografia

Desde termos básicos de tipografia até a otimização de fontes com CSS, reunimos os melhores tutoriais de tipografia para designers.

1. Tipografia na Web: O Guia Completo para Designers

Elementor-Typography

Nível de habilidade: Iniciante a Intermediário

Duração: 30 minutos

Custo: Gratuito

Este tutorial de tipografia é proveniente do Elementor, o que significa que você aprenderá mais do que apenas como utilizar tipografia no design de web. Você aprenderá a colocar tudo isso em prática — aspectos como formatação, estabelecimento de hierarquia visual, criação de um sistema de design, entre outros — no contexto do WordPress e Elementor.

2. Como Adicionar Fontes Personalizadas ao Seu Site WordPress

Using-Custom-Fonts-Elementor

Nível de habilidade: Iniciante a Intermediário

Duração: 17:31

Custo: Gratuito

Em alguns casos, o WordPress não terá as fontes específicas que você deseja utilizar. Assim, com este tutorial de tipografia do Elementor, você aprenderá quais são suas opções para adicionar fontes personalizadas a um site WordPress. Você pode adicioná-las manualmente ao WordPress utilizando CSS ou pode carregá-las no Elementor e utilizá-las a partir do editor.

3. Como Utilizar as Cores e Fontes Globais do Elementor

Elementor-Global-Colors

Nível de habilidade: Iniciante a Intermediário

Duração: 6:50

Custo: Gratuito

Neste vídeo do Elementor, você aprenderá tudo sobre o recurso de Configurações Globais no editor do Elementor. Este tutorial lhe mostrará como utilizar esse recurso para definir tanto cores quanto fontes e então observar como elas são aplicadas em todo o site. Portanto, se você deseja economizar tempo ao fazer atualizações em suas fontes e deseja trazer maior consistência a cada site que construir, este breve tutorial em vídeo é imprescindível.

4. O Guia Definitivo para Tipografia Básica

Envato Tuts

Nível de habilidade: Iniciante

Duração: 10:33

Custo: Gratuito

O nome deste tutorial em vídeo do Envato Tuts+ é um tanto enganoso. O que deveria ser chamado é “O Guia Definitivo para Terminologia de Tipografia Básica”. Dito isso, se você é completamente novo em tipografia, este é um importante primeiro passo a ser dado. Familiarize-se com termos relacionados à tipografia, fontes, tipos de arquivo, estrutura de tipos de letra, composição tipográfica e mais.

5. Tutorial de Tipografia para Iniciantes: Tudo que Você Precisa Aprender sobre os Fundamentos da Tipografia

Hubspot-Typography-Tutorial

Nível de habilidade: Iniciante

Duração: Leitura de 18 minutos

Custo: Gratuito

Este tutorial de tipografia da Hubspot é outra introdução útil à tipografia no design. Você aprenderá termos comuns, diferentes estilos de tipografia, bem como onde obter suas fontes.

6. Introdução à Tipografia

Coursera-Intro-Typography

Nível de habilidade: Iniciante

Duração: 8 horas

Custo: Gratuito

Se você está procurando algo mais aprofundado para sua introdução à tipografia, este curso do Instituto de Artes da Califórnia é uma boa escolha. Não há custo para se inscrever neste curso, o que é um grande benefício, pois você obterá uma grande quantidade de informações úteis. Você aprenderá sobre a história da tipografia, sua estrutura, como usá-la para contar uma história, manipular sua aparência e muito mais.

7. A Psicologia das Fontes (Fontes que Evocam Emoção)

Envatotuts-Psychology-Fonts

Nível de habilidade: Iniciante

Duração: 15 minutos

Custo: Gratuito

Se você é novo no design, este tutorial do Envato Tuts+ servirá como uma ótima introdução à psicologia das fontes. Semelhante à psicologia das cores, você aprenderá as respostas emocionais comuns e associações com certos tipos de fontes e obterá dicas sobre como usá-las a seu favor.

8. Tipografia Web para Designers e Desenvolvedores

Udemy-Web-Typography

Nível de habilidade: Iniciante a Intermediário

Duração: 6,5 horas

Custo: R$ 109,99

Este curso da Udemy sobre tipografia web é ministrado por Rob Sutcliffe da Interface School. Esta é uma visão geral bastante técnica da tipografia, examinando os diferentes tipos de classificações, dicas sobre escolha e combinação de fontes, tornando sua tipografia web legível e responsiva, e muito mais.

Para obter o máximo deste curso, você deve ter algum conhecimento prático de HTML, CSS e JavaScript. Isso não significa que você não deva se inscrever caso seja um designer iniciante — você obtém acesso vitalício ao conteúdo, podendo retornar a ele quando tiver aprimorado suas habilidades nessa área.

9. Elementos Textuais do Design: Fontes, Tipografia e Espaçamento

Coursera-Textual-Elements-Design

Nível de habilidade: Iniciante

Duração: 13 horas

Custo: Gratuito

Este curso da Universidade do Colorado Boulder está disponível no site Coursera. Este é um curso extenso, durante o qual você aprenderá a manipular os elementos textuais para contar uma história com seu design. O curso aborda os fundamentos e depois se ramifica em espaçamento tipográfico, escolha de fontes, combinação de fontes e muito mais.

10. Tipografia para Designers e Desenvolvedores - Não Seja Ruim em Design

Dont-Suck-At-Design-Tutorial

Nível de habilidade: Intermediário

Duração: 8,5 horas

Custo: $99,99

Muhammad Ahsan Pervaiz é o criador deste curso Udemy sobre tipografia com classificação de 4,5 estrelas. Se você deseja receber um treinamento abrangente sobre fundamentos de tipografia, customização tipográfica, escolha e combinação de fontes, e muito mais, este é um curso fantástico para se fazer. Exercícios estão integrados ao curso, então você também obterá experiência prática implementando tudo o que aprender ao longo do caminho.

11. Quando Usar Cada Tipo de Fonte (e Quando Não)!

Envato-Tuts-2

Nível de habilidade: Iniciante

Duração: 12:55

Custo: Gratuito

Muitos dos tutoriais e cursos que você viu nesta lista até agora abordaram o tópico de tipos de fonte. No entanto, este tutorial do Envato Tuts+ aprofunda-se realmente no assunto, decompondo os diferentes tipos e subcategorias de fontes. Ao aprender a identificar as diferenças na estrutura de cada uma, você terá muito mais facilidade em escolher os estilos tipográficos corretos para seus sites.

12. Como Saber se uma Fonte é Boa ou se é Ruim?

Flux

Nível de habilidade: Iniciante

Duração: 9:58

Custo: Gratuito

Este tutorial de tipografia da Flux é inteiramente sobre encontrar fontes de qualidade para seus websites. A discussão gira principalmente em torno de como os web designers podem encontrar fundições e websites de fontes de alta qualidade para obter suas fontes. Porque, mesmo que você entenda o tipo de fonte que precisa, uma fonte mal feita (mesmo que corresponda a esse estilo) poderia desfazer todo o seu trabalho árduo. Este tutorial o ajudará a evitar esse problema.

13. Escolhendo Fontes Web: Um Guia para Iniciantes

Google-Design

Nível de habilidade: Iniciante

Duração: 10 minutos

Custo: Gratuito

Este é um guia prático do Google Design sobre como determinar quais fontes web são as corretas para cada website que você constrói. O tutorial o guiará por uma série de fatores, como escopo do projeto e design multilíngue, e então o direcionará para as Google Fonts que atendem às necessidades do seu projeto.

14. Como Escolher Fontes para Seus Designs

Satori-Graphics

Nível de habilidade: Iniciante

Duração: 7:35

Custo: Gratuito

Neste guia passo a passo da Satori Graphics, você receberá orientações práticas e dicas sobre como escolher fontes para seus projetos. Embora haja uma ênfase significativa no design gráfico aqui, você pode aplicar os mesmos cinco passos para escolher e combinar fontes para qualquer coisa em que esteja trabalhando, seja um website, aplicativo, logotipo ou outro tipo de material de marca.

15. Como Escolher Fontes

Flux2

Nível de habilidade: Iniciante

Duração: 9:41

Custo: Gratuito

Este tutorial do YouTube da Flux lhe ensinará a se afastar de fazer escolhas de fontes baseadas em suposições ou no que sua intuição está lhe dizendo. Em vez disso, você abordará a seleção de fontes com base no utilitarismo. E você obterá auxílio para encontrar fundições de tipos que fornecem amostras gráficas, de modo que, novamente, você não esteja se baseando apenas em sua intuição sobre quão boa uma fonte parecerá.

16. Guia de Bolso para Combinar Tipos de Letra

Typekit-Typography-Pocket-Guide

Nível de habilidade: Iniciante a Intermediário

Duração: 1 hora

Custo: Gratuito

O emparelhamento de fontes é, indubitavelmente, uma arte. Portanto, se você vai aprender a fazê-lo, deve ser de um dos líderes no espaço de design. Este guia de bolso foi criado por Tim Brown, o Chefe de Tipografia da Adobe Typekit Adobe Type. Este guia lhe ensinará como determinar quais funções suas fontes precisam cumprir, como escolher uma fonte âncora, como identificar fontes que complementem a âncora e, em seguida, como julgar objetivamente sua combinação.

17. Como Alterar a Fonte em um Tema WordPress (Qualquer Tema)

Themeisle-Change-Font-Wordpress

Nível de habilidade: Iniciante

Duração: 10 minutos

Custo: Gratuito

Este tutorial simples do ThemeIsle lhe fornecerá duas opções para alterar fontes no WordPress. Você pode selecionar fontes da web a partir do Personalizador do WordPress. Ou você pode instalar o plugin Easy Google Fonts e definir as Fontes Google utilizando o Personalizador. Embora haja uma opção adicional incluída, é preferível utilizar as configurações universais de fonte do WordPress ao invés de alterar fontes por bloco ou página.

18. Técnicas Modernas de CSS para Melhorar a Legibilidade

Smashing-Magazine

Nível de habilidade: Intermediário a Avançado

Duração: 11 minutos

Custo: Gratuito

Edoarda Cavazza escreveu este excelente artigo para a Smashing Magazine que aborda o uso de CSS para melhorar a legibilidade e acessibilidade da tipografia do seu site. Especificamente, este tutorial explora o uso de espaçamento para criar o melhor tipo de experiência de leitura para os visitantes. Se você ainda não aprendeu sobre kerning, entrelinhamento ou tracking, ou não tem um entendimento básico de CSS, comece pelo início desta lista de tutoriais de tipografia e retorne a este posteriormente.

19. Introdução às Fontes Variáveis na Web

Webdev-Variable-Fonts

Nível de habilidade: Intermediário a Avançado

Duração: 20 minutos

Custo: Gratuito

As fontes variáveis são relativamente novas, mas estão rapidamente ganhando support em todos os navegadores, o que significa que é hora dos designers e desenvolvedores começarem a utilizá-las (se ainda não o fizeram). Como a equipe do Google Developers explica neste guia sobre fontes variáveis, elas são extremamente valiosas quando se trata de desempenho de sites, pois permitem que você salve diferentes variações de uma fonte em um único arquivo. Para aprender como fazer isso, você precisará de algum conhecimento de CSS.

20. Aprenda Como Usar Tipos — Crítica do Manual de Tipografia

Futur Os 20 Melhores Tutoriais De Tipografia Para Web Designers 1

Nível de habilidade: Iniciante a Avançado

Duração: 30:14

Custo: Gratuito

Este é um tutorial interessante, pois não é realmente um tutorial em si. Ao longo de 30 minutos, você assistirá enquanto The Futur avalia a tipografia utilizada na criação de seu próprio Manual de Tipografia. Embora estejam avaliando o manual impresso, ainda é um exercício útil para acompanhar, pois lhe ensinará como revisar seu próprio trabalho e se acostumar a fazer escolhas mais inteligentes para sua tipografia desde o início.

Domine a Arte da Tipografia e Melhore a Experiência de Seus Usuários

Uma vez que você tenha dedicado algum tempo a estes tutoriais de tipografia e tenha um bom domínio dos fundamentos, é hora de colocar tudo em prática.

Uma coisa a ter em mente é que a tipografia, como tudo mais no design, evoluirá com o tempo. Os princípios e diretrizes subjacentes permanecerão os mesmos, mas em termos de preferências das pessoas em tipografia, espere que isso mude.

Portanto, certifique-se de, além de dominar os fundamentos da tipografia, manter-se atualizado com as tendências tipográficas também.

Originally posted 2021-04-28 11:18:39.