4 passos para usar fontes variáveis

Sep 14, 2025

Como

Variable fonts: The outlines of various weights and style of a single font family in magenta, emblazoned with the words 'Get versatile with variable fonts' in a bold, sans serif font.

(Crédito da imagem: futuro)

As fontes variáveis permitem que os designers de fontes definam variações de tipo dentro da própria fonte, permitindo que um arquivo de fonte atue como várias fontes. As fontes padrão são agrupadas em famílias de fonte que contêm vários arquivos de fonte separados, cada um representando um estilo diferente, por exemplo, um peso leve ou um peso ousado. Fontes variáveis contêm toda essa mesma informação em um único arquivo de fonte.

Usando o Source Sans Pro como um exemplo, a versão variável da fonte totaliza aproximadamente 394kb e vem em uma ampla variedade de pesos. Se fôssemos usar esses pesos de fonte individualmente como arquivos de fonte padrão, eles são, em média, 234KB cada - resultando em um tamanho de arquivo combinado de aproximadamente 1856kb. Claro, esse cálculo pressupõe que todos os pesos da fonte existem individualmente como uma fonte padrão, que eles não. (Embora se você está procurando apenas fontes regulares, confira nossa postagem no Melhores fontes grátis acessível.)

Se removermos as fontes que não existiam como uma fonte padrão, o tamanho do arquivo combinado ainda é quase três vezes o tamanho da fonte variável e com significativamente menos estilos. Mesmo se você quisesse as versões ousadas e regulares, comuns em muitos projetos da Web, duas versões da fonte padrão Sans Pro são ainda maiores que uma fonte variável única. O que isso demonstra é que, com fontes variáveis, temos o potencial de fazer economias massivas na largura de banda sem comprometer nossos desenhos e criatividade.

A comparison of the filesize of a range of font weights between a standard and a variable font – the standard font family totals 1864kb compared to 394kb for the variable font. — Uma comparação dos tamanhos de arquivo de uma variedade de pesos de fontes entre a versão padrão e variável da fonte de fonte Sans Pro (Crédito da imagem: Mandy Michael)

As fontes variáveis trabalham interpolando as variações mestras ao longo de um eixo, construindo essencialmente novos pontos no meio. Isso significa que você poderia definir pesos de fonte em pontos arbitrários ao longo do eixo apresentando um número muito maior de estilos e variações. Além disso, é porque as fontes variáveis podem ser interpoladas que somos capazes de animar entre cada variação, permitindo que transições suaves diga um peso fino para um peso ousado - algo que nunca conseguimos realizar antes.

O que faz fontes variáveis ainda mais emocionantes é que os designers não são restritos a apenas um único eixo. As fontes variáveis podem conter muitos eixos diferentes representando uma gama de estilos diferentes. Isso pode incluir o tamanho óptico condensado, itálico, óptico ou outras opções mais criativas ou personalizadas.

Quer colocar suas fontes em um novo site? Para recursos de web design, vá para o nosso melhor Construtor de sites Roundup e escolha de cima hospedagem na web. Serviços. Ou para uma atualização de armazenamento, confira estes armazenamento na núvem opções.

01. Entenda os eixos em fontes variáveis

A chart showing a single variable font transforming along two axes: weight and width. It ranges from low weight and narrow in the bottom left corner to high weight and thick at the top right. — Olhando para a interpolação de uma fonte variável através de um eixo de peso e largura revela a gama de personalização que está disponível (Crédito da imagem: Mandy Michael)

Usando fontes variáveis em nosso CSS é muito semelhante a como normalmente usaríamos fontes na web: usando o @ font-face a-regra . No entanto, precisamos primeiro entender os diferentes tipos de eixos dentro de uma fonte variável, pois isso determina quais propriedades CSS nós fazemos uso.

Existem dois tipos de eixos em uma fonte variável: um eixo registrado e um eixo personalizado. Um eixo registrado refere-se a um eixo comum o suficiente para que valha a pena padronizar. Atualmente, existem cinco eixos registados; Peso, largura, tamanho inclinado, itálico e óptico e estes são frequentemente mapeados para as propriedades CSS existentes, como o peso da fonte.

Os eixos personalizados são definidos por designers de tipo de letra, podem ser qualquer tipo de variação e exigir apenas um identificador de quatro letras dentro do arquivo de fonte, que pode ser referido no CSS.

02. Use um eixo registrado

A range of variable font weights along an axis from light (200) to black (900). — Variações de peso são definidas em um eixo, da luz (200) para preto (900) (Crédito da imagem: Mandy Michael)

Quando se trata de um eixo registrado, queremos ter certeza de que estamos usando qualquer propriedades CSS associadas, por exemplo, pia de fontes ou estilo de fonte.

Podemos configurar nossas fontes usando o @ font-face a-regra Como normalmente faríamos; A mudança é em como definimos as variações para descritores como fins de fonte, estiramento de fontes e fontes. Anteriormente, teríamos definido um peso de fonte de 200 e definiríamos isso como a versão de luz da fonte, formamos outro bloco de face à fonte para a versão em negrito e a versão regular até que tivéssemos todos os pesos necessários para o design. Com fontes variáveis, precisamos só de um único bloco de face de fonte. Então, em vez de usar várias instâncias, especificamos um intervalo de valores que correspondem aos valores mínimo e máximo definidos no eixo da fonte.

 @ font-face {
Font-família: "Fonte Sans Variável";
SRC: URL ("Source-Sans-Variável.woff") Formato ("Variações");
Peso de fonte: 200 700;
}

Neste exemplo, estabelecemos um peso de fonte de 200 a 700. Uma vez que o nosso alcance seja definido, podemos escolher qualquer número nesse intervalo como nosso peso da fonte, por exemplo, 658. Importante se você definir sua faixa de peso da fonte como 200 a 700 e Em seguida, tente definir um peso de 900, mesmo que a fonte tenha um peso 900 definido em seu eixo, você não poderá usá-lo. O intervalo define o que você tem acesso em seu CSS.

03. Configurar eixos personalizados

Como nenhuma propriedade CSS pré-existente existirá ao usar um eixo personalizado, precisamos fazer uso de uma nova propriedade CSS chamada de configurações de variação de fontes. Isso nos permitirá definir quantos eixos nomeados e personalizados, como precisamos.

 H1 {
Família de fontes: 'minha fonte variável';
Configurações de Font-Variação: 'WGHT' 375, 'INLI' 88;
}

No exemplo aqui, o WGHT refere-se ao eixo registrado do peso e no INLI refere-se a um eixo personalizado chamado Inline, cada um com um valor de número associado correspondente a um ponto ao longo do eixo de variação. Enquanto você pode referenciar um eixo registrado como um valor para configurações de variação de fontes, é recomendável que você faça uso de suas propriedades de CSS mapeadas.

Para garantir suporte nos navegadores mais antigos, podemos usar fontes de fallback para navegadores não suportados, fazendo uso da detecção de recursos do CSS.

 H1 {
  Font-família: "Source Sans", Sans-Serif;
  Peso de fonte: 700;
}

@supports (configurações de variação de fontes: normal) {
h1 {
 Fonte-família: "decovar";
 Configurações de Font-Variação: "Inli" 88;
 }
}

Ao verificar o suporte de configurações de variação de fontes, podemos incluir nossos estilos de fonte variável dentro do bloco de suportes CSS, garantindo que eles só serão usados em navegadores que podem suportar fontes variáveis - com nossas fontes padrão usadas nos navegadores não suportados.

04. Combine Fontes Javascript e Variáveis

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts. — As fontes variáveis permitem transições suaves, dizem, um peso fino para um negrito; Isso permite que você crie transformações suaves utilizando variáveis de javascript (Crédito da imagem: Mandy Michael)

Podemos fazer uso de eventos JavaScript para situações em que queremos mais controle fino ou alterar a fonte com base em eventos que não podemos acessar apenas com CSS. Um exemplo simples seria combinando nosso peso da fonte para o tamanho da nossa viewport - como a viewport fica menor, o peso da fonte fica mais pesado.

Para criar a escala fluida, devemos alinhar dois conjuntos de valores e unidades - o peso da fonte e o tamanho da viewport. Podemos acessar a largura da viewport atual usando a janela.ingwidth e criar uma nova escala baseada em porcentagem, convertendo-a a um intervalo de 0-0,99. Incluindo os tamanhos mínimos e máximos de viewport, podemos controlar o intervalo do efeito.

 var viewortscale =
(Window.ingwidth - Minwindowsize) / (MaxWindowsize - Minwindowsize);

Em seguida, determinamos o peso da fonte com base no nosso tamanho de viewport.

 var fontweightscale = viewportscale * (minfontweight - maxfontweight) + maxfontweight;

Usando as propriedades personalizadas CSS, podemos usar nosso valor JavaScript para atualizar o peso da fonte em nosso CSS.

 p.style.setproperty ("- peso", fontweightscale);

Quando isso é combinado em uma função e anexado ao ouvinte de eventos de redimensionamento, podemos atualizar o peso da fonte com base no novo tamanho da janela.

Com esta abordagem básica, somos capazes de modificar nossa tipografia com base em todos os tipos de eventos e experiências. Onde a viewport é de largura, podemos ter mais detalhes; Por outro lado, quando é menor e em um espaço mais confinado, podemos olhar para a redução da largura da fonte ou aumentar o peso, fornecendo um melhor controle de nosso conteúdo e tipografia em termos de legibilidade, usabilidade e design.

Você pode Veja o código para isso em codepen.

Este artigo foi originalmente publicado em questão 318 de internet , a revista mais vendida do mundo para web designers e desenvolvedores. Inscreva-se na NET AQUI .

Descubra mais sobre fontes variáveis em gerar CSS

An image promoting Bianca Berning's talk 'The future of type' at Generate CSS on 26 September. — (Crédito da imagem: Getty / Bianca Berning / Futuro)

Em sua palestra em gerar CSS, a conferência CSS focada para web designers ocorrendo em 26 de setembro de 2019 em Rich Mix, Londres, Bianca Berning explorará como as fontes variáveis podem criar novas oportunidades para a palavra escrita dentro da mídia tradicional, bem como novas, imersivas experiências, como AR, VR e realidade mista.

Se você quiser pegar isso e outras grandes palestras, vale a pena tirar seus ingressos agora. Se você pegar o seu antes de 5pm UTC em 15 de agosto, você pode economizar £ 50, pagando apenas £ 199 + IVA. Compre o seu bilhete agora !

Artigos relacionados:

3 maneiras que a tecnologia está mudando de tipo
Comece com fontes variáveis em CSS
Transforme seu tipo on-line com fontes variáveis

4 passos para usar fontes variáveis

01. Entenda os eixos em fontes variáveis

02. Use um eixo registrado

03. Configurar eixos personalizados

04. Combine Fontes Javascript e Variáveis

Descubra mais sobre fontes variáveis em gerar CSS

Como - Artigos mais populares

Construa um blog reativo rápido com Svelte e Sapper

Criar uma página de pouso 3D WebGL

Como configurar o site com variáveis CSS

Criar efeitos de ondulação com Pixijs

Como pintar miniaturas deliciosas

Como pintar uma paisagem urbana com blocos de cor

Como adicionar vídeo a PDFs interativos

Como construir um site de página inteira em angular

Categorias

4 passos para usar fontes variáveis ​​

01. Entenda os eixos em fontes variáveis

02. Use um eixo registrado

03. Configurar eixos personalizados

04. Combine Fontes Javascript e Variáveis

Descubra mais sobre fontes variáveis ​​em gerar CSS

Como - Artigos mais populares

Categorias

4 passos para usar fontes variáveis

Descubra mais sobre fontes variáveis em gerar CSS