Os 20 melhores tutoriais de tipografia para web designers

Alguns web designers podem considerar a tipografia um dos elementos menos importantes do web design, mas pode melhorar ou prejudicar a experiência do usuário de várias maneiras.

Boas opções de tipografia podem fortalecer a legibilidade, legibilidade, identidade da marca, acessibilidade e taxa de conversão. Por outro lado, más escolhas de tipografia podem enfraquecer esses fatores e arruinar a experiência do usuário.

A tipografia, então, é um aspecto importante do web design e algo que todo designer deve aprender ao iniciar um negócio de web design. Felizmente, a web está cheia de tutoriais úteis sobre tipografia e cursos para web designers.

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

De termos básicos de tipografia à otimização de fontes com CSS, reunimos os melhores tutoriais de tipografia para designers.

Nível de habilidade: iniciante ao intermediário

Duração: 30 minutos

Custo: grátis

Este tutorial de tipografia vem do Elementor, o que significa que você aprenderá mais do que apenas como usar tipografia em web design. Você vai aprender como colocar tudo isso em prática - coisas como formatação, estabelecimento de hierarquia visual, criação de um sistema de design e assim por diante - dentro do contexto do WordPress e Elementor.

Nível de habilidade: iniciante ao intermediário

Duração: 17:31

Custo: grátis

Em alguns casos, o WordPress não terá as fontes específicas que você deseja usar. Então, 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á-los manualmente ao WordPress usando CSS ou carregá-los no Elementor e usá-los no editor.

Nível de habilidade: iniciante ao intermediário

Comprimento: 6:50

Custo: grátis

Neste vídeo do Elementor, você aprenderá tudo sobre o recurso Configurações globais no editor do Elementor. Este tutorial mostrará como usar esse recurso para definir cores e fontes e, em seguida, observar como elas são aplicadas em todo o site. Portanto, se você deseja economizar tempo fazendo atualizações em suas fontes e deseja trazer maior consistência a cada site que você constrói, este breve tutorial em vídeo é imperdível.

Nível de habilidade: iniciante

Duração: 10:33

Custo: grátis

O nome deste tutorial em vídeo da Envato Tuts + é um pouco enganador. O que deveria ser chamado é “O guia definitivo para a terminologia básica de tipografia”. Dito isso, se você é novo em tipografia, este é um primeiro passo importante que você deve dar. Familiarize-se com os termos relacionados a tipografia, fontes, tipos de arquivo, estrutura de tipo, composição e muito mais.

Nível de habilidade: iniciante

Duração: leitura de 18 minutos

Custo: grátis

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

Nível de habilidade: iniciante

Duração: 8 horas

Custo: grátis

Se você está procurando algo mais aprofundado para sua introdução à tipografia, este curso do California Institute of the Arts é uma boa escolha. Não há custo para se inscrever neste curso, o que é uma grande vantagem, pois você obterá uma tonelada de informações úteis com ele. 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.

Nível de habilidade: iniciante

Duração: 15 minutos

Custo: grátis

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 as associações com certos tipos de fonte e obterá dicas sobre como usá-las a seu favor.

Nível de habilidade: iniciante ao intermediário

Duração: 6,5 horas

Custo: $ 109,99

Este curso da Udemy sobre tipografia na 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 como escolher e combinar fontes, tornar sua tipografia da 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 deve se inscrever se for um novo designer - você tem acesso vitalício a ele, então pode voltar a ele assim que aperfeiçoar suas habilidades nessa área.

Nível de habilidade: iniciante

Duração: 13 horas

Custo: grátis

Este curso da University of Colorado Boulder está disponível no site do Coursera. Este é um curso longo, durante o qual você aprenderá como manipular os elementos textuais para contar uma história com seu design. O curso aborda o básico e, em seguida, se ramifica em espaçamento de tipografia, escolha de fontes, pareamento de fontes e muito mais.

Nível de habilidade: intermediário

Duração: 8,5 horas

Custo: $ 99,99

Muhammad Ahsan Pervaiz é o criador deste curso Udemy de 4,5 estrelas sobre tipografia. Se você deseja receber um treinamento abrangente em noções básicas de tipografia, personalização de tipografia, escolha e combinação de fontes e muito mais, este é um curso fantástico a se fazer. Os exercícios são integrados ao curso, portanto, você também terá experiência prática na implementação de tudo o que aprender à medida que avança.

Nível de habilidade: iniciante

Duração: 12h55

Custo: grátis

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 + vai muito fundo no assunto, dividindo os diferentes tipos e subcategorias de fontes. Aprendendo como identificar as diferenças em como cada um está estruturado, você terá muito mais facilidade para escolher os estilos de tipografia certos para seus sites.

Nível de habilidade: iniciante

Duração: 9:58

Custo: grátis

Este tutorial de tipografia do Flux é sobre como encontrar fontes de qualidade para seus sites. A discussão gira principalmente em torno de como os web designers podem fazer para encontrar foundries de fontes de alta qualidade e sites de onde obter suas fontes. Porque, mesmo que você entenda o tipo de fonte de que precisa, uma fonte malfeita (mesmo que corresponda a esse estilo) pode desfazer todo o seu trabalho árduo. Este tutorial o ajudará a evitar esse problema.

Nível de habilidade: iniciante

Duração: 10 minutos

Custo: grátis

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

Nível de habilidade: iniciante

Comprimento: 7:35

Custo: grátis

Neste guia passo a passo da Satori Graphics, você obterá orientações práticas e dicas sobre como escolher fontes para seus projetos. Embora haja uma grande ênfase aqui no design gráfico, você pode aplicar as mesmas cinco etapas para escolher e emparelhar fontes para qualquer coisa em que você trabalhe, seja um site, aplicativo, logotipo ou algum outro tipo de material promocional de marca.

Nível de habilidade: iniciante

Duração: 9:41

Custo: grátis

Este tutorial do Flux no YouTube vai te ensinar como deixar de fazer escolhas de fontes com base em suposições ou no que seu instinto está lhe dizendo. Em vez disso, você abordará a seleção de fontes com base no utilitarismo. E você obterá alguma ajuda para encontrar fundições de fontes que fornecem amostras gráficas, então, novamente, você não está apenas extrapolando o que seu instinto lhe diz sobre a aparência de uma fonte.

Nível de habilidade: iniciante ao intermediário

Duração: 1 hora

Custo: grátis

O emparelhamento de fontes é definitivamente uma arte. Então, se você vai aprender como fazer isso, deve ser com um dos líderes no espaço de design. Este guia de bolso foi criado por Tim Brown, chefe de tipografia da Adobe Typekit e Adobe Type. Este guia irá ensiná-lo a determinar quais tarefas você precisa que suas fontes cumpram, como escolher uma fonte âncora, como identificar fontes que complementam a âncora e, em seguida, julgar objetivamente seu emparelhamento.

Nível de habilidade: iniciante

Duração: 10 minutos

Custo: grátis

Este tutorial simples do ThemeIsle fornecerá duas opções para alterar as fontes no WordPress. Você pode selecionar fontes da web no Customizador do WordPress. Ou você pode instalar o plugin Easy Google Fonts e definir Google Fonts usando o personalizador. Embora haja uma opção de bônus incluída, é melhor usar as configurações de fonte universal do WordPress em vez de alterar as fontes por bloco ou página.

Nível de habilidade: intermediário a avançado

Duração: 11 minutos

Custo: grátis

Edoarda Cavazza escreveu este ótimo artigo para a Smashing Magazine que trata do uso de CSS para melhorar a legibilidade e acessibilidade da tipografia do seu site. Especificamente, este tutorial aborda 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, liderança ou rastreamento ou não tem um conhecimento básico de CSS, comece no início desta lista de tutoriais de tipografia e volte a este mais tarde.

Nível de habilidade: intermediário a avançado

Duração: 20 minutos

Custo: grátis

Fontes variáveis ​​são uma coisa relativamente nova, mas estão ganhando rapidamente suporte em todo o navegador, o que significa que é hora de designers e desenvolvedores começarem a usá-las (se ainda não o fez). Conforme a equipe de desenvolvedores do Google explica neste guia sobre fontes variáveis, elas são muito valiosas quando se trata de desempenho do site, 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.

Nível de habilidade: iniciante ao avançado

Duração: 30:14

Custo: grátis

Este é um tutorial interessante, pois não é realmente um tutorial. Ao longo de 30 minutos, você observará o The Futur avaliar a tipografia usada na criação de seu próprio Manual de Tipografia. Enquanto eles estão avaliando o manual impresso, ainda é um exercício útil para acompanhar, pois vai ensiná-lo a revisar seu próprio trabalho e se acostumar a fazer escolhas mais inteligentes para sua tipografia desde o início.

Depois de passar algum tempo com esses tutoriais de tipografia e ter um bom controle do essencial, é hora de colocar tudo em prática.

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

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