1. Introdução
Última atualização: 04/04/22
Adote a variabilidade dinâmica nas IUs usando fontes variáveis, o que vai dar mais capacidade de resposta a layouts, temas e acessibilidade, enquanto deixa seus apps mais rápidos.
O que você vai aprender
- O que são fontes variáveis.
- Como você pode personalizar as letras com elas.
- Como é possível aplicar fontes variáveis aos seus designs.
- Como implementar fontes variáveis com a API Google Fonts e em CSS.
Pré-requisitos
Neste laboratório, vamos ampliar alguns conceitos básicos de design.
- Conhecer as escalas das letras.
- Conhecer o Figma.
- Ter conhecimento básico de HTML e CSS.
Pré-requisitos
- Conta do Figma
- Arquivo do Figma no designlab
- Editor de código escolhido para a Web
2. Primeiros passos
Configuração
Para começar, acesse o arquivo do Figma no Designlab. Tudo o que você precisa para o laboratório está nele. É possível fazer o download e importar o arquivo ou fazer uma cópia do arquivo da comunidade do Figma.
Primeiro, faça login no Figma ou crie uma conta.
Cópia da comunidade do Figma
Navegue até o arquivo Como migrar para fontes variáveis ou pesquise "Como migrar para fontes variáveis" na comunidade do Figma. Clique em Copiar no canto superior direito para copiar o arquivo para seu computador.
Layout do arquivo
Ao analisar o arquivo, vemos que ele é autônomo e começa com uma introdução. Cada seção é dividida em uma linha de pranchetas conectadas, com alguns conceitos principais em cada seção, assim como exercícios. As seções e os exercícios ampliam os conhecimentos adquiridos na seção anterior e precisam ser concluídos em sequência.
O codelab mostra detalhes sobre esses conceitos e exercícios. Leia o codelab para saber mais sobre os novos recursos do Material You.
Começando com a imagem de introdução, há botões que vinculam as pranchetas em ordem. Para acessar o link, clique no botão.
Verificar a fonte variável
Antes de começar, precisamos garantir que temos uma fonte variável. Este arquivo usa a Roboto Flex, já disponível no Figma, ou você pode fazer o download dela em fonts.google.com
3. O que são fontes variáveis?
As fontes variáveis são um formato de fonte inovador. Com elas, os usuários têm controle sobre as letras e os ícones. Roboto Serif e Roboto Flex são fontes novas criadas com a tecnologia de fontes variáveis, cada uma com uma grande variedade de eixos. 
Expressão estética e eixos
Os designers não estão mais limitados a estilos de conjuntos mais antigos, como regular, negrito, itálico etc. As variáveis nas fontes de variáveis são controladas por eixos ou instâncias. Se o designer de letras quiser, qualquer variável no design da fonte pode ser atribuída a um eixo controlado pelo usuário. Os eixos comuns incluem itálico, tamanho óptico, inclinação, peso e largura. Esses são os eixos registrados no CSS.
Vantagens
As fontes variáveis permitem que você aplique vários estilos em um único arquivo de fonte, tornando os sites mais sustentáveis, menores e mais rápidos, e oferecendo ao designer maior controle expressivo.
4. Usar fontes variáveis no design
Alterar eixos
Vamos analisar todos os parâmetros (ou eixos) disponíveis e o efeito deles. Selecione a fonte à direita e abra o modal "Detalhes das letras" (ícone de mais) para abrir os controles deslizantes dos eixos e percorrer cada parâmetro.
- Peso define a espessura de uma letra. Ele fornece uma faixa completa e contínua de espessuras de traço.
- A largura é o resultado de quanto espaço horizontal é ocupado pelos caracteres de uma fonte.
- Ajuste o estilo da posição vertical para a mais inclinada, também conhecido pelos tipógrafos como um estilo oblíquo. Embora seja raro, o estilo Inclinado pode funcionar na outra direção, que é chamado de "inclinado para trás" ou estilo "oblíquo reverso".
- Gradação é um modificador secundário do peso óptico do aspecto da fonte e é independente do eixo de peso. O peso e a gradação afetam a espessura da letra, mas os ajustes com a gradação são muito mais detalhados.
- Tamanho óptico. Adapte o estilo a tamanhos específicos de texto, usando pontos. Em letras menores, as letras geralmente são otimizadas para uma maior legibilidade, com espaçamento/kerning soltos e traços mais espessos com menos detalhes. Em letras maiores, as letras geralmente são otimizadas para títulos com traços mais finos e formas mais detalhadas, além de pesos e larguras mais extremos.
Confira a demonstração de fontes variáveis para testar os eixos de fontes variáveis fora do Figma.
5. Melhorar o estilo
Se você trabalha com um guia de estilo de marca, deve ter uma escala de letras estabelecida com restrições tipográficas. O uso de fontes variáveis não significa descartar essas diretrizes. Elas oferecem um refinamento ainda maior à sua flexibilidade de escala da letras (para casos de uso como aumento de peso em gradação para planos de fundo escuros) em um único arquivo.
Embora uma escala de letras possa consistir em mais de uma família de fontes, vamos usar apenas uma para personalizar uma versão condensada da escala de letras padrão do Material.
- Vamos começar a personalizar a escala de letras com o corpo do texto. Isso nos permite definir primeiro o tamanho da base das letras do site e ajustar opticamente a partir daí. O padrão para Corpo grande é 18pt, selecionado e definido como Roboto Flex. Ajustar a legibilidade costumava significar atualizar o tamanho e o peso da fonte, o que significava outro arquivo de fonte. Mas agora podemos ajustar alguns dos eixos. Ajuste o tamanho óptico, a gradação e o peso.
- Continue com o Rótulo. Os rótulos são mais úteis e usados em contextos menores, como botões. Ajuste a gradação de forma óptica para que o rótulo apareça corretamente em contêineres e ícones de botões.
- Continue refinando com Título, Título principal e Display. As três são usadas para textos com ênfase média ou alta, mais curtos, como títulos de página e seções. Títulos principais e Displays podem ser mais expressivos por causa do tamanho e da grande ênfase deles. Brinque com todos os eixos aqui.
- Com o tipo selecionado, clique nos quatro pontos e "adicionar" (+) para definir um estilo de texto, o que garante configurações reutilizáveis do tipo de dispositivo.
Você pode gerar a escala de letras do Material padrão usando estilos Figma com o Material Theme Builder ou duplicando o kit de design do M3.
6. Aplicado à IU
Com uma escala de letras configurada, vamos aplicar ela a elementos de IU para implementação no código. Considere como fontes variáveis podem ser usadas para dar mais expressividade e legibilidade. Se você configurar estilos Figma no último exercício, eles vão poder ser aplicados e, em seguida, vão atualizar os eixos de estilo.
- Veja os elementos da IU à esquerda. O primeiro card contém um tipo de planta, uma descrição e algumas tags de categoria, enquanto os outros cards mostram as instruções de cuidado de uma planta. O tipo de planta faz sentido como uma função de alta ênfase. Portanto, use nosso estilo de "títulos principais". Defina ela como o título principal que já estabelecemos. Os cards de cuidados também têm um título, mas não têm a mesma ênfase. Portanto, defina eles como "títulos".
- Os detalhes da planta e a cópia da instrução podem ser atribuídos a "tamanho grande", enquanto os rótulos de categoria são atribuídos a "rótulo grande".
- Experimente diferentes papéis e ajuste os elementos da IU e a escala de letras para encontrar o equilíbrio certo.
7. Implementar no código
A implementação de fontes variáveis em código com CSS é semelhante a qualquer fonte da Web que usa um serviço de fornecimento de fontes para carregar a fonte e personalizar ela com as propriedades do CSS.
Usaremos HTML e CSS básicos para a implementação, e não o MWC ou outro framework.
Fontes variáveis no Google Fonts
Use o Google Fonts como seu serviço de fontes para facilitar a implementação de uma série de fontes no seu site, incluindo fontes variáveis.
Veja quais fontes variáveis estão disponíveis em fonts.google.com. Em "Pesquisar", marque a opção Mostrar apenas as fontes variáveis para filtrar. As fontes variáveis incluem uma área de teste na parte inferior da página. Nela você pode definir controles deslizantes para cada um dos eixos disponíveis na família.
Estilo com CSS
Nem todas as fontes têm a mesma quantidade de eixos disponíveis para personalização Atualmente, peso, largura, inclinação, itálico e tamanho óptico são os mais comuns.
Elas podem ser definidas com as propriedades básicas da fonte de CSS que existiam antes das fontes variáveis. Embora tudo ainda não seja amplamente compatível (em maio de 2022), todos os eixos podem ser definidos de maneira confiável usando a nova propriedade font-variation-settings.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
*Inclinada (slnt) e itálico (ital) no estilo da fonte não são confiáveis.
8. Importar com a API Google Fonts
Estamos usando apenas a Roboto, mas confira todas as fontes disponíveis em fonts.google.com.
Vamos usar a Roboto para o restante do codelab e personalizar as letras nos cards a seguir com base no nosso exercício anterior.
- Copie esse código com a IU de amostra do card no seu ambiente de desenvolvimento integrado da Web de sua preferência.
<html>
<title>Migrating to Variable fonts</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */
/* body __________________________ */
body {
font-size: 18px;
color: #21005D;
background: #E8DEF8;
}
/* typography __________________________ */
h1 {
line-height: 0;
/* add font styles for headline */
}
h2 {
line-height: 0;
/* add font styles for care titles */
}
p {
margin: 0;
line-height: 150%;
/* add font styles for body copy */
}
.label {
/* add font styles for labels */
}
/* layout __________________________ */
article {
margin: 16px auto;
padding: 16px 24px;
width: 30%;
background: #FFFFFF;
border: 1px solid #4F8438;
border-radius: 24px;
}
div.labels {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
}
span.label {
margin: 8px 0;
padding: 4px 8px;
background: #C4EED0;
border-radius: 8px;
}
article.care {
padding: 8px 24px;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
</style>
<body>
<article>
<h1>philodendron</h1>
<p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
<div class="labels">
<span class="label">easy care</span>
<span class="label">tropical</span>
</div>
</article>
<article class="care">
<span class="material-icons">water</span>
<h2>water</h2>
<p>Water when dry</p>
</article>
<article class="care">
<span class="material-icons">light</span>
<h2>light</h2>
<p>Bright indirect light</p>
</article>
</body>
</html>
- Anote as especificações de estilo que definimos no último exercício para título principal, título, corpo e rótulo. Tendo isso em mente, acesse a página da Roboto Flex. Ajuste os controles deslizantes de acordo com as especificações definidas no Figma e depois selecione este estilo para cada um, para adicionar eles à gaveta lateral.
- Na gaveta, abaixo dos estilos selecionados, procure por "Usar na Web". Há duas maneiras de adicionar a fonte ao seu código: por <link> ou @import. Você só precisa de um, vamos selecionar @import.
- Copie @import para o ponto e vírgula e cole ele nas tags de estilo, após o comentário de importação.
- Como a Roboto Flex é a única fonte usada, defina o corpo para chamar a família de fontes. Adicione as "regras CSS para especificar famílias", incluídas no código de importação.
body {
font-family: 'Roboto Serif', sans-serif;
font-size: 18px;
color: #0C332A;
background: rgb(247, 245, 245);
}
Isso vai importar a fonte e os estilos selecionados, mas o uso dos intervalos do eixos permite que você use o intervalo contínuo de estilos em vez dos estilos individuais. Para criar um intervalo, mescle dois valores com ... (por exemplo: 100..900). Adicione apenas intervalos existentes nos controles deslizantes de fonte. Caso contrário, ela não será carregada corretamente.
Esse recurso é ideal para transições suaves de animação e experimentos no navegador, já que ele é carregado em todo o intervalo e aumenta a solicitação de download.
9. Propriedades de fonte da variável CSS
Com a fonte importada, vamos voltar ao Figma para extrair algumas propriedades de CSS para o estilo e conferir a propriedade CSS font-variation-settings.
- Começando com a
h1dos títulos selecionados no painel à direita, selecione a guia Inspecionar na parte superior. Isso muda o painel para o modo de inspeção de código para a transferência do desenvolvedor. O código é a última seção. - Se você ainda não tiver feito isso, mude o formato da lista suspensa para CSS. Os atributos padrão, se usados, são listados (
font-weight, font-stretch, font-style, font-optical-sizing) e seguidos pelofont-variation-settingsde baixo nível que contém eixos personalizados não registrados. Use os atributos padrão primeiro, antes de mudar parafont-variation-settings.
O Figma usa configurações de variação de fontes para largura (wdth), em vez do alongamento da fonte.
- Copie este código CSS relacionado a letras para definir o estilo do seletor h1.
h1 {
line-height: 0;
font-size: 36px;
font-weight: 125;
font-stretch: 167%;
}
- O estilo do título do card de cuidados pode ser copiado para
h2. Faça o mesmo para o corpo do texto, copiando ele parap. Os estilos dos marcadores podem ser copiados para.label
10. Parabéns
Parabéns por ter adotado as fontes variáveis, aprender a usar elas nos seus designs e fazer a implementação na Web.
Se tiver dúvidas, fale com a gente a qualquer momento usando o @MaterialDesign no Twitter.
Confira outros tutoriais e conteúdo de design em youtube.com/MaterialDesign