Tipografia e desenho de fontes no design de interface do usuário

1. Introdução do curso: As fontes são uma parte crucial de cada design, porque são elas que estão contando a história, orientando o usuário onde ele precisa clicar e onde precisa entrar no seu design. Portanto, escolher uma boa família de fontes e escolher boas para desperdício é realmente e escolher boas para desperdício é realmente importante e realmente a chave para ter um bom designer de design legível Alex aqui, bem-vindo a esta aula de Skillshare sobre fontes e famílias de fontes, pesos de fonte e como usá-las. Sou criador de produtos de design digital e até agora criei mais de 500 produtos de design diferentes. Também sou criador de cursos e, até agora, criei mais de três cursos diferentes com mais de 60 mil alunos matriculados à vista. Nesta aula, falaremos sobre diferentes fontes e famílias de fontes. Qual é a diferença entre eles? O que são serifas e sans serifs, diferentes pesos de fonte e como usá-los, fontes diferentes, escalas e como usá-las e criar seu próprio bot para escolher fontes para seus projetos. E, finalmente, como emparelhar fontes. Seu projeto, dependendo da complexidade do projeto no tópico do projeto, seu projeto de classe Skillshare é criar uma escala de fonte usando o modelo que eu forneci. Certifique-se de conferir. E eu tenho um vídeo dedicado nesta aula sobre o projeto da turma. Portanto, certifique-se de verificar isso para obter mais informações. Saber como usar fontes em seu design realmente o beneficiará como designer. E isso realmente beneficiará seus usuários porque vai dar a eles mais valor. Eles vão ficar lá por mais tempo porque é uma experiência mais agradável para eles. Então, estou ansioso para vê-lo nesta aula e vamos criar algumas combinações de fontes incríveis. 2. Tipos VS Fonts: Um dos principais erros que vejo jovens designers cometerem é que eles estão chamando fontes, fontes , o que não é verdade. Typeface é realmente uma família de fontes. E a fonte é apenas uma variação dentro dessa família. Deixe-me dar um exemplo rápido. Imagine que você está usando a fonte Roboto, por exemplo. E então dentro da outra fonte de água, você tem parafuso, regular, fino, ultra negrito. Todas essas são fontes, mas o relatório em si é uma fonte. Família endividada é o principal equívoco que os designers têm. Eles estão tentando empurrar essa noção que a fonte é tudo quando na verdade não é. O que você pode ter são diferentes tipos de variações de fonte dentro da família única ou uma garrafa é realmente um bom exemplo porque você tem Roboto regular, Roboto normal e então você tem algo chamado roboto slab, que é completamente fonte, linhas realmente gordas, e é realmente usado para impressão principalmente, mas você também pode usá-lo em algum tipo de web design ousado. Mas esse é o ponto aqui. Não tente confundir fontes com famílias de fontes porque as famílias de fontes podem ter várias fontes diferentes dentro delas. E as fontes são apenas variações dentro dessa família de fontes. Como eu disse, pode haver várias fontes dentro de uma única família. Portanto, tenha isso em mente e não se confunda. Você pode usar toda a família ou fonte dentro do seu design, ou você pode usar apenas uma variação, como, digamos neste exemplo, Roboto regular ou Roboto bold. Vamos falar sobre isso em apenas alguns vídeos desta aula. Mas eu só queria apontar isso. 3. Tipos de fontes: Muitas vezes, quando entrevisto jovens designers quando falo com eles, eles realmente não sabem qual é a diferença entre Serif e Sans Serif quando se trata de fonte, é realmente super simples. E eu fui em frente e encontrei um artigo muito bom. Vou vinculá-lo no arquivo de recursos da classe. Portanto, certifique-se de conferir e ler por si mesmo, porque não vamos nos aprofundar muito neste vídeo, mas eu só quero mostrar rapidamente quais são as diferenças entre as serifas, sans serifs, e quando cada um deles é usado. Então, aqui temos o artigo que mencionei e é da Adobe.com, descoberta de design da Creative Cloud. E vou deixar o link para este artigo, como eu disse nos arquivos de recursos da classe. Então você pode ver alguns exemplos aqui. Talvez isso não pareça distinguir para você. Talvez você tenha visto fontes como essas. Talvez você tenha visto fontes como essas. Mas qual é realmente a diferença entre Serif e Sans Serif? Então, aqui temos a pista no nome e a principal diferença entre essas fontes. Então, essas coisas no final da carta em si são surf. E você pode ver aqui, não temos eles que surfar na areia, se não me engano, isso é francês. Então, sem essas serifas no final. Então essa é a principal diferença entre serifas e saques de envio. Agora, quando você pode usá-los, você pode ver quando usar fontes com serifa. Então, vai se aprofundar muito sobre quando usá-los e como usá-los. Você pode vê-los impressos aqui. Portanto, não deixe de conferir este artigo para saber mais sobre ele. E, claro, você pode explorar mais sobre quando encontrá-los. Mas, em poucas palavras, quando usar serifas e sensores, é realmente super simples. É, tudo se resume ao tópico do seu design e à direção do design do seu design e para o que você está projetando. Então, por exemplo, se você está projetando design ousado de site, talvez algo novo , algo novo, algo para a geração mais jovem, Você não vai usar servidores, que são as fontes com essas coisas. No final de cada letra, você usará fontes sem serifa porque as fontes Cera são realmente atribuídas a algo que é antigo. E se você está projetando para algo que é antigo, por exemplo, você está fazendo algum tipo de site antigo ou está fazendo algum tipo de show de carros antigos talvez ou algo que eles resolveram. Em seguida, você usará as fontes Serif, que têm essas coisas no final das letras. Mas geralmente a regra geral é que se você não está projetando para algo que é tradicional, que é elegante, que é antigo, então você vai usar essas fontes sem serifa porque elas são fontes mais modernas e mais disponíveis para uso, especialmente em web design, porque estão trabalhando on-line e são otimizadas para trabalhar on-line, para legibilidade, para acessibilidade, para escalabilidade, por todas essas razões, fontes sans serif são muito melhores de usar, especialmente no design de sites. Mas, como eu disse, você ainda pode encontrar milhares de fontes serifadas diferentes se quiser usá-las em seu web design ou design de aplicativo. Tudo isso depende do seu tópico, que você está projetando, de quem é seu público-alvo e do que você está tentando transmitir, que tipo de emoção, que tipo de satisfação com a fonte você está escolhendo. Portanto, mantenha essas coisas em mente quando estiver projetando para a Web. 4. Pesos para fontes e como usá-los: Quando você começa a usar uma família de fontes, dependendo da própria família, você verá que ela tem muitas fontes diferentes dentro, que são rotuladas com nomes diferentes como negrito adolescente normal, extra negrito , itálico, negrito, itálico e muitos, muitos, muitos mais, dependendo da própria família de fontes. Esses são chamados de pesos. E como usar esses pesos em diferentes cenários. É sobre isso que vamos falar neste vídeo. E vou mostrar um exemplo e dar a vocês apenas uma ideia de onde usá-los. Então aqui está o exemplo, e eu estou no Adobe XD, este é o arquivo de design de um dos meus cursos anteriores, e eu apenas o uso como exemplo apenas para mostrar todos esses diferentes pesos de fonte e como usar para acentuar o que você deseja mostrar em seus designs. Então, o que temos aqui dentro da seção de heróis, se eu selecioná-lo e vir aqui para o lado direito. Então, deixe-me escolher este. Lá vamos nós. Você pode ver que o nome da fonte é Open. Sem, o tamanho é 24 e o peso é regular. Então, por que é normal? Bem, porque eu só gostaria que as pessoas vissem isso primeiro, que é obviamente maior, mais pronunciado e tem cores diferentes. Isso é chamado de ponto de atenção porque eu quero apontar a atenção deles para esse texto em branco primeiro, porque eu queria que eles lessem esse texto primeiro. Portanto, eu quero fazer com que pareça diferente deste texto na parte superior e inferior enquanto eles estão aqui no centro lendo este hotel boutique de heroína é. Quero que ele veja que há outro texto em cima e em baixo. E então eu quero lê-las. Eu quero que eles leiam porque eles estão lá. Então, se eu for e lançar rapidamente o protótipo aqui, você pode ver como isso se parece. Então, aqui estou eu na seção de heróis e tudo o que eles podem ver é isso. Então, seus olhos são naturalmente atraídos para o meio desta página, para o meio desta imagem. E você pode ler que esta heroína é um hotel boutique atrás de dívidas. Você pode ver todos os outros textos lá. Bem-vindo ao hotel boutique de Helen. Ok, sua casa, longe de casa. Então esse é o peso da fonte. É assim que se usa. E você pode notar que essa fonte parece diferente. Você pode ver que é surf, como mencionamos em um vídeo anterior. Então, por que isso? Porque a marca deste hotel e desse design realmente exige isso. E é por isso que eu escolhi esse tipo de visual. Então, se eu escolher isso, você pode ver que é chamado Playfair display 70, que é o tamanho da fonte, muito maior neste caso. Porque sem mencionar, novamente, todas essas coisas que mencionei, mas para chamar a atenção para isso. E então você pode ver negrito frio, itálico é o peso. É Italica. Então é meio inclinado para o lado direito e é ousado. É mais pronunciado do que na fonte normal. É assim que você pode equilibrar seus pesos de fonte em muitos exemplos diferentes. E se rolarmos um pouco para baixo, você pode ver mais uma vez, aqui está a mesma fonte agora em uma cor diferente para obter o contraste entre fundo branco e a própria fonte. E você pode ver sua casa longe de casa. Então, mais uma vez, vamos voltar a esse slogan, talvez. Então você pode ver algo realmente interessante aqui. Então, se eu selecionar este, você pode ver que é o parafuso Open Sans 24. E se eu selecionar este, Open Sans 24 regular. E você pode ver apenas selecionando parafuso e regular e escolhendo cores diferentes, estou apontando a direção deles e apontando sua atenção para uma direção diferente. Neste exemplo, você pode ver, eu queria ler essa legenda porque é muito importante. Quero que a mente deles preste atenção a essas três coisas. Então, camas king size, comida incluída acesso à praia, porque esses são pontos de venda importantes para este site específico para atrair novos visitantes para acessá-lo. E então, se quiserem, é claro, podem ler o texto abaixo. É por isso que este é ousado e este é regular. Esta tem uma cor um pouco mais escura do que esta porque eu quero que os olhos dela sejam atraídos para este texto primeiro. A mesma história com isso e com isso aqui. Se você rolar um pouco agora, podemos ver os mesmos textos aqui. hotel boutique Headwinds está bem. E aqui temos uma citação de um de nossos clientes anteriores para este site ou um depoimento, você pode ver Jenny de Londres, mas este é muito mais pronunciado. É muito maior. Então, se eu selecioná-lo e vir aqui, você pode ver que é Open Sans 36 itálico. E tem essa cor mais escura que esta, que é o Open Sans 24 irregular. Então, mais uma vez, quero que eles leiam a citação primeiro e depois vejam de quem é a citação. O nome neste caso não importa muito. Você pode se livrar dele para as segues de layout. Não importa o que importa é a experiência deles com este hotel, porque o próximo cliente que você está tentando adquirir para o seu hotel vai querer ver essa experiência primeiro. Realmente não me importo, é Jenny, use, Mark, é quem quer que seja? Eles realmente não se importam, eles realmente se importam com a experiência. E então você pode ver o contraste abaixo dele com o botão livro agora, que é azul e tem texto branco dentro. Mais uma vez, por uma questão de contraste, se rolarmos um pouco para baixo, você poderá ver isso em todo este design. E não apenas esse design, mas cada design que eu crio. Porque eu sempre penso nessas coisas. O que é mais importante? O que é menos importante? O que as pessoas vão ver primeiro? E como posso acentuar isso com minhas fontes e pesos de fonte? Você pode ver aqui. Então, para os nomes da sala, fonte é muito maior do que todas essas abaixo. E você pode ver isso com os recursos, sim e não. É claro que estamos escolhendo cores diferentes para mostrar quais recursos estão disponíveis, quais não estão. E então temos o estilo diferente mais uma vez com o link abaixo. Então, saiba mais, eles podem clicar nesse link, é diferente. Então, quando o, como vai, eles vão ver a mudança. Então você tem que pensar sobre todas essas coisas. Aqui. Você pode ver os recursos. Então, temos piscina privada, temos um lindo jardim, temos estacionamento privado. Tudo isso é super fácil de ler com um propósito. É por isso que escolhi essa fonte, que é muito maior, que é um pouco diferente, que é pedregulho, tem uma cor mais escura do que a fonte abaixo dela. Mais uma vez, eu estava usando o Open Sans como fonte principal. Este aqui, e exibição Playfair para esta grande fonte em negrito. Mais uma vez, se rolarmos um pouco para baixo, você poderá ver isso acontecendo novamente. Então visite Delos, que é o título, e este é o texto. Então, se eu não quiser ler este texto, tudo o que eu posso ver e tudo o que eu preciso saber é realmente visitar Delos. Portanto, há algo para fazer nas exibições. E se rolarmos um pouco para baixo, mais uma vez, reserve sua estadia conosco. Então, isso realmente os convida a reservar sua estadia neste lugar. E mais uma vez, você pode ver esse contraste aqui acontecendo com o fundo branco e esse texto cinza escuro. E o exemplo final é se inscrever para receber boletins informativos. Então, está realmente chamando você para a ação, para agir. E então é isso que você vê. Primeiro, inscreva-se para receber um boletim informativo. Isso é o que você vê em segundo lugar, e isso é mais uma vez com um propósito porque eu quero pronunciar isso, assinar um boletim informativo porque essa é a ação que eu quero que ele tome. E então, quando eu tiver atenção deles com a inscrição no boletim informativo, inscreva-se e receba notícias e atualizações e blá, blá. Isso é realmente secundário porque eu quero que eles permaneçam nessa parte da página o maior tempo possível. É assim que você pode usar fontes, formas de fonte e cores diferentes, e talvez até famílias de fontes diferentes para acentuar o que você deseja que seus usuários vejam em sua página. Você pode explorar isso com muito mais detalhes. E dependendo do seu esquema de cores para o seu projeto, isso pode ser realmente ainda mais complexo ou até mais simples do que o exemplo que acabei de mostrar, que tem apenas algumas cores. 5. Escolhendo as fontes: Quando se trata de escolher fontes para o seu projeto, existem realmente duas considerações principais. Você deve ter fontes existentes e o tema principal do projeto, fontes existentes são obviamente as fontes que seu cliente estava usando anteriormente. Depois, você pode dar uma olhada nessas fontes. Veja toda a família de fontes, veja o que ela tem dentro e talvez pense em como você pode acentuá-la um pouco mais. Sobre o que falamos em um vídeo anterior desta aula. Como você pode usá-los de forma um pouco diferente para mostrar algumas das principais características do produto ou um serviço que seu cliente está oferecendo. E então você pode dar uma olhada nas cores, ver como o anteriormente usava essa família de fontes com essas cores diferentes. Talvez se você tiver a capacidade de fazer isso, talvez possa mudar essas cores. Talvez você possa incluir algumas cores mais escuras, algumas cores mais claras. Talvez você possa adicionar tons dessas cores diferentes que eles já estão usando ou introduzir novas cores inteiramente ao projeto para dar mais vida e trazer mais adeptos ao projeto. em que você está trabalhando. A outra maneira de fazer isso é com novas fontes. E quando você estiver escolhendo novos fundos, preste atenção ao que eu já mencionei em um dos vídeos anteriores. Considerado pelo projeto em si. Obviamente, você não vai usar essas fontes ousadas, brilhantes e malucas. Se você está criando um site para um banco, talvez porque o banco esteja tentando transmitir um sentimento de confiança, de segurança, de estabilidade. Eu não conheço nobreza em alguns casos. Então você quer prestar atenção nisso. Sobre o que é o seu projeto? O que é que ele tentou transmitir aos próprios usuários. Portanto, você precisa usar essas fontes que corresponderão bem com a equipe do projeto. Claro, se o projeto estiver bem, digamos que você esteja fazendo um site para uma empresa de quadrinhos ou loja de brinquedos ou qualquer tipo de conteúdo relacionado a crianças, como jogos ou flushes ou móveis, o que quer que tenha a ver com crianças. Mas mesmo com crianças, ainda há alguns limites quanto a quando você pode usar certas fontes, como você pode usá-las. Como a herdabilidade é realmente a chave, especialmente online, você quer ter certeza de que suas fontes são legíveis no final do dia, não importa quem seja seu público-alvo, não importa se é sério ou brincalhão, se for colorido, todo monocromático, você ainda quer saber se é legível ou não. E como você pode fazer isso é testá-lo em dispositivos diferentes. Quando você cria um site, por exemplo, você precisa testá-lo em telas grandes como telas de desktop e telas de laptop, mas também precisa garantir que ele funcione bem e que seja legível em telas menores, como Formulários. Se você estiver usando algo como o Webflow, é muito fácil de fazer. Basta criar uma página responsiva a partir do seu design e simplesmente enviar o link para si mesmo, talvez enviar esse link para alguém que seja mais velho, o novo talvez, e veja se eles conseguem ler facilmente se a cor o contraste é bom, se os pesos da fonte forem bons, se o seu ritmo de cor for bom. Para que eles possam realmente ler em voz alta. Eles podem realmente entender isso e podem ver o que você estava tentando transmitir naquela página específica. Portanto, certifique-se de sempre testar, sempre pense com antecedência. Com quem você está falando? Com quem você está falando? Quem é seu público principal? E a fonte é legível usando essas cores contra esse plano de fundo? 6. Combinação de fontes: Às vezes, em alguns exemplos, você quer usar famílias de fontes diferentes, como no exemplo que eu mostrei anteriormente com esse site de viagens. Talvez você queira mostrar uma seção diferente dessa página ou um aplicativo móvel usando determinada família de fontes. E então outra seção, talvez você queira que eles sintam que estão lendo um artigo. Portanto, você não vai usar uma fonte maluca maluca. Você só quer somar uma fonte comum e antiga que seja realmente legível, compreensível e super fácil ver e ler. Portanto, você precisa saber sobre emparelhamento de fontes e como você pode emparelhar fundos? Bem, existem diferentes ferramentas on-line que podem ajudá-lo com isso. E vou mostrar algumas neste vídeo em particular. Então, aqui estamos nós com a primeira variação desses tipos de frio. E eu já criei um vídeo no YouTube. Vou vinculá-lo aos recursos da turma. Você pode simplesmente clicar e assistir ao vídeo inteiro onde eu explico todas essas ferramentas diferentes. Mas vou apenas dar uma visão geral rápida. Neste vídeo em particular, você tem inspiração e guias, orientando como emparelhar essas diferentes fontes. Mais uma vez, tudo se resume ao que já foi mencionado algumas vezes neste vídeo, o tópico do seu projeto e o público com quem você está tentando falar. Portanto, você não vai usar algumas fontes malucas, pois elas continuam mencionando para banqueiros, por exemplo, ou algum público sério. Mas você pode ir ao contrário com as crianças e usar algumas cores mais divertidas e usar algumas fontes mais divertidas. Portanto, a inspiração de tipo é o primeiro site e você pode escolher muitos estilos diferentes. Você pode ver Open Sans e creme. Alguns textos são as fontes usadas aqui. Essas são as cores. Você pode escolher cores diferentes. Aqui você pode escolher fontes de título, você pode escolher fontes corporais. A fonte do título é esta aqui na parte superior , usada para cabeçalhos ou títulos. E a fonte do corpo é essa aqui, que é usada basicamente para parágrafos e para todo o conteúdo que contém mais texto. E é mais voltado para tarifas mais longas. Basicamente, os títulos são mais glândulas, mas você também pode lê-los com qualquer glândula muito rapidamente. Mas parágrafos, você pode realmente ter que gastar seu tempo lendo-os. E esse é o ponto principal aqui. Com parágrafos, você pode explorar com várias fontes e pesos de fonte diferentes. Mas com parágrafos, você quer ter certeza de que sua fonte é legível, que a cor tem um bom contraste com o fundo. E realmente não é muito esforço para seus olhos gastar mais tempo lendo este artigo, especialmente se houver um artigo mais longo, se você estiver fazendo um site para, para notícias, por exemplo, isso é extremamente importante. Esse é o principal problema que você deve enfrentar primeiro e imediatamente nesse projeto específico, porque o objetivo de um site de notícias é as pessoas passam muito tempo lendo esses artigos. Portanto, você quer ter uma ótima fonte que seja realmente legível. E esses títulos que são realmente visíveis porque você não quer eles se destaquem muito, especialmente nesses tipos de sites, porque você quer que eles continuem se movendo para a leitura esses artigos abaixo. Então, explore este site. Como eu disse, vou apontar para o vídeo que eu já criei no meu canal do YouTube sobre essas coisas. E eu explico isso com mais detalhes. E eu vou deixar os links nesse vídeo, então não deixe de conferir. par de fontes é outro. Então você pode ver aqui que temos uma placa com serifa sensorial. Então você pode ver que é uma espécie de caligrafia de exibição monoespacial gorda. Portanto, existem vários desses estilos de fonte diferentes que você pode escolher. E você pode ver todas essas fontes importantes e a fonte principal. Você pode ver combinações aqui, você pode ver mais emparelhamento de fontes. Então, vamos escolher as fontes de exibição e mostrarão todas essas fontes de exibição. Você pode explorá-los. Então temos isso, que são pares de fontes, ponto py people.com. Você pode selecionar uma família de fontes aqui. E depois de fazer isso, você pode escolher diferentes estilos de textos e o estilo. Então isso é regular, isso é negrito, esses textos secundários de laje, que são os textos de parágrafos que acabamos de mencionar. E então ele vai te dar os pares disponíveis. E, finalmente, font joy, que é super, super simples de usar. Então, temos o Generate e ele vai gerar um emparelhamento de fontes diferente. Você pode escolher mais contraste ou pode escolher mais semelhança ou contraste equilibrado. Você pode ir entre preto e branco para ver como vai ficar. Especialmente se você estiver criando um modo escuro em seu site ou aplicativo, poderá ver pares de fontes e diferentes tamanhos de texto, pesos diferentes e assim por diante. Então aqui temos Montserrat, que é este aqui. Aqui temos essa fonte Varney simulada, que é essa aqui. Assim, você pode ver H1, H2 e parágrafo ou título um título dois parágrafos ou um título principal , subtítulo e parágrafo. Sanchez é o texto do parágrafo em si. Então você pode clicar em. Isso o levará ao Google Fonts, que é o que essa fonte Sanchez é quatro. E então eu posso clicar aqui e eu posso escolher, eu não sei, talvez este só para ver como fica. Se eu não gostar, ele vai em frente e mudar isso. Então, digamos, eu realmente não gosto desses ou deste. Talvez eu possa escolher algo um pouco mais brilhante como este. Eu posso trancá-lo aqui. E vai trancar esse Montserrat. Eu realmente não gosto desse, então eu posso ir em frente e gerar mais. Você pode ver que Montserrat está trancada, talvez eu goste deste, mas eu não gosto deste. Nós podemos ir direto ao ponto. Você ainda pode rolar até o fim. E no final, quando você encontrar a combinação de fontes perfeita que deseja usar, como mencionei, você pode clicar aqui. Isso vai te levar para o Google Fonts. Certifique-se de baixar a família de fontes Montserrat in Montserrat e, em seguida, corte-as. E o pilão Quinn, neste exemplo em particular, garante o download de todos eles, instalou-os em uma máquina. Então você tem todos esses pesos de fonte diferentes, como eu mencionei, negrito normal e muito mais. Lá vai você. É assim que é fácil emparelhar fontes. Certifique-se de prestar atenção ao seguinte, ao contraste, à legibilidade e ao tópico do que você está projetando em primeiro lugar. Você resolve tudo isso. Então, será muito fácil projetar e dificilmente será fácil de testar. E falando sobre testes, certifique-se de sempre testar com seu público, especialmente se você tiver acesso a eles. Então, por exemplo, se você está projetando para crianças, talvez você possa ter acesso a crianças e ver como elas estão interagindo com o protótipo, como elas estão interagindo com o site, com o aplicativo móvel. É fácil para eles entenderem onde precisam clicar em nosso site do que tropeçar nesses diferentes elementos do seu design. Talvez algo esteja atraindo muita atenção deles. Ou se você estiver trabalhando com o público mais velho, talvez como eu continuo mencionando os bancos, talvez você tenha acesso às pessoas que estão trabalhando no banco. Se você está trabalhando para um banco neste caso específico, talvez você possa testá-lo com eles, dar a eles uma tarefa concreta, ver como é fácil para eles encontrarem essa tarefa, como é fácil para eles para navegar pelo seu aplicativo e como é fácil para eles lerem o texto você está tentando mostrar nessa página específica. 7. Escala de fonte: Ao projetar para a Web ou para aplicativos móveis, você deseja ter uma escala consistente em todos os tamanhos e pesos de fonte. E isso pode ser conseguido com uma escala de fonte. Você pode criar escala de fonte, seja muito mais fácil para os desenvolvedores entenderem mais tarde qual tipo de tamanho de fonte é para quê, e é isso que você pode incluir em seu guia de estilo, apenas para mostrá-las ao lado de seu cores, ao lado de suas imagens, seus estilos e muito mais. Então, neste vídeo, vou mostrar a você como criar uma escala de fonte fácil. Você não precisa usar essa abordagem. Você pode encontrar outras abordagens on-line. Existem literalmente dezenas de abordagens diferentes on-line. Veja qual funciona para você, seu projeto e suas finalidades de dimensionamento. Então, vamos começar. Então, aqui estamos no Adobe XD e vou mostrar a você como criar uma escala de fonte rápida usando o Adobe XD. Se você estiver usando o Figma Photoshop, tudo o que você puder criar lá. Mas para isso, vou usar x D porque gosto muito e uso todos os dias. Então, vou clicar em T para criar H1, por exemplo. Então o que eu vou usar é, digamos, uma garrafa como essa. Em vez do normal, vou escolher , digamos, preto. E eu vou com o tamanho de 80. Tão realmente grande. E esse vai ser o meu H1. Talvez, talvez até maior, talvez 88, algo assim. Lá vamos nós. Então eu vou pressionar Control D ou Command D, e abaixar isso para talvez algo como 64. Lá vai você. Em vez de preto, vou usar o parafuso. E em vez de H1, vou chamá-lo de H2. Então, o que é criado aqui é uma clara distinção entre Heather. Heather. Heather One é algo que vou usar nas minhas imagens de herói, por exemplo, no centro do próprio design, no centro dessas imagens de herói. Ao contrário do exemplo que mostrei anteriormente. Mas isso é apenas mais acentuado, maior, mais ousado, preto neste caso, mas este é ousado porque talvez eu queira usá-lo como o título das minhas seções talvez ou algo assim. Portanto, é ousado e não preto e é 6488. Então, se descermos um pouco mais, você pode criar um H3 neste caso. E em vez de 64, talvez possamos usar 48 para este caso. E em vez de parafuso, na verdade não, vamos manter isso em negrito para isso. Então, se descermos um pouco, podemos criar algo como H4. E em vez de 48, talvez possamos ir com 40, neste caso n. Vamos usar um regular desta vez. Assim, você pode ver claramente a distinção entre eles. Então, se descermos um pouco o H5, e neste caso talvez possamos usar algo, eu não sei, 24. Talvez, lá vamos nós. Talvez possamos usar isso como texto de parágrafo ou alguns exemplos ou algo parecido, algo que é um pouco menor e H6, vamos com, eu não sei, 16 talvez nos meus casos realmente não queira ir mais do que 16. Portanto, temos H1, H2, H3, H4, H5 e H6. Talvez você possa renomear esse H6 e chamá-lo de textos de parágrafo. Talvez você possa mostrar algo assim para seus desenvolvedores, ver o que eles pensam. E o que você também pode fazer é pressionar Control D Mais uma vez em cada deles e digitar o alfabeto. Então a, a, B, B, B, C, C, D, D, E, e assim por diante e assim por diante. Assim, você pode digitar o alfabeto inteiro e mostrar peso da fonte e o tamanho neste exemplo específico sobre o alfabeto, ou outra coisa que você pode fazer é usar algo como, Não sei, texto de Lorem Ipsum ou algo parecido. Não tenho o atalho de teclado aqui e não tenho o plug-in instalado aqui. Então, vamos com isso. Então Lorem Ipsum ROC conheceu, talvez eu possa copiar este texto e então eu possa fazer o mesmo com este. Basta colar. E o que isso permitirá que você faça é mostrar ao seu cliente e aos seus desenvolvedores como será o texto específico em casos de uso específicos. Então, digamos que eu comecei propositalmente com essa cor em particular. E por que eu escolhi fazer isso é apenas para mostrar as principais diferenças entre esses textos. Mas neste caso em particular, o que eu faria propositalmente é ir em frente rapidamente e mudar essa cor para algo muito, muito, muito mais escuro. E talvez salve aqui mesmo como uma amostra de cor. Ou posso ir em frente e editar aqui mesmo as minhas cores. Então o que eu posso fazer é. Livre-se dessa. Talvez eu possa ir em frente e escolher a mesma cor, mas vá alguns passos até algo assim, depois escolha uma cor diferente. E o que você pode fazer é dar nomes às suas amostras imediatamente. Então este é H2, cor. Lá vai você. Este é o H1. E talvez possamos ir ainda mais longe. Desculpe, vamos ver se isso é um H2. Então eu posso voltar e usar o H12 e depois dar um passo à frente, algo assim. Guarde bem aqui, salve bem aqui, chame isso de três anos. Lá vamos nós. E então, finalmente, talvez eu queira ir com algo ainda mais brilhante. Para este, talvez, talvez não, mas tudo depende muito de você. Talvez algo parecido com isso. Lá vai você. E eu posso dar a ele o nome de H4. Nesse caso específico, você pode ver que eles são muito parecidos. Mas aí está o objetivo deste vídeo, mas seus clientes talvez tenham a cor principal, digamos que o azul seja suas cores principais. Então, neste caso, podemos escolher algo como três C6 FF talvez. Azul muito brilhante e forte, talvez essa seja a cor principal deles. Então, como você pode incorporar essa cor ao seu design? Obviamente, você não vai usá-lo para isso. Isso é realmente para seções de heróis e outras coisas, que eu já mencionei. Talvez você vá usá-lo para cada três. Então três é C6, F, F. E, como você pode ver imediatamente, parece muito melhor neste exemplo do que neste exemplo. Por que isso? Porque se você usá-lo para o maior tamanho de texto que você tem em seu design, ele só vai roubar a atenção do usuário de todo o resto. Isso não é algo que você queira. O texto está realmente lá para explicar coisas para orientar seus usuários sobre o que eles precisam fazer a seguir e, para realmente ajudá-los, alcançaram a meta sua visita em seu site ou aplicativo móvel específico. Então, nesse caso, eu usaria cores para texto, algo assim. E eu não o usaria para textos de parágrafos porque, como mencionei anteriormente, você quer que seus parágrafos sejam legíveis. Você quer que eles sejam facilmente compreensíveis e que seus usuários possam navegar facilmente por todo o seu design. Então, uma última coisa que eu esqueci de fazer é salvar essa cor. Nós já temos isso. Lá vai você. Então H5, eu quero salvá-lo. Lá vamos nós. H5. E vamos usar a mesma cor para o parágrafo em si. E uma última coisa que eu quero fazer é selecionar todos os meus tamanhos de fonte e vir aqui para os estilos de caracteres e clicar lá. Então você pode ver que vai classificá-los, algo assim. Mas o que eu posso fazer é ir Control ou Command Z. Clique aqui para salvar este para ser o primeiro. E então assim, e depois assim, e apenas suba e suba e suba. Lá vamos nós. E, claro, você pode renomeá-los. Você pode vir aqui e digitar H1. E você pode fazer isso com todos esses outros. Então H2, H3 e assim por diante e assim por diante. Não vou te incomodar muito com isso. Mas o ponto principal aqui é renomeá-los. Então, como eu disse, é muito mais fácil para os desenvolvedores entenderem mais tarde o que você estava tentando transmitir se você não for desenvolver esse design sozinho. Então lá vamos nós. É assim que é super fácil de usar. E você pode ver se você estragou tudo como eu fiz anteriormente, você pode simplesmente ver os fliperamas em H1 selecionados aqui. Ou se você acidentalmente alterou a cor, você pode ir em frente e ver, ok, é um clique H1 bem ali, e ele vai usar a cor correspondente. Então você pode ver como isso é super simples. E vou fornecer este arquivo, que acabei de mostrar como um arquivo de prática para você , para que você possa testá-lo. Dê uma olhada, explorado por si mesmo, talvez brincando com essas cores diferentes que acabaram de ser mostradas a você, ou talvez famílias de fontes diferentes inteiramente. Então, usamos o Roboto neste caso específico, talvez você queira usar algo com uma superfície interna, como a fonte de exibição Playfair, que mencionei anteriormente, ou você quer ser ainda mais ousado do que Roboto? Você pode fazer isso direito. Ali. Lá vamos nós. Essas são as escalas de fonte, e é assim que se usa. Como eu disse, você terá esse arquivo de prática, certifique-se de explorá-lo, certifique-se de brincar para obter um resultado perfeito. Ou se você não gosta dessa abordagem de oito pixels em uma parte, como eu disse no início deste vídeo, você tem vários desses exemplos diferentes online. Certifique-se de explorá-los por si mesmo e ver o que funciona melhor para você. 8. Seu projeto do curso: Seu projeto de classe é criar sua própria escala de fonte, salvá-la como uma imagem e carregá-la em seus projetos de classe. Assim, eu e todos os outros no curso podemos ver o que você criou. Então você pode usar este modelo que vou fornecer nos documentos da aula. Você pode baixá-lo e brincar sozinho. Certifique-se de usar fontes diferentes, famílias de fontes em cores diferentes apenas para obter resultados diferentes. E você pode explorar com duas fontes. Eu não recomendaria ir além disso porque eu realmente não gosto quando as pessoas estão usando mais de duas fontes, eu realmente não acho que seja necessário, mas você pode fazer o que quiser com ela, ou você pode até mesmo adicionar mais tamanhos. Você pode brincar com tamanhos diferentes e pode ver o que eu criei aqui com todas essas cores e estilos de personagens diferentes, certifique-se de brincar com eles para alcançar o resultado perfeito. E então, como eu disse, faça o upload para seus projetos de classe. Estou ansioso para ver o que vocês vão criar e estou animado para ver como vocês vão adaptar esse modelo que criei no Adobe XD. 9. Conclusão: Então aí vai você, Isso é tudo para esta aula. Eu realmente espero que você tenha um entendimento melhor sobre famílias de fontes, sobre fontes, diferentes pesos de fonte, como e quando usá-las, bem como sobre o que é Sarah para um sensível e quando usar estes, bem como, finalmente, o que é uma escala de fonte e como usá-la. Eu realmente espero que você tenha gostado dessa aula. Não deixe de conferir o PDF com todos os recursos que mencionei. Certifique-se de verificar o arquivo de prática e ver como ele se parece. Dê uma olhada e brinque por si mesmo. Muito obrigado por assistir a essa aula. Se você quiser ter certeza de conferir minhas outras aulas, especialmente em minhas masterclasses, que são cursos com mais de 20 horas de duração, entrando em muitos detalhes diferentes sobre todas essas coisas. Muito obrigado por assistir. E, finalmente, certifique-se de verificar meu canal no YouTube, que é o impacto total do conteúdo gratuito, tudo sobre seu design UX, técnicas de renda passiva e muito mais, tudo feito dentro do grau adobe XD, tanto por assistir a este. E até a próxima vez, tome cuidado.