Fundamentos da tipografia da interface do usuário *ATUALIZAÇÃO COMPLETA DE 2024*

1. 00 fundamentos de tipografia de introdução: Bem-vindo a este curso abrangente sobre os fundamentos da tipografia de interface tipografia é um elemento-chave no design, dando vida ao seu trabalho e orientando Durante este curso de 1 hora, gostaria de dar uma visão geral sobre um lado mais técnico da configuração e do trabalho com tipografia na web Começaremos com o básico, como onde encontrar fontes, quantas são necessárias para uma boa configuração de interface de usuário e por que as superfamílias são Mostrarei como criar uma hierarquia sólida configurando uma escala de tipos de maneiras diferentes nas quais você pode fazer isso Aprenderemos como nomear têxteis de forma eficaz e mostrar que não interferimos na configuração do código e na otimização de mecanismos de pesquisa E demonstrarei por que é tão importante usar unidades de RM vez de pixels assim que seu design ganhar vida no código Aprenderemos sobre a espessura da fonte e as fontes variáveis, e explicarei como a altura da linha funciona em CSS e o que isso significa para sua configuração de tipografia Também exploraremos a importância do contraste de cores e como verificá-lo e documentá-lo. E o mais importante, veremos mais de perto como lidar com a tipografia em diferentes tamanhos de tela Isso inclui examinar configurações com pontos de interrupção, bem como uma abordagem mais moderna para tipografia fluida Embora o foco esteja no aspecto teórico, preenchendo a lacuna entre design e código, também daremos uma olhada na implementação prática usando ferramentas como Da configuração básica de texto, mais duas técnicas avançadas como o uso de estilos, variáveis e modos. Seja você um designer iniciante ou experiente, isso ajuda você a refinar habilidades tipográficas e sua Este é um curso de MonaRo A. MonaRo A. 2. Visão geral: Provavelmente, não há nenhum tópico em design cercado por designs melhores para operar do que a tipografia Não se deixe intimidar. Não se trata de obter um PhD. Trata-se de entender algumas regras básicas para garantir que sua tipografia tenha uma para garantir que sua tipografia E eu vou te mostrar. O importante é entender que, em vez de ler cada palavra on-line, as pessoas tendem a digitalizar texto. Então, sobre o que é esse texto? Sim, isso foi o suficiente. E sobre o que é esse texto? É exatamente o mesmo, mas, como você pode ver, parece muito diferente porque tem uma hierarquia de trabalho Temos muitos elementos, como tamanho, peso, cor, posição e espaçamento, para criar essa hierarquia, e vamos examinar todos eles com mais detalhes Também é muito importante para mim mostrar um pouco como isso funciona no código para melhor traduzir e comunicar nossa configuração entre design e desenvolvimento. Então, durante este curso, falaremos sobre tipos de letra e fontes e qual é a diferença real Serif e as chamadas superfamílias. Vamos discutir onde encontrar tipos de faces para usar e quantas precisamos para um bom design de IA. Vamos configurar uma escala de tipos juntos e vou mostrar maneiras diferentes de fazer isso. Vou explicar por que usamos RM para código e pixels ao definir tamanhos para programação Vou falar sobre nomes e por que é tão importante acertar Vamos falar sobre peso, altura e comprimento da linha, bem como espaço em branco. E vamos discutir o contraste, um tópico muito importante quando se trata de acessibilidade. E, muito importante, vamos nos aprofundar tipografia responsiva para garantir que seu texto tenha uma ótima aparência em todos os Aqui, consideraremos configuração tradicional com pontos de interrupção, bem como uma abordagem mais moderna usando CSS clamp e discutiremos quando faz sentido usar Embora este curso se concentre em aspectos teóricos, ao longo do caminho, também daremos uma olhada na implementação prática usando ferramentas como Figma, desde a configuração básica de texto até técnicas mais avançadas, como o uso de estilos, variáveis e modos, além de como se alinhar às configurações de design responsivo E, claro, muitas dicas e truques, além de alguns exemplos da vida real ao longo do caminho. 3. 02 typefaceandfont e áudio: Tipo de letra e fonte. O que é um tipo de letra? É um conjunto de caracteres de design, incluindo letras, números e pontuação Nesta apresentação, estou usando um tipo de letra chamado Poppins Uma fase de texto inclui variações como extra negrito, negrito, regular, condensado e assim por diante Uma fonte, por outro lado, é um estilo e tamanho específicos de uma fase de texto. Portanto, enquanto a fase de digitação se refere ao design dos caracteres, a fonte se refere a um estilo e tamanho específicos desse design. Por exemplo, Poppins em negrito de 16 pontos, isso é uma fonte. Embora o termo correto seja tipo de letra, muitas pessoas usam afeto para significar ambos É uma confusão comum, mas não é grande coisa, desde que você entenda a diferença em seu trabalho diário 4. 03 Serif, sem serifa e superfamílias: Serif, San Serif e superfamílias. Existem muitas categorias de fontes, mas as que você realmente deve conhecer e San Serif, pois são fundamentais para entender papel da tipografia na legibilidade e na estética do design Identificar a diferença entre eles é bem simples serapões incluem um traço extra ou elemento decorativo no final da carta, o que pode melhorar a legibilidade no material impresso ao guiar o olho por Exemplos clássicos incluem times New Roman e Garamond. Entender quando e por que usar cada tipo pode afetar significativamente a eficácia do seu projeto. Se você está buscando um visual tradicional com serapões ou um toque mais contemporâneo com um Vamos entender isso um pouco melhor. fontes San SRF, caracterizadas por sua aparência limpa e moderna, são uma escolha popular para telas digitais e conteúdo on-line Exemplos notáveis incluem Helvetica e Inter. Essas fontes transmitem informações rápidas por tamanho de forma eficaz, tornando-as ideais para espaços menores, como rótulos sob ícones ou interfaces digitais em geral Eles oferecem uma boa legibilidade em vários tamanhos e resoluções de tela As faces do tipo SP, com seus elementos decorativos nas pontas das letras, oferecem uma aparência mais tradicional e sofisticada. Esse estilo clássico é ideal para criar uma atmosfera de confiança e autoridade, também em conteúdo digital. Eles também podem ajudar a adicionar um toque de elegância e formalidade a sites e aplicativos, especialmente em ambientes como revistas on-line, plataformas acadêmicas e Embora os serapões sejam frequentemente associados à impressão, eles também podem ser usados em design digital Seus seraps detalhados podem ajudar a guiar o olho ao longo das linhas de texto, tornando-os adequados para leituras mais longas em telas de alta resolução, onde a legibilidade é aprimorada Você também pode incorporar fontes era e San sera em seu design, alternando entre o corpo do texto do título, ou talvez escolher um Serafond para uma No entanto, alcançar um design harmonioso requer ajustes cuidadosos Os tamanhos de fonte, por exemplo, podem ser exibidos de forma diferente entre os dois estilos. O que funciona para um pode não ser adequado para o outro. Se você está pensando em misturar fontes serafim ou San sera, recomendo usar o que é conhecido como Como o termo sugere, uma superfamília é uma coleção de faces tipográficas projetadas para se complementarem harmoniosamente, apesar de uma ser serafim e a outra San serp Essas superfamílias geralmente incluem variações adicionais, como versões arredondadas, condensadas ou em forma de tapa Graças ao DNA compartilhado, como a mesma base, tamanho, proporções e espaçamento, você pode misturá-los facilmente sem perder a harmonia geral do seu design 5. 04 Onde encontrar fontes: Onde encontrar fs. Existem três lugares de onde você pode obter seus tipos de letra Se você trabalha para uma grande empresa, eles podem ter seu próprio tipo de letra personalizado que disponibilizarão para você Por exemplo, AB e B têm cereais, uma fonte muito bonita Agora, é importante saber que, embora você tenha o tipo de letra instalado no seu computador, você só poderá usá-lo com essa empresa específica A segunda opção é comprar uma licença. Existem muitas páginas, como MyFons ou fun shop onde você pode navegar e encontrar fontes incríveis. Deixe-me te mostrar. Aqui estamos em minhas fontes, e você pode pesquisar fontes, por categoria, por best-sellers e assim por diante Vou escolher a categoria e dizer que estamos procurando uma fonte Sansa Então, temos mais filtros aqui à esquerda, o que é muito útil. Podemos ver fontes diferentes aqui embaixo e temos uma prévia muito boa. Vamos escolher este. Gosto muito desses exemplos que eles nos dão para que você tenha uma boa ideia de como criar com eles. Agora, aqui embaixo, você obtém as informações sobre os diferentes pesos das fontes e também pode ver se deseja um pacote familiar ou estilos individuais Normalmente, faz sentido optar pelo pacote familiar, e você obtém as especificações técnicas e, muito importante, o licenciamento Isso é algo que você realmente precisa analisar com seu cliente para ter certeza de que o que está comprando tem o direito de usá-lo e está ciente do custo. Você pode então simplesmente clicar em uma vez que você decidir, e então você pode escolher o que você está planejando usar essa fonte. E então, por exemplo, queremos uma versão para desktop para projetar e queremos incorporá-la em um site, e então você pode ver aqui que isso é calculado por visualizações Você precisaria instalá-lo em sua máquina para acessar o software de design de interface do usuário, como o IGMA A terceira opção será usar uma fonte gratuita. existem alguns pré-instalados no Já existem alguns pré-instalados no seu computador, como o Aerial Elas são boas como fonte alternativa, mas você pode perceber que não são suficientes para o design da sua interface Um ótimo lugar para digitar rostos gratuitamente são as fontes do Google. É muito popular, tem ótimas opções e é super fácil de usar. Esteja ciente de que sempre que você compra algo on-line gratuito , geralmente vem acompanhado de alguma troca de dados. Esse também é o caso aqui. É muito pequeno, absolutamente nada trágico, mas você ainda deve informar seu cliente se quiser usar uma fonte do Google A propósito, é o mesmo para o Google Maps. Vamos dar uma olhada em como a fonte do Google funciona. mais importante é que existem muitos, se você clicar nos filtros, poderá preencher as diferentes fontes. Então, digamos que queremos apenas o Sanserf ou, se você está procurando suporte a um idioma específico , isso é muito útil Agora vamos clicar no primeiro aqui em cima. Na verdade, estou tomando Open Sans. Gosto bastante deste. Depois, você pode obter uma prévia. Você também pode digitar o texto que quiser. Se clicarmos em gFont, obteremos mais informações. Se você quiser saber mais, clique em Design, e isso será relevante para você. Também obtemos todas as informações necessárias para o desenvolvimento. Eles provavelmente continuam recebendo o código incorporado e, em seguida, aqui estão todas as informações técnicas Eles literalmente só precisam saber qual deles você deseja usar. A propósito, se você trabalha na Figma , não precisa fazer nada Você nem precisa baixar a fonte, pois tudo já está pré-instalado no Figma desde que você esteja usando o Google Fonts 6. 05 Quantos tipos de fontes: Quantos tipos de faces você deve usar? Então, quantos tipos de faces você deve ou poderia ter em seu design. Geralmente, é recomendável não ter mais do que dois. Você pode ter um tipo de letra muito dominante, chamado de display, que faz parte da marca e usa apenas os títulos principais, como caligrafia ou algo muito especial, que não é realmente legível e seria Para todos os outros textos, você adicionaria outro tipo de letra que fosse muito legível e simples de usar A menos que você esteja realmente confiante com tipografia ou tenha uma determinada marca a seguir, eu recomendaria ficar longe dessas fontes de exibição sofisticadas Você realmente não precisa deles para um design sólido. No entanto, se você quiser faces de tipos mistos, como Saraf, San Saraf, arredondadas e assim por diante, recomendo que você considere usar uma superfamília, pois elas funcionam muito bem juntas Então essa seria outra razão pela qual você pode ter dois tipos de faces. No entanto, a menos que você esteja usando uma fonte de exibição ou misturando categorias como Serif e San Serif, você provavelmente acabará com duas faces de tipo muito semelhantes, e então é muito melhor usar apenas Pessoalmente, recomendo começar e usar apenas um tipo de letra sempre que possível Para ser sincero, raramente uso mais, e você ainda pode adicionar essa variação usando tamanhos, pesos e cores diferentes para criar sua hierarquia E isso geralmente é mais do que suficiente. Resumindo, a menos que sua marca exija um tipo de tela proeminente ou queira misturar estilos como Serif e San Serif, onde eu recomendaria procurar superfamílias, onde eu recomendaria procurar superfamílias, opte 7. 06 A escala de tipos: Criar uma escala de texto significa organizar os tamanhos dos textos de forma consistente, o que é fundamental para criar hierarquia É como dar a cada texto seu próprio nível de importância, tornando tudo mais fácil entender e visualmente atraente Ao configurar uma escala de texto, geralmente começamos configurando um tamanho de fonte base, que geralmente se alinha com o tamanho do corpo do texto, já que é o mais usado. Uma opção popular são 16 pixels, que também equivale a um RM, o tamanho padrão que os navegadores o tamanho padrão que os navegadores É claro que você pode alterar o tamanho se quiser, mas geralmente é melhor manter esse tamanho básico de 16 pixels ou uma RAM. Você pode, é claro, aumentar. Isso facilita a leitura. Pessoalmente, gosto de segui-lo porque ele também se encaixa muito bem no meu sistema geral de múltiplos de quatro e oito, que eu uso em todo o meu design para alinhamento e espaçamento muito bem no meu sistema geral de múltiplos de quatro e oito, que eu uso em todo meu design para alinhamento Então, depois de definir nosso corpo de texto, podemos configurar nossa escala em torno dele. Não há uma maneira única de configurar isso. Mas, no mínimo, eu adicionaria algumas manchetes. Links de botões e talvez uma legenda. E é claro que você pode ajustar isso ainda mais às suas necessidades. Por exemplo, você pode ter mais de uma versão para o corpo do texto. Isso pode variar em tamanho. Ou, no meu exemplo, eu uso estilos enfatizados e alguns regulares Além disso, talvez seja necessário adicionar alguma formatação em itálico para citações ou dividir os títulos em categorias de exibição As manchetes exibidas seriam uma grande abertura para chamar a atenção enquanto as manchetes normais se misturariam mais perfeitamente mais Então, isso realmente depende das necessidades do seu design. Mas mesmo que você possa aumentar sua escala de tipos o quanto precisar, eu sempre recomendaria mantê-la mais simples e condensada possível Em uma folha de estrelas, também fornecemos informações gerais. Por exemplo, a família de fontes que vamos usar, no meu caso, Poppins, queremos dar algumas informações sobre o tamanho e observar que, embora em muitos softwares de interface do usuário, ainda usamos pixels para definir Em CSS, usamos RAM. Então, eu pessoalmente prefiro fornecer as duas medidas para maior clareza. Um RM corresponde a 16 pixels, então é muito fácil calcular isso a partir dos valores de pixels Além disso, queremos comunicar o peso. Novamente, gosto de dar o nome que uso no meu software de interface do usuário, bem como o número CSS. E também adicionamos informações sobre a altura e o espaçamento da linha Eu estava um pouco preguiçoso aqui e, no meu exemplo, acabei de adicionar um pouco de espaçamento para o meu botão E, finalmente, também incluímos uma prévia do nosso texto. Normalmente, ao estabelecer nossa escala de tipos, começamos com o tamanho menor da tela. Se necessário, podemos adicionar pontos de interrupção e especificar como nosso arquivo se adapta em diferentes tamanhos. Existem diferentes abordagens para isso. Alguns mais modernos nem precisam mais de pontos de interrupção, mas discutirei isso em um vídeo separado Portanto, essa visão geral de como nossa tipografia funciona em nossos produtos em tamanhos diferentes é realmente o que estamos procurando Agora, você pode começar seu design criando uma escala de tipos, mas talvez também queira começar a projetar livremente e, quando se sentir confortável com o fato de seu design seguir a direção certa, talvez queira organizá-la um pouco em uma escala de tipos. E você pode absolutamente fazer isso. Então, o que eu faço é que eu configurei meu design de forma muito vaga E então, quando sinto que quero trazer isso de uma forma mais organizada, escolho a área diferente. Então, eu pego aleatoriamente títulos e corpos de textos diferentes e os alinho Também posso ver quais são semelhantes, então eu os combino em um tamanho e agora posso criar uma hierarquia Depois de ter a hierarquia e ver de quais estilos preciso, dou a eles alguns nomes, faço um pedido e, a partir daqui, posso pegá-la e transformá-la na escala de tipos de que preciso Você pode abordar da maneira que funcionar melhor para você. 8. 07 Sistemas de escala diferentes: Diferentes formas de escalar. Você pode escolher um tamanho para sua escala tipográfica de forma completamente aleatória, se quiser, honestamente, isso funcionaria Mas em seu design, geralmente é melhor ter um pouco de sistema e consistência. Mostrarei duas abordagens populares, uma escala fixa usando o sistema de escala de oito pontos e uma escala modular usando uma proporção Gosto de manter as coisas simples em meu design usando um múltiplo de quatro ou oito para todos os meus tamanhos, incluindo tipografia Normalmente, uso múltiplos de oito, como 16, 24 e 32 para meus tamanhos de fonte Eu não sou muito rigoroso com isso, então se eu precisar misturar tudo para obter a aparência que procuro, eu simplesmente dou um salto maior, mas ainda mantenho a consistência. Isso também torna muito fácil definir a linha I como um múltiplo de quatro, o que cria um bom ritmo vertical no design. Não precisa ser quatro e oito, mas você notará que esses números funcionam perfeitamente. Outra abordagem é escalar com uma proporção. Isso mantém muito bem a relação proporcional. Você ainda começa com o tamanho da base e depois multiplica para cima usando a proporção escolhida, crescendo Você pode jogar com proporções diferentes para ajustar o crescimento. As proporções populares são feitas para terceiro, perfeito, quinto e gol e proporção, mas há muito mais por onde escolher Existem ótimas ferramentas on-line que podem ajudá-lo a configurar isso, então você não precisa resolver isso manualmente. Deixe-me te mostrar. Há muitas opções diferentes, e vou usar type scale com para meu exemplo. No site, deixe o corpo do texto intocado, mas logo abaixo, no menu suspenso, você pode escolher proporções diferentes e Você também pode escolher uma fonte diferente , desde que seja uma fonte do Google, brincar com o peso e assim por diante. No lado direito, você pode ver uma demonstração de qual seria a aparência da página. Você também pode transformar isso em uma visualização móvel. Isso é muito bom porque você tem uma boa ideia se a hierarquia é o que você procura Você pode escolher entre RM e pixels, e você pode simplesmente selecionar essas informações e traduzi-las para o seu design, bem como para o seu código Se você estiver optando pela versão profissional , também obterá os trechos de código Não é como se uma abordagem fosse melhor do que a outra. Você pode até misturar isso e usar o melhor dos dois mundos. Encontre uma escala de sua preferência e ajuste os números para o múltiplo de oito mais próximo. O mundo é sua ostra. Portanto, a parte importante é que você tenha uma hierarquia clara. Lembre-se de que existe um sistema para ajudá-lo a não restringi-lo. 9. 08 Por que rem e não px: O que é RAM e por que isso importa? A RAM é uma unidade CSS que mede tamanho da fonte em relação ao elemento raiz da página da web. Normalmente, a tag HTML. O tamanho da fonte raiz é basicamente o tamanho padrão da fonte de uma página da web. Isso normalmente é definido para 16 pixels. É como o ponto de partida de todos os outros tamanhos de fonte na página. Então, todo o resto é calculado a partir desse tamanho. É claro que podemos alterar esses tamanhos para nosso design, mas mesmo que não definamos nada, o navegador já vem com sua hierarquia embutida É fácil converter entre RAM e pixels, pois um RM é igual Portanto, 1,5 RM seria 25 pixels e assim por diante. No entanto, os usuários podem ajustar o tamanho. No Chrome, por exemplo, os usuários podem acessar o menu de configurações, escolher a aparência e personalizar o tamanho da fonte. Isso é crucial para pessoas com dificuldades de leitura. Não sabemos se eles usam essa preferência ou o Zoom, mas é essencial respeitar essas preferências caso estejam definidas. Imagine que você define todos os tamanhos de fonte em pixels. Para simplificar, digamos que H um título tenha 48 pixels e o texto do parágrafo, P tenha 16 pixels. Agora, usando pixels como tamanho de fonte, isso age como um valor fixo e substituirá as configurações do navegador É como se eles se desconectassem do tamanho da fonte raiz. Por exemplo, se um usuário ajustou o tamanho da fonte raiz 16-24 em nosso exemplo, a fonte exibida ainda permanecerá em 16 Isso cria uma barreira de usabilidade porque o conteúdo não se adapta à preferência do usuário Mas se usarmos RM em vez disso , essa é uma história diferente Vamos pegar a manchete. Na minha configuração padrão, que a maioria das pessoas usará, três RAM são três vezes 60, então 48, e obtemos o mesmo resultado dos pixels anteriores. No entanto, o usuário que alterou um RM para 24 pixels agora tem o título exibido em um tamanho maior de 72 O melhor é que isso manterá nossa hierarquia intacta pois os diferentes tamanhos ainda se relacionam entre si, assim como Você também pode encontrar unidades EM ou unidades. A diferença entre as unidades RAM e EM é que o RM calcula o tamanho em relação ao tamanho do fundo raiz, enquanto as unidades calculam o tamanho em relação ao tamanho do fundo do elemento pai mais próximo Por exemplo, se o tamanho da fonte raiz for 16, um RM é igual a 16, não importa onde seja usado As unidades podem se compor quando estão aninhadas vários elementos com tamanhos diferentes e herdadas do pai No entanto, o EM, assim como a RAM, respeita as predefinições do usuário, permitindo designs flexíveis e responsivos com base na configuração preferida do usuário Ambas as unidades têm suas próprias forças e fraquezas, dependendo de como são usadas Desenvolvedores e profissionais qualificados lidam com sua combinação de forma eficaz, que normalmente não é uma preocupação para designers. Embora os designers geralmente não precisem considerar nem mesmo a RAM, alguns, inclusive eu, gostam de incluí-la em nossa escala de tipos para reconhecer o uso de unidades diferentes pelos desenvolvedores. E é muito bom para evitar mal-entendidos, mas o designer me deu valores rígidos. Dessa forma, deixamos bem claro que usamos pixels no design da interface do usuário porque é assim que ela é configurada, mas ainda queremos respeitar todas as predefinições do usuário. OK. 10. 09 Peso da fonte e fontes variáveis: Peso da fonte. Entre outros, peso também é um elemento importante da fonte para criar hierarquia Já na maioria dos softwares de design de interface do usuário, você encontrará uma palavra para o peso. Então, algo como negrito normal ou médio. Em CSS, isso é representado por um número. 400, por exemplo, geralmente é normal ou regular e 700 em negrito. Você pode usar esses pesos ao seu gosto. Mas, mais comumente, os títulos são exibidos em algo um pouco mais ousado para se destacar e o texto copiado em algo parecido com o normal, às vezes com alguns destaques em negrito A única coisa em que você realmente deve pensar é em não colocar muita luz no texto da cópia para garantir que ele permaneça legível Portanto, é uma boa ideia manter o normal ou o normal para eles. E, a propósito, nem todos os tipos de letra são estritamente configurados de 100 a 900 Você também pode obter algo assim. Realmente depende do tipo de letra. E outra coisa importante é que só porque você tem todos esses pesos diferentes, isso não significa que você tenha que usar todos eles. Deixe-me mostrar o porquê. Então, aqui estou eu no Google Fonts e agora posso escolher qualquer fonte que eu quiser. Vamos pegar esse aqui. Se eu clicar nela, posso ver os diferentes pesos que vêm com essa fonte específica e posso clicar na fonte G. Agora vamos dar uma olhada no que isso realmente significa. Vamos dar uma olhada no código incorporado que obteríamos. Então, aqui você pode ver isso atualmente. Isso inclui todos os pesos diferentes. E o que posso fazer agora é clicar em alterar estilos. Agora posso desligar todos eles, e você verá que, por padrão, ele deixará o normal ligado, e agora posso escolher aqueles que estou realmente usando no meu design. E, claro, eu sempre poderia adicionar mais se precisasse deles mais tarde. Agora, se você tem um design em que deseja usar muitos pesos diferentes, e isso é o núcleo do seu design, então também é bom e absolutamente possível O que eu recomendo é que dê uma olhada, por exemplo, nas fontes do Google nos filtros e escolha algo chamado fonte variável. Portanto, a fonte variável é um tipo de fonte que permite o ajuste do peso, largura e outros atributos por meio de um único arquivo de fonte. Então, assim como em qualquer tipo de fase, isso nem sempre é o mesmo para todas elas. Por exemplo, vamos clicar aqui no Open Sans e podemos ver que ele tem três eixos Se dermos uma olhada, parece que antes, temos nossos pesos diferentes Mas agora vamos clicar na fonte G e ver o código incorporado que estamos recebendo. Se clicarmos aqui, então você pode ver, temos o peso, temos a largura e temos aqui o itálico Então, esses são os três eixos que podemos mudar. O interessado é o peso. Então, se clicarmos em um valor, teremos exatamente como fizemos antes, clicamos em 300 400 ou mais, e isso é representado aqui. Mas o que também podemos fazer é ter o eixo completo. Agora você pode ver que isso é como se tudo estivesse pronto, e não estamos carregando todos esses estilos diferentes, e isso está apenas dentro dessa única fonte E observe como diz 300 a 800 ao falar sobre nossos eixos de peso Isso significa que você não precisa definir isso para 300 400 e quaisquer valores fornecidos. Você pode escolher livremente esses eixos e escolher algo como 415, e você pode realmente ajustá-los Lembre-se de que nem todos os navegadores renderizarão isso exatamente da mesma forma. Os benefícios disso são um tamanho de arquivo reduzido em comparação com várias fontes estáticas, criar flexibilidade e design com a capacidade de realmente ajustar, e você tem um desempenho aprimorado nas páginas da Web porque está diminuindo o tempo de carregamento 11. 10 Altura de linha desmistificante: Entendendo a altura da linha. Ao fazer a transição do design gráfico para o web design, você encontrará o conceito crucial de altura da linha Essa é uma chave de propriedade CSS para determinar a altura total de uma linha de texto. Você pode pensar nisso como uma caixa. Na verdade, é chamada de caixa de linha que envia um texto mais ou menos verticalmente A altura da linha é composta pelo próprio tamanho da fonte, bem como pelo espaço extra adicionado acima e abaixo. Esse espaço é chamado de liderança. E a metade na parte superior e inferior é chamada, você deve ter adivinhado que é metade à frente Esse espaço é muito importante para garantir que o texto seja visualmente atraente e fácil de ler, além de contribuir para uma anestesia geral de acessibilidade Vamos dar uma olhada em um exemplo para entender melhor. O tamanho da fonte do meu exemplo é de 24 pixels e eu quero uma altura de linha de 1,5. Então isso significa que calculamos 24 vezes 1,5, e isso é igual Portanto, a altura da caixa contendo nosso texto é 36. altura da linha pode ser expressa em valores sem unidade, como um multiplicador, assim como a usamos no exemplo, um valor percentual ou um valor de pixel Enquanto estiver usando seu software visual, talvez você ainda esteja usando valores de pixels, adquira o hábito de pensar na altura da linha como um multiplicador e não como um valor fixo porcentagem funciona muito bem, mas, mais comumente, você provavelmente verá notações sem unidades em CSS A altura da linha que você selecionará depende muito da fase do tipo, do tamanho da fonte e de sua aplicação. No entanto, você provavelmente descobrirá que o ponto ideal existe em uma faixa de 1,25 a 1,75, oferecendo ampla flexibilidade para seus projetos Se tudo isso é muito novo para você, comece com um sólido 1.5 para seus designs. Esta é realmente uma cama segura para você começar. À medida que sua confiança aumenta, você certamente começará a encontrar alturas de linha, aumentando-as para textos menores para melhorar a legibilidade e reduzindo-as para títulos para obter Lembre-se de que a altura ideal da linha depende muito do tipo de letra escolhido, portanto, trata-se de experimentar e descobrir o que funciona melhor Em designs com apenas uma única linha de texto, você pode se sentir tentado a definir a altura da linha para dois No entanto, exceto em casos raros, eu desaconselharia essa abordagem. A navegação não é estática, portanto, uma mudança no painel de exibição pode mover o texto para uma segunda linha As páginas podem ser traduzidas e repente, o texto fica muito mais longo, e o conteúdo também muda com o tempo. Por isso, recomendo sempre manter a altura específica da linha que foi definida para o estilo que você está usando A altura da linha é uma decisão importante de design, portanto, certifique-se de incorporá-la à escala tipográfica e Uma pequena observação: você provavelmente espera que a altura da linha um ou 100% seja a altura visual exata da fonte. Algo assim e meio deixando em cima e em baixo. Esse pode ser o caso de alguns, e são os recursos visuais que eu uso para minhas explicações No entanto, se você mergulhar nos detalhes mais minuciosos, encontrará pequenas variações Em poucas palavras, um design de fonte dentro de um quadro específico, conhecido como quadrado n, que serve como uma espécie de tela para o designer de fontes As métricas da fonte, incluindo aspectos como a altura de um ascendente, ou seja, as partes altas, como um m, e o comprimento dos decentros, algo como um G, podem variar significativamente dentro do quadrado, dependendo do design da fonte Com 100% da altura da linha, o texto pode ou não tocar nas bordas da caixa. A altura da linha é adicionada ao quadrado inteiro, não à altura visual percebida, o que pode resultar no que parece ser um espaçamento visual irregular, mesmo que a entrelinha esteja tecnicamente equilibrada Isso geralmente não é um grande problema, mas pode afetar o alinhamento do texto, especialmente em elementos da interface do usuário, como botões que aparecem um pouco fora do centro Um ajuste manual geralmente é a solução, e atualizações de CSS, como o corte da caixa de texto, são planejadas, mas ainda não foram implementadas, mesmo que você já as encontre em algumas ferramentas de interface do usuário Portanto, é bom entender esses detalhes, mas não há nada crucial para enfatizar. Na maioria dos casos, você notará que apenas trabalhar com a linha especificada ocultar funciona perfeitamente bem. Ao usar fontes diferentes juntas, escolher fontes da mesma superfamília pode ajudar a manter a consistência nas métricas 12. 11 Uma palavra sobre nomenclatura: Ao observar as escalas de tipos, muitas vezes você pode se deparar com essa convenção de nomenclatura de H um, H dois, H três e assim por diante Agora, esses nomes são derivados de tags de nomenclatura HTML. E eu quero encorajá-lo a evitar esse tipo de nomenclatura em sua configuração de design de interface e optar por uma abordagem mais semântica Deixe-me explicar o porquê. Ao criar um site corretamente, usar cabeçalhos e outras tags HTML é essencial Essas tags funcionam como a estrutura que organiza o conteúdo, independentemente de como elas são estilizadas com Por exemplo, um H proeminente em uma seção de heróis pode ter tamanho e estilo completamente diferentes do título principal, que também é H em uma página de termos e condições. Isso não é importante apenas para a otimização de mecanismos de pesquisa, mas as tags de título corretas também são cruciais para os usuários que confiam nos leitores de tela para entender a estrutura do conteúdo É importante separar o texto HTML dos designs visuais, como estilos. Embora trabalhem juntos, cada um serve ao seu propósito distinto de criar uma experiência de usuário eficaz. E, a propósito, em web design, usamos texto HTML com CSS para estilizar, mas nem tudo funciona dessa maneira No desenvolvimento de aplicativos para IOS, por exemplo, não há CSS nem otimização de mecanismos de pesquisa com que se preocupar. Em vez disso, usamos algo chamado tipo dinâmico, que é apenas o tamanho do texto com base nas preferências do usuário. Os desenvolvedores podem começar com as predefinições da documentação e personalizá-las, se necessário. Ao contrário do texto HTML com tipo dinâmico, você também pode criar sua escala de tipos com base nisso, mas sempre certifique-se de discutir primeiro com o desenvolvimento. Portanto, é muito útil entender de onde essas diferentes convenções de nomenclatura vêm essas diferentes convenções de nomenclatura e para que elas foram feitas Se voltarmos ao nosso projeto de aplicativo web , uma abordagem semântica provavelmente será sua melhor aposta Não há uma maneira certa de fazer isso, mas desde que seja descritiva e permita que os valores sejam alterados, funcionará perfeitamente Uma maneira comum de separar a hierarquia dos textos, como usar números de 1 a 6, como usar números de 1 a 6 é adaptar a abordagem do tamanho da camiseta. Então, estamos usando S, M L e assim por diante, que também podem ser expandidos. Algumas pessoas preferem uma abordagem mais descritiva como pequena, normal ou grande Devo admitir que essa abordagem também traz seus próprios desafios, pois não há espaço entre esses tamanhos. Portanto, é difícil ajustar as coisas mais tarde. Você pode se sentir tentado a usar títulos de dez, 20, 30, como fazemos com cores, o que nos permite usar entre um tamanho de 25 Mas isso pode ser facilmente confundido com pixels nesse caso, então eu pessoalmente não recomendaria usar isso. Para adicionar mais estrutura, você pode criar níveis usando termos como corpo, títulos, manchetes e títulos de exibição Então, isso é muito bom se você tiver um sistema muito grande. Você também pode ter várias opções , como pesos diferentes para uma fonte Novamente, é importante ser descritivo para que os valores possam ser facilmente alterados Em vez de chamá-lo de negrito normal ou 700 ou 500, opte por algo como enfatizado ou Nomear é difícil e nomear é importante. Portanto, geralmente recomendo discutir a nomenclatura o mais cedo possível com o desenvolvimento para evitar mal-entendidos e usar as possibilidades de 13. !!! POR FAVOR, ASSISTA !!! Nova interface do usuário Figma em beta: Heads Figma atualizou sua interface de usuário e você pode ver um novo design em vez do antigo Atualmente, esta atualização está em versão beta fechada, então nem todos têm acesso ainda. Vou atualizar as artes e refletir a nova interface assim que ela estiver disponível para todos. As mudanças são principalmente visuais. Todos os recursos e ferramentas ainda estão lá, apenas em lugares ligeiramente diferentes ou com um novo L. Por exemplo, a barra de ferramentas superior foi movida para baixo. O painel lateral esquerdo, por outro lado, permaneceu praticamente inalterado Agora você pode alterar o nome do seu arquivo aqui. Você ainda pode ver todas as suas páginas, camadas e ativos. No lado direito, você notará algumas mudanças ao clicar em um design, mas todos os recursos ainda estão disponíveis. Se você é iniciante e acha a nova interface confusa, pode clicar no ponto de interrogação na parte inferior direita e voltar temporariamente para a interface antiga Isso não influencia seu design. Dessa forma, você pode acompanhar os vídeos do curso usando a interface antiga com muito mais facilidade até que esteja pronto para fazer a transição para a nova. A FIMA está lançando gradualmente essa atualização. Se você ainda não tem acesso, também pode solicitá-lo à FIMA, mas não há garantia, talvez alguns de vocês precisem ser um pouco pacientes Talvez o administrador da sua equipe também precise ativar a atualização para você, portanto, verifique isso também. A Figma atualiza o software com frequência, portanto, espere mudanças e esteja preparado para se adaptar Os recursos podem se mover como esse botão de biblioteca aqui esteve em todos os lugares possíveis nos últimos anos. Mas não se preocupe, nada nunca se perderá e você se acostumará a usar o FIMA de uma forma muito mais flexível Ele tem um foco muito bom na usabilidade. Portanto, não se trata de aprender algo de cor, mas de entender o software como um todo. 14. 12 Tipografia no Figma: Vamos entender como lidar com texto no Figma. Vamos dar uma olhada rápida no menu de texto do Figma. Se você selecionar qualquer disposição de texto na Figma , no lado direito do painel de propriedades, poderá ver as configurações do texto Aqui podemos escolher um tipo de fase. Podemos escolher o peso. Podemos alterar o tamanho. E também podemos escolher a altura da linha. Isso geralmente é definido em pixels. Você pode usar essa caixa para calcular. Então, se eu quiser 1,5, eu calcularia 16 vezes 1,5. Mas o que eu gosto de fazer é definir isso, na verdade , em porcentagem. Dessa forma, se eu mudasse o tamanho , manteria a mesma altura da linha. Uma pequena dica, o Figma também suporta fontes variáveis. Agora, a fonte que estou usando, que é Poppins, não é uma fonte variável Então, se eu usar essa lista aqui para o peso , só recebo as predefinições No entanto, se eu fosse transformá-la em fontes variáveis, digamos open sans E eu uso o mesmo menu suspenso. Então, por exemplo, para meus pesos, posso encontrar eixos de fonte variáveis aqui e agora posso definir o peso usando os Você também pode alterar o espaçamento entre letras e parágrafos Essa seria a distância entre nossos parágrafos se tivéssemos textos como este Aqui você pode definir como deseja que seu texto fique na caixa. Eu recomendaria sempre escolher a altura automática. Isso significa que sua caixa de texto respeitará automaticamente sua altura ou a altura da linha e, portanto, criará uma caixa ao redor dela. Você pode alinhar o texto e também escolher qual direção deseja que o texto cresça Por exemplo, se eu defini-lo como linha no topo e agora estou adicionando mais texto, ele adicionaria um texto como este. Qualquer outra coisa que você esteja procurando, basta clicar nos três pequenos pontos. Aqui você encontra configurações extras, como decoração de texto, caixa, corte vertical, estilos de lista, espaçamento entre parágrafos Já temos isso no menu principal aqui. Se você quiser ter os pequenos pontos quando o texto for cortado, você os encontrará aqui Nesse caso, você notará que sua caixa volta para um tamanho fixo Agora, depois de configurarmos esse título e o texto ao nosso gosto, queremos salvá-lo como algo chamado estilo para reutilizá-lo em Então, vamos dar uma olhada em como isso funciona. Então, aqui está um exemplo muito simplificado de uma escala de tipos. Você pode ver, eu quero configurar uma fonte de exibição, título, corpo, legenda e um botão E eu quero usar isso no meu design em geral, bem como em um componente. Portanto, minha instância aqui deve herdar esse estilo. Portanto, configurar um estilo é bem simples. Basta selecionar o texto. E então, no painel de propriedades do lado direito, você vê o ícone de estilos. Clique nele, clique em mais e agora posso nomeá-lo. Vou chamar esse display de um. E eu vou fazer o mesmo com todos os outros. Vou acelerar esse processo um pouco para você. E, claro, sua escala de tipos pode parecer completamente diferente. Na verdade, este é apenas um exemplo simplificado. Se eu quiser ter uma visão geral dos meus estilos, posso clicar na área cinza da tela e, no lado direito, posso ver todos eles. Aqui eu também poderia alterá-los. Então, se eu quiser mudar alguma coisa sobre o nome ou qualquer um dos atributos, eu posso fazer isso aqui. Agora queremos aplicar nossos estilos ao nosso design. Importante: se você estiver trabalhando com componentes, sempre aplique o estilo ao componente, não à instância. Como você pode ver aqui, aplico o estilo da legenda à legenda e, em seguida, seleciono meu título No menu suspenso, agora posso escolher o estilo que criei para o Se clicarmos na instância, você verá que ela foi herdada automaticamente Para textos soltos como esse, podemos aplicá-lo diretamente em nosso design. E, por exemplo, digamos que isso tivesse outro tamanho, então digamos que fosse muito menor. Então, assim que aplicarmos nosso estilo, obviamente ele terá o tamanho correto e corrigirá toda a altura da linha e tudo o que estiver salvo no estilo. Se você quiser alterar ou separar um estilo, basta passar o mouse sobre o estilo e você verá um pequeno símbolo destacado Se você clicar nele , ele será separado e você poderá escolher qualquer outro estilo Você pode usar estilos assim. Na verdade, isso seria suficiente. Mas desde abril de 2024, também podemos adicionar variáveis, se quisermos Então, ainda temos nossos estilos, mas dentro de nossos estilos, esses pequenos blocos de construção, eles podem ser variáveis ou não. Portanto, temos algo como um tipo de letra, peso, tamanho, altura da linha, espaçamento e assim por diante E podemos deixá-los assim e trabalhar com eles. Está absolutamente bem. Mas assim que você começar a migrar para um sistema mais escalável, talvez queira adicionar variáveis 15. 13 variáveis Figma para tipografia: No Figma, também podemos definir variáveis, e elas funcionam de forma bastante semelhante às variáveis CSS Vamos primeiro entender o que é uma variável CSS. Então, aqui temos um exemplo em CSS, e você pode ver que a cor do link é definida como uma variável. Em seguida, temos uma classe chamada link primário, qual adicionamos mais informações, como o tamanho da fonte, a família do formulário e assim por diante. E você pode ver que aqui estamos reutilizando nossa variável CSS como parte dessa classe Também poderíamos configurar todo o estilo com blocos de construção ou variáveis, se quiséssemos. A vantagem é que, se eu quiser alterar alguma coisa, digamos, o tamanho padrão do texto , eu só precisaria alterar isso na variável, e em qualquer lugar em todo o meu design que eu uso essa variável, isso seria atualizado automaticamente. Vamos dar uma olhada no Figma. Então, na minha configuração aqui, eu tenho uma escala de tipos muito simplificada, e você pode ver que tudo isso já está transformado em estilos. Se clicarmos no fundo da câmera, você poderá ver uma visão geral dos estilos, e esses estilos são usados em nossos componentes, bem como qualquer texto solto dentro do nosso design. Agora, isso funciona muito bem por si só, então você pode absolutamente usá-lo assim. Mas assim que você quiser escalar isso um pouco mais e trabalhar em um sistema de design, talvez queira adicionar variáveis. Então eu fui em frente e criei uma coleção, clique na área de suas câmeras e, em seguida, vá para as variáveis locais. E aqui eu tenho várias coleções, e uma delas se chama brand Typography Posso chamá-lo de qualquer coisa. O Insider já criou algumas variáveis. Você pode ver que eu criei variáveis de tamanho de texto. Essa é uma variável de tamanho, e eu tenho 16, 24, 32 e 40, e criei algumas variáveis para meu peso. Aqui estou usando uma string. Eu tenho uma corda e depois simplesmente digito a palavra do peso que eu quero aqui. Meu caso é normal ou ousado. Também vou adicionar uma família de fontes. Eu clico no botão de adição e seleciono uma string novamente para uma família de fontes. Vou chamá-la de família de fontes e estou usando Poppins, simplesmente vou digitar Agora, se eu quiser essas pequenas categorias, lembre-se de que podemos simplesmente agrupar, clicar com o botão direito do mouse e depois em novo grupo com seleção, e vou chamar essa família de fontes. Então, se eu clicar em todas as variáveis, você verá que posso ver todas as sete variáveis tenho atualmente na coleção e, é claro, posso adicionar algumas a elas ou se preciso excluir alguma. Deixe-me mover a família de fontes para cá. Você pode organizar isso ao seu gosto. Se você passar o mouse sobre qualquer variável, poderá clicar em editar variável e agora poderá adicionar mais informações e também definir o escopo Isso significa que ele só vai aparecer nesse campo específico. Agora, estou gravando isso logo após o lançamento das variáveis para sites de texto. não temos um escopo para isso, mas ele deve ser lançado e você deve encontrá-lo neste menu Existe um chamado conteúdo de texto. Isso é outra coisa. Isso significaria que assumiria o valor real. Substitua seu texto por 16. Não é isso que queremos. Então, vamos ser pacientes e aguardar a atualização do escopo. Uma pequena dica, mantenha pressionada a tecla shift e o comando, e você poderá definir o escopo de várias variáveis ao mesmo tempo. Ok, ótimo. Então, como vamos colocar essas variáveis em nosso estilo. O que precisamos fazer é voltar ao nosso estilo e depois editar. E aqui, você pode escolher qualquer variável. Por exemplo, se eu escolher minha fase de texto, agora posso continuar aqui e ver minha família de fontes chamada Poppins E agora isso é transformado em uma variável. E eu posso fazer exatamente o mesmo com todos os outros. Então, por exemplo, aqui, eu vou aplicar a variável, e agora vou encontrar minha tipografia, e então vamos dar uma olhada aqui Queremos ser ousados, então vou escolher esse, e vamos fazer o mesmo com nosso tamanho. Vamos escolher o tamanho correto para este. Agora, em altura, atualmente deixo o código fixo como 150% aqui porque gosto de ter isso em porcentagens ou algo como 1,5, que é o que veríamos Mas o Figma atualmente não oferece suporte a isso em variáveis. Ele suporta apenas valores de pixels , pois estou gravando isso exatamente quando foi lançado. Então, com certeza, se você estiver assistindo este vídeo um pouco mais tarde, você também pode adicionar a altura da linha e verificar se percentuais ou unitários a menos valores percentuais ou unitários a menos, como 1,5, já estão funcionando. Você pode usar pixels. Pessoalmente, não sou um grande fã disso. Mas, em geral, você pode configurar variáveis para todos os campos diferentes assim que você vê o sinal da variável. Agora, você pode adicionar isso aos seus estilos existentes. Mas e se você estiver apenas criando estilos? Isso funcionaria da mesma forma. Vamos pegar um texto e separá-lo, e agora ainda não é um estilo Então você pode ver que eu já trabalhar com minhas variáveis em qualquer texto, então eu posso configurar tudo isso e depois salvá-lo como um estilo mais tarde. Então, você é realmente flexível em seu fluxo de trabalho. E, claro, se eu clicar nas variáveis locais e mudar alguma coisa sobre qualquer uma dessas variáveis , isso se refletirá em todo o meu design. Então, neste exemplo, isso parece muito pequeno porque é um exemplo muito simplificado. Mas em um sistema maior, isso vai ser uma grande ajuda. Imagine que você está mudando a família de fontes, você teria que examinar todos os seus tecidos e designs Assim, você só precisa alterá-lo aqui, e então isso se refletirá em todos os seus estilos diferentes. Além disso, se você estiver alterando um tamanho, digamos que você tenha um tamanho base de 16 e precise aumentá-lo. Então você terá usado esse tamanho de fonte S em diferentes tecidos, talvez uma versão light, uma versão mais ousada e assim por diante Isso será muito útil assim que você começar a trabalhar em um sistema maior 16. 14 O espaço em branco é seu superpoder: Espaço em branco, seu superpoder secreto. Agora, você pode ter configurado perfeitamente o peso da balança de tipos e a altura da linha, mas ainda falta alguma coisa. E esse algo geralmente é espaço em branco. Ao adicionar espaço em branco, você dá ao seu design espaço para respirar e ser percebido adequadamente. Não há regras fixas sobre como editar ou onde. Mas veremos alguns princípios gerais que você pode usar. Então, eu gosto de usar meu sistema de escala de oito pontos para manter as coisas consistentes Então, tudo é múltiplo de oito. Por exemplo, entre meu título e meu texto de texto, tenho 16 E então, para distâncias menores, eu uso oito e posso até descer para quatro. Vou usar isso em elementos menores, como um botão. E, novamente, esse sistema existe para me ajudar a não me restringir. Então, é claro, eu posso ter um contorno de um pixel ou similar Na verdade, é uma diretriz geral para criar um ritmo. Você também pode fazer a diferença entre microespaçamento e microespaçamento Então, entre o espaçamento dentro de seus componentes, por exemplo, e o espaçamento ao redor deles Novamente, nesse espaço em branco maior, como entre as seções, eu uso um múltiplo de oito. Quanto mais você estiver projetando, mais você terá a sensação de onde precisa adicionar algum espaço em branco. Portanto, espaço em branco definitivamente não é espaço perdido. Está ajudando você com seu layout. É realmente uma arma secreta. Lembre-se também de que quanto mais as coisas estão próximas, mais elas são percebidas como uma só. Então, realmente usa espaço em branco em seu layout. Isso faz toda a diferença. Uma boa ideia também é sempre dar uma olhada em como os outros fazem isso. Então, aqui está um exemplo do sistema de design UBA, e você pode ver que eles usam incrementos de quatro, e então eles têm alguns blocos de espaçamento geral e os usam em tudo, e os usam em tudo, desde a configuração de grades até tamanhos de ícones, e também quaisquer distâncias Em sistemas de design, você verá que o espaçamento geralmente é configurado como tokens Aqui está um exemplo do sistema de design de fios, e você pode ver que eles têm seu símbolo geral. Tamanho quatro oito e assim por diante, o que corresponde novamente a um múltiplo de quatro e oito. Então, podemos ver aqui embaixo que o que eles fazem é alimentar esses tokens em uma configuração mais semântica Então, eles entram em muito mais detalhes. Então, por exemplo, entre os chips, eles usam esses tamanhos básicos, mas os definem com muito mais clareza 17. 15 Comprimento de linha ideal: Em comprimento. Em telas maiores, você não quer que o texto flua por toda a largura porque ele simplesmente será muito longo e muito difícil de ler Diz-se que o comprimento ideal da linha é de 50 a 70 caracteres. Observe que aqui falamos sobre caracteres e não sobre tamanho físico. Então, isso pode ser bem diferente para faces de tipos diferentes. Você nunca deve ter mais de 90 caracteres por linha, porque então fica realmente impossível de ler. Agora, você não precisa contar caracteres, mas pode ver que, se seguir essa regra vagamente, ela já será muito mais agradável e fácil de ler Além disso, certifique-se de deixar sua tipografia fluir da maneira que foi projetada e pretendida Não use a chamada justificação. O que justify faz é forçar sua tipografia a caber dentro de uma caixa Agora, às vezes isso pode parecer ótimo se você estiver projetando com ele. Mas lembre-se de que seu design não é o resultado final. O navegador não é estático. E quando a tela estiver se movendo e redimensionando, você terá lacunas bem feias. Então não faça isso. Vai ser muito difícil de ler. Sempre deixe a tipografia fazer o que foi projetada para fazer e fluir naturalmente 18. 16 Cor e contraste em tipografia: Cor e contraste da tipografia. O contraste é um aspecto fundamental abordado pelas diretrizes de acessibilidade de conteúdo da web ou pelas breves WCAG Eles estão fornecendo regras claras sobre os níveis de contraste necessários. E é importante observar que isso não é meramente uma recomendação. É uma obrigação legal. O WCAG mede o contraste em termos de diferença de brilho, e isso varia da luz, então um a um, que será branco sobre branco e 21 a um, que será preto e branco, indicando um alto E isso opera em um sistema de classificação. Portanto, uma conformidade com A dupla é o contraste mínimo de que você precisa. Para tipografia, essa proporção é definida em 4,5 para um para fontes maiores e três para um para fontes menores, com o grande sendo definido de forma bastante vaga, começando com cerca de 18 pixels ou fundos menores que estão em negrito, dependendo da fase do tipo Como isso não está claro, eu sempre tentaria usar pelo menos 4,5 a um para todos os fundos usados. Idealmente, você escolheria até mesmo um triplo A. Portanto, você escolherá sete para um para fundos padrão e para fontes maiores, 4,5 para um Então, vamos dar uma olhada em um exemplo. Aqui, eu tenho um fundo cinza claro e uso uma tipografia vermelha O resultado da taxa de contraste nesse caso é de dois para um, que fica abaixo do limite recomendado de 4,5 para um Por outro lado, se eu estiver usando essa tipografia cinza escuro no mesmo plano de fundo, estou obtendo uma taxa de contraste de 12 para Isso significa que estou até mesmo cumprindo os padrões triplo-A. Também é importante considerar a espessura e o tamanho da fonte, pois fontes menores e mais leves exigem maior contraste em comparação com fontes maiores e mais ousadas Para ter certeza de que você está obtendo o contraste correto, recomendo que você sempre use um verificador de contraste Você pode pesquisar um plug-in de verificação de contraste em seu software de interface do usuário ou usar uma ferramenta on-line como o web aim Portanto, esses verificadores de contraste funcionam praticamente da mesma forma seja usando um plugue ou uma ferramenta externa Basicamente, o que você faz é pegar cor do primeiro plano e a cor do plano de fundo ou o contrário, e depois adicioná-las e receber uma proporção Agora, essa é a proporção que você vai anotar e comparar com a proporção necessária. Geralmente, os verificadores de contraste já mostram se ele é aprovado ou não. Por exemplo, se eu agora alterar minha cor, posso ver como ela começa a passar. Isso pode ser o texto ou a cor de fundo. Geralmente, recomendo ter uma visão geral de todas as cores e manter as cores do texto separadas das cores gerais da marca, mesmo que você possa usar os mesmos valores. Dessa forma, você pode comparar a cor do texto com qualquer outra cor e estabelecer regras claras sobre quais cores podem e não podem ser combinadas. Além do texto padrão, considere também as cores do sistema, como alertas e confirmações E também é uma boa ideia definir uma cor de interação clara. Essa seria sua cor de destaque para botões, links, ou seja, qualquer coisa que seja clicável 19. 17 tipografia responsiva com pontos de interrupção: Criação de tipografia responsiva com pontos de interrupção. Então, o que são pontos de interrupção? São pontos específicos, ou melhor, limiares ou mudanças ocorrem Dessa forma, os sites podem ajustar seu layout e estilos para caber em diferentes tamanhos de tela. Para criar pontos de interrupção em CSS, usamos algo chamado consulta de mídia A regra de consulta de mídia é uma forma de aplicar determinados estilos à página da Web somente se condições específicas forem atendidas Nesse caso, a condição é uma largura mínima de 768 pixels Qualquer coisa dentro dos colchetes só será aplicada quando a janela de visualização tiver um tamanho de 768 Vamos dar uma olhada nisso em CSS. Então você pode ver aqui que eu tenho um título e uma cópia do texto, bem como duas imagens Em nosso HTML, esse é um H, o título, o texto da cópia é P e, em seguida, aqui temos nossas imagens com a tag de imagem Agora, no CSS, você pode ver que eu defino o texto para ter o tamanho de um RM, depois um pouco maior para o título, e defino as imagens para ocupar todo o espaço disponível Então, esses são meus estilos básicos. Agora, ao rolar para baixo, você pode ver que eu adicionei uma consulta imediata. Quando eu chegar aos 400, vamos aumentar isso aqui embaixo. Você pode ver o tamanho, então você pode ver quando eu chego a 400, então isso muda no layout. O que acontece aqui é que tudo dentro dos colchetes fica ativo Eu tenho uma nova cor de fundo, a H é maior e as imagens alteram a ocupação do espaço. Se eu for ainda maior, você pode ver a segunda consulta de mídia chegando. Então você pode ver aqui embaixo. Novamente, adicionei uma cor de fundo, para que ela fique visível, e também alterei a cor H para ficar ainda maior. Portanto, os pontos de interrupção geralmente são a técnica mais usada quando se trata de ajustar a tipografia a Em teoria, poderíamos definir pontos de interrupção para cada texto individualmente. No entanto, na maioria dos casos, você provavelmente terá um conjunto predefinido de pontos de interrupção para sua escala tipográfica Isso significa que, quando a janela de exibição atinge um determinado tamanho, o layout do texto se ajusta adequadamente Esses pontos de interrupção podem ser fornecidos por uma estrutura como o bootstrap, ou você pode escolhê-los com mais liberdade, principalmente ao adotar uma abordagem moderna de layout CSS Eles podem já estar em vigor para outras áreas do seu design, como alterar o layout geral. Então, na maioria das vezes, faz sentido usar os mesmos pontos de interrupção Não deixe de consultar a documentação ou o guia de estilo para obter valores numéricos específicos se você estiver começando em uma nova equipe E se você for responsável pela configuração do zero, converse primeiro com sua equipe de desenvolvimento para saber o que eles precisam e recomendam. Então, uma vez que conhecemos nossos pontos de interrupção individuais, a próxima etapa é expandir nossa escala para cobrir todos os tamanhos Existem diferentes abordagens para lidar com isso. Vamos explorar a primeira abordagem, que seria fazer ajustes individuais. Normalmente, começamos configurando nossa escala de tipos a partir do menor tamanho. Quando atingimos um ponto de interrupção, podemos verificar se alguma alteração é necessária Muitas vezes, um corpo de texto com tamanho 16 funciona bem em todos os tamanhos, mas os títulos principais podem precisar de ajustes Obviamente, você também pode ajustar toda a escala a cada ponto de interrupção, dependendo de você Nossa segunda opção é expandir usando nosso sistema modular , escalando com proporções Podemos manter nossos valores de RAM consistentes, mas apenas ajustamos o que uma RAM seria igual em cada ponto de interrupção Por exemplo, em nossa tela pequena, uma RAM pode ser igual a 16 pixels, depois 18 pixels para nossa tela média e 20 pixels para nossa tela grande. E então mantemos nosso sistema geral porque estamos multiplicando o tamanho da base por uma proporção escolhida Portanto, todos os outros tamanhos se ajustam automaticamente. Portanto, enquanto 1,5 RAM geralmente são 24 pixels na minha tela média, 1,5 RAM se torna 27, pois agora é 18 vezes 1,5. E para grandes, calculamos 20 vezes 1,5, então são 30 pixels. É importante configurar isso sem pixels fixos no código para garantir o suporte às predefinições do usuário Não se preocupe Há várias maneiras de fazer isso. Nada muito complicado. Mas vale a pena mencionar isso, pois no design, estaremos lidando com um novo conjunto de valores de pixels independentes um do outro Enquanto estiver em código, isso permanecerá como unidades relativas. Configurar pontos de interrupção para tipografia geralmente é uma boa solução em um sistema de design estruturado É fácil de escalar, organizar anúncios e é muito fácil se comunicar entre equipes. 20. 18 Tipografia fluida com CSS clamp(): Topografia fluida com CLAMP. Para entender a topografia fluida no CLAMP, primeiro precisamos aprender sobre as unidades de janela de visualização Existem alguns deles, mas o que nos interessa é a largura da janela de visualização escrita como VW I Magister é a largura da janela de visualização, em que um VW é 1% da largura da janela de Vejamos um exemplo. Digamos que nossa janela de visualização tenha 1.000 pixels de largura e nosso tamanho de texto esteja definido como duas larguras de janela de visualização Então isso é 2% de 1.000, portanto 20 pixels. Agora, à medida que a largura de uma janela de visualização muda, digamos que redimensionamos o navegador para 500 pixels de largura, então nossas duas janelas de visualização agora resultariam em um tamanho de texto de Dessa forma, podemos criar uma tipografia fluida. No entanto, temos o problema de que, em algum momento, o texto será pequeno demais para lido ou grande demais para nosso design. É aqui que o CSS CLM é útil. Não é a única maneira de lidar com isso, mas eu gosto bastante, pois usa CSS nativo. Com o CLAMP, podemos definir um valor mínimo e máximo para nosso texto, bem como uma taxa de crescimento entre esses dois limites Então, no meu exemplo, o texto tem pelo menos 1,5 RM, que é o mesmo que 32 pixels, e não maior que três RM, que serão 48 No meio, ele escala com uma taxa de escala de 5% da largura atual da janela de visualização Dessa forma, nosso texto se adapta dinamicamente a vários tamanhos de janela de exibição. Observe como isso é independente dos pontos de interrupção. Ele simplesmente entraria em ação assim que 5% da largura do visor fosse maior que o tamanho mínimo Agora, o grampo pode parecer a solução para todas as suas esperanças e sonhos, e é fantástico No entanto, é realmente uma área em designers e desenvolvedores precisam se sentar juntos e trabalhar no navegador para acertar esses detalhes. Isso não vai acontecer no seu arquivo de design. Ele também vem com algumas considerações de acessibilidade, bem como a implementação de alternativas técnicas. Então, de um modo geral, se você estiver trabalhando em um projeto criativo único com muita personalização e atenção aos detalhes, isso pode fazer muito sentido No entanto, se você estiver trabalhando em um sistema de design, pode ser um pouco exagerado e talvez você queira se limitar apenas aos pontos de interrupção padrão E, a propósito, você ainda pode usar uma pinça, digamos, para uma seção chamativa de heróis em um sistema mais rígido Além da largura da janela de visualização, também quero destacar um novo desenvolvimento, as consultas de contêiner Sem nos aprofundar muito nas consultas de contêiner, é importante observar que, embora consultas de mídia se concentrem na janela de visualização, as consultas de contêiner nos permitem definir o tamanho do contêiner principal e nos adaptar adequadamente Além disso, as consultas de contêiner têm suas próprias unidades, semelhantes às unidades de janela de visualização, mas, em vez disso, estão vinculadas ao contêiner principal Portanto, ainda podemos usar o clamp, mas em vez de usar a largura da janela de visualização para escalar, agora usamos a largura da consulta do contêiner Isso significa que o tamanho da nossa tecnologia se ajusta de acordo com o espaço disponível, o que é muito interessante. A propósito, se não houver contêiner, ele simplesmente volta à largura da janela de visualização No entanto, a implementação disso requer um desenvolvedor de front-end qualificado, com atenção aos detalhes , com certeza, mais tempo e orçamento extras. Portanto, não é necessário usar sistemas de design fáceis de escalar. Mas ainda é importante que os designers saibam, e isso pode se tornar bastante relevante no futuro. 21. 19 tipografia responsiva no Figma com estilos: Lidando com tipografia responsiva no Figma. Atualmente, existem duas maneiras de fazer isso. Podemos configurar um estilo para cada ponto de interrupção ou automatizar isso usando estilos, ou automatizar isso variáveis e modos Para acompanhar, visite figma.com Farsh Moon Learning, e aqui você pode encontrar as duas escalas de tipos diferentes com as diferentes configurações que vou mostrar Vamos primeiro analisar a abordagem tradicional de configurar estilos individuais por ponto de interrupção Então, o que eu faço é primeiro configurar todos os meus estilos para o meu padrão. Então, aqui você pode ver que eu tenho meus nomes de estilos diferentes, e então eu criei um texto e transformei esse texto em um estilo. Então, se dermos uma olhada na configuração geral de nossos estilos, você pode ver que eu tenho uma pasta para cada estilo, então o título X L, e então você pode ver por dentro que eu tenho um estilo como base Então esse seria esse aqui. Então, um para M, este seria este aqui, e L. Você também poderia criar isso ao contrário e ter uma pasta por tamanho de tela e depois dentro dos diferentes estilos. Isso depende de você. Então, se dermos uma olhada, também temos três estilos para L. Então você pode ver que este é nosso título L. E então no título M, mantemos o mesmo tamanho do padrão para o tamanho M e só mudamos em L. Então você pode ver eu só criei aquele em que a mudança Caso contrário, usaríamos nossa base. Então essa também é a razão pela qual eu chamo isso de base e não de tamanho S ou algo parecido. Você só pode criar o estilo quando precisar, ou pode simplesmente configurar estilos padrão aqui também. Então, digamos que em nosso corpo padrão, também poderíamos criar o tamanho base M e L e, mesmo que sejam iguais, basta configurá-los como iguais. Às vezes, isso faz sentido porque, à medida que você está construindo, se mais tarde decidir alterar o tamanho do texto , tudo já estará configurado. Então, realmente vale a pena. E basicamente funcionaria da mesma forma para nossa configuração com a proporção. E aqui você pode ver que eu realmente preciso de um estilo para cada ponto de interrupção Então, se dermos uma olhada nessa configuração, as mesmas pastas, e você pode ver que, na verdade, para cada estilo, preciso de três estilos no Figma para cada ponto de interrupção Você não precisa resolver tudo isso sozinho. Basta acessar typescie.com e depois mudar de RM E nesse caso, você mudaria o tamanho do corpo. Isso forneceria os valores de 18 e, no meu exemplo, de 20, e então você pode simplesmente copiar os valores de pixels aqui. Então, se você quiser usá-los, basta ter uma tela por ponto de interrupção e pode ver que o que eu fiz aqui é diferente de usar os valores mínimo e máximo, então você pode ver que isso os bloqueará ao redimensionar para os valores mínimo e máximo Você precisa de uma moldura de layout automático para que isso funcione. E então eu aplico o estilo no ponto de interrupção correto. Então, aqui você pode ver, eu tenho minha base de títulos aplicada. Então, meu X L, mas o estilo básico, e aqui eu tenho o mesmo X L, mas o tamanho M, e na última tela, o L. Também estamos usando o X L, mas com desvio para a tela Portanto, você pode ter mais pontos de interrupção e ficar bem confuso Então, geralmente tenho esse tipo de configuração em algum lugar escondido em uma página diferente, como uma página de playground, onde posso experimentar tamanhos diferentes e, em seguida, simplesmente mostro o tamanho do meu celular e do meu desktop para a configuração geral do design Uma coisa que quero destacar com essa abordagem, o que é bastante complicado é que, se você tiver componentes, com os quais espero que tenha todo o design configurado, provavelmente precisará configurar um componente por Então você pode ver aqui que eu tenho minha base, e aqui eu tenho meu tamanho M e aqui meu tamanho L. Agora, nós também podemos sobrescrever isso para que você possa entrar no componente e sobrescrever Mas isso fica muito confuso e é uma fonte potencial de erro Isso é realmente uma desvantagem dessa configuração. 22. 20 Como automatizar a tipografia Figma com variáveis e modos: Adicionar variáveis e modos aos estilos para automatizar a alteração do tamanho do texto em diferentes tamanhos de tela Então, quero mostrar outra maneira de lidar com isso, é automatizar o tamanho com estilos, variáveis e modos Então, começamos com a mesma configuração básica. Configuramos nossos tamanhos padrão e criamos estilos para eles. Então aqui você pode ver que isso também está configurado como nosso título X L. Então você pode ver aqui que eu tenho os mesmos estilos, mas eu só tenho um estilo Então, também não criei nenhuma subpasta. E se você der uma olhada, todos são do mesmo estilo, mas têm tamanhos diferentes. Então, como isso funciona é que, se abrirmos nossas variáveis locais, eu tenho uma coleção de tipografia e vamos primeiro dar uma olhada no padrão Esses são todos os valores padrão. Você pode ver 16, 16, 16 e assim por diante. Então, nossas manchetes são maiores. Também posso adicionar minha família de fontes, também posso adicionar peso, espaçamento. Estou apenas mantendo isso focado no tamanho do texto por enquanto. Então eu criei mais dois modos, um para o tamanho M e outro para o tamanho L. Você pode criar modos clicando no botão de adição, mas você precisa ter um plano profissional ou superior para fazer isso E então eu mudo os valores aqui. Novamente, isso é configurado em pixels, e posso configurar novos valores para meu modo M e meu modo tamanho L. Agora, o que eu fiz na minha visão geral é que todos esses são pequenos quadros, e então você encontra aqui assim que tem um elemento que tem um modo que o Figma lhe dá o pequeno interruptor de modo e você pode ver que eu mudei este aqui para, e agora estou recebendo os tamanhos para, e aqui, eu estou recebendo os tamanhos para L. E ele troca automaticamente esse tamanho de texto como fornecido nos modos. Se eu voltar para o padrão, você pode ver que estou recebendo os tamanhos pequenos novamente. Então, no meu design, eu apenas configurei minha base, e então você pode ver aqui que tudo ainda usa o mesmo estilo. Mas eu mudei o modo da moldura principal, então você pode ver aqui a partir do tamanho M. Se eu voltar ao padrão, tudo voltaria para o tamanho menor. Dessa forma, eu também preciso apenas de um componente porque isso está usando apenas o estilo geral. Mas, como esse componente é configurado como automático, tudo o que você coloca no quadro principal precisa manter sua configuração automática e, portanto, herdaria o estilo definido pelo quadro pai Aqui você pode ver que, embora isso tenha um tamanho, se formos para o modo surdo, podemos ver que o tamanho do texto aqui está em 30, e se voltarmos e compararmos isso, então podemos ver que 30 é o tamanho do título em nossa tela L. Então essa é realmente uma ótima maneira de lidar com No entanto, você precisa estar ciente de que precisa que todos tenham um plano profissional ou superior para lidar com isso. Ele também precisa de um bom conhecimento de figma e também é um pouco mais complicado quando seu sistema de design está crescendo, então você precisa incluir bibliotecas diferentes e alterar muitas coisas diferentes 23. 21 exemplos da vida real: Há muitas maneiras e abordagens diferentes que você pode usar para configurar e documentar como lidar com elementos como componentes de espaçamento e tipografia É sempre uma boa ideia procurar inspiração. No entanto, lembre-se de que isso realmente depende do tipo de projeto que você está buscando, sua equipe e do seu orçamento Então, na verdade, trata-se de obter ideias e escolher o que é certo para seu projeto específico Dois dos meus sistemas de design favoritos para inspiração são o sistema de design da Uber chamado base. Isso realmente oferece um guia abrangente sobre sua filosofia e implementação. Assim, você pode realmente clicar e ver como eles fazem as coisas. Outro que eu gosto muito é o design de pontos. Não é tão detalhado quanto o sistema de design da UBA. É mais uma ideia ampla de como eles lidam com o design, mas ainda tem exemplos muito bons para ver. No entanto, geralmente recomendo dois lugares onde você pode encontrar muita inspiração. A primeira é a vitrine de altura zero. Caso você não saiba a altura zero, é uma ótima plataforma de software que facilita o processo de documentação entre as equipes de design e desenvolvimento Aqui você pode encontrar uma boa visão geral das diferentes empresas que constroem um sistema de design aberto com altura zero, e você pode simplesmente clicar nelas para obter ideias e comparar. Outro lugar que eu gosto muito é o livro de histórias. É mais focado no desenvolvedor, mas você também encontra uma seção de apresentação aqui, para que você também possa examinar esses exemplos, e também pode ser uma boa ideia examiná-los com sua equipe de desenvolvimento para analisar ideias diferentes Assim como com altura zero, você pode navegar por elas e também encontrar diferentes áreas, como tipografia, espaçamento, componentes e Mas você pode entendê-los de um ponto de vista mais focado no desenvolvedor. OK. 24. Obrigado: Bem feito para terminar este curso. Sinta-se à vontade para entrar em contato conosco na lua learning dot io, estamos sempre interessados em ouvir seus comentários. Você também faria como um grande favor se você pudesse apenas tirar um minuto e deixar um comentário aqui. Se você gostou deste curso e também certifique-se de que você tem uma olhada em nossos cursos adicionais. No ponto Moody Learning. Nós cobrimos todos os assuntos desde os fundamentos do design UX UI até Figma e até mesmo alguns conceitos básicos de código. Certifique-se de visitar nosso site na Moody Learning dot IO, onde você também pode se inscrever em nossa newsletter.