Font-size responsivo conforme o tamanho da tela

Neste artigo veremos como deixar o font-size responsivo conforme o tamanho da tela, ou seja, as letras vão se adaptar com base na resolução do navegador ou celular que estiver acessando.

Fala galera, beleza? Bora aprender a deixar a fonte adaptável a resolução do dispositivo que acessa a página!

Você deve estar utilizando a unidade de medida px para dimensionar as fontes, e o que acaba acontecendo é que dependendo da resolução as fontes ficam grandes ou pequenas demais

Aí surge o desafio, como adaptar estas fontes a resoluções menores ou maiores?

Temos algumas possibilidades, a primeira delas seria a media query, porém devo avisar antes que há formas mais fáceis

Fonte responsiva com media query

Eu utilizo media query se o projeto já estiver pronto e eu preciso fazer pequenos ajustes, no caso de tamanho de fontes, se não eu não costumo utilizar este recurso

Veja um exemplo de media query:

p {
 font-size: 20px;
}

@media(min-width: 425px) {
 p {
  font-size: 25px;
 }
}

Neste caso temos tags p (parágrafos) com font-size de 20px no projeto

Porém criamos uma media query que vai agir quando a tela ficar menor que 425px, fazendo com que o estilo que está dentro da media query entre em vigor

Ou seja, os parágrafos vão ficar com font-size de 25px, aumentando a fonte de todos eles

Esta é uma maneira fácil para adaptar fonte a responsividade, porém dependendo da quantidade de elementos pode ser trabalhoso

As outras formas disponíveis seriam definir a font-size com em e rem

Font-size responsivo com em e rem

Vamos primeiro entender a diferença de cada um deles

Basicamente o rem se adapta ao font-size do elemento root, por isso o r de rem

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Ou seja, se temos font-size como 16px na tag html, temos os seguintes casos:

• 1em = 16px
• 2em = 32px
• 3em = 48px

Assim, podemos padronizar todas as fontes dos elementos da página baseado unicamente no elemento root (o html)

Tornando muito mais fácil deixar a fonte responsiva e não perder o controle de todas as fontes do projeto ao longo do projeto

Veja um exemplo:

html {
 font-size: 16px;
}

h1 {
 font-size: 2rem;
}

p {
 font-size: 1rem;
}

Já o em, temos uma possibilidade maior de personalização pois ele fica atrelado a fonte do elemento pai do elemento que está recebendo a fonte

Então caso um elemento p, tenha uma div pai com um font-size de 18px e o parágrafo tenha um font-size de 2em o seu resultado em pixels seria 36px

O esquema multiplicação é igual o rem, ou seja, 2em = 2 * font-size do elemento pai e assim por diante

Então agora é com você! As formas mais utilizadas para adaptar fontes a responsividade já foram esclarecidas, vai depender agora do seu projeto e como uma destas maneiras se adapta a ele

Conclusão

Neste artigo vimos como deixar o font-size responsivo conforme o tamanho da tela

Aprendemos 3 formas:

• media query: podendo ser adicionada a vários break points, permitindo grande flexibilidade;
• rem: medida do font-size que respeita o tamanho do elemento root, o html
• em: medida do font-size que respeita o tamanho da fonte do elemento pai

Cada uma tem sua maneira de utilizar, mas caso eu fosse começar um projeto do 0, iria de rem 🙂

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube