Crie fontes responsivas em CSS

1. Use o valor da janela de visualização para criar fontes responsivas em CSS
2. Use consultas de mídia para criar fontes responsivas em CSS
3. Use a função calc() para criar fontes responsivas em CSS
4. Use a função clamp() para criar fontes responsivas em CSS

O artigo explica as maneiras de implementar fontes responsivas apenas com o uso de CSS. Apresentaremos várias maneiras de como o CSS e o CSS3 modernos tornam as fontes legíveis em dispositivos de diferentes tamanhos de tela.

Use o valor da janela de visualização para criar fontes responsivas em CSS

Uma das maneiras mais fáceis de tornar as fontes responsivas é redimensioná-las de acordo com o tamanho da janela de visualização ou da janela do navegador. Existem várias unidades de janela de visualização, em relação aos eixos da janela do navegador, fornecidas por CSS que são muito úteis para fazer páginas web responsivas. Algumas unidades da janela de visualização são vw, vh, vmin e vmax. Podemos obter as informações dessas unidades nas unidades CSS. Podemos usar essas unidades de janela de visualização em vez de em, px ou pt para criar as fontes responsivas.

Por exemplo, crie cada uma das tags h1, h2 e p. Escreva algum texto de sua escolha entre essas tags. Em CSS, defina a propriedade font-size das tags h1, h2 e p para 5.9vw, 3.0vh e 2vmin respectivamente.

Quando redimensionamos o navegador, a janela de visualização do navegador muda e o tamanho da fonte dos textos também muda de acordo. Desta forma, podemos usar as unidades da janela de visualização no tamanho da fonte para criar uma fonte responsiva em CSS.

Código de exemplo:

<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>

h1 {
    font-size: 5.9vw;
}
h2 {
    font-size: 3.0vh;
}
p {
    font-size: 2vmin;
}

Use consultas de mídia para criar fontes responsivas em CSS

Podemos usar as consultas de mídia para criar fontes responsivas em CSS. Também podemos utilizar consultas de mídia para alterar o tamanho da fonte em uma determinada altura / largura do dispositivo. Usamos a palavra-chave @media para escrever a consulta de mídia.

Por exemplo, defina a propriedade font-size para 3em. Em seguida, escreva a consulta de mídia com a condição de largura máxima: 320px. Em seguida, defina a propriedade font-size para 2em.

Código de exemplo:

body{
    font-size: 3em;
}
@media only screen and (max-width: 320px) {
    body {
        font-size: 2em; 
    }
}

<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>

Aqui, o tamanho da fonte será reduzido quando o código acima for implementado e executado em dispositivos com um tamanho de tela inferior a 320px. A fonte é definida como 2em para dispositivos com altura abaixo de 320px. E as fontes estarão em 3em para dispositivos com um tamanho de tela maior que 320px.

O demérito desse método é que podemos precisar adicionar mais consultas de mídia se o design começar a quebrar em dispositivos com um tamanho específico.

Use a função calc() para criar fontes responsivas em CSS

Como a maioria dos navegadores modernos hoje em dia suporta o método calc() em CSS, isso torna a escrita de código responsivo mais fácil. Além disso, esse método também é mais eficaz e realiza a tarefa sem complicar o código. Podemos usar a função calc() para tornar o tamanho da fonte responsivo. O resultado da função é o valor da propriedade.

Por exemplo, defina a propriedade font-size da tag body para a função calc(). Dentro da função, escreva 0.75em + 1vw.

Código de exemplo:

body {
    font-size: calc(0.75em + 1vw);
}

<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>

O tamanho da fonte varia conforme o valor de 1vw muda em dispositivos com diferentes tamanhos de tela. Assim, podemos criar uma fonte responsiva em CSS.

Use a função clamp() para criar fontes responsivas em CSS

A função clamp() fixa os valores entre os valores máximo e mínimo. A função recebe três parâmetros como argumento, o primeiro é o valor mínimo, o segundo é o valor preferido e o último é o valor máximo permitido. Podemos usar a função clamp() para definir qualquer propriedade, como length, angle, percentage, number, etc. Podemos usar a função para tornar a fonte responsiva em CSS.

Código de exemplo:

h1{
    font-size : clamp(2rem, 10vw, 5rem);
}

<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>

No exemplo acima, o valor 2rem é o tamanho de fonte mínimo permitido. Da mesma forma, o próximo valor, 10vw, é o tamanho de fonte padrão e, o último, 5rem, é o tamanho de fonte máximo permitido. Aqui, devemos notar que o valor no meio deve ser relativo como em vw, ch ou vh e não absoluto como px e pt.