Tamanho da fonte CSS
Tamanho da fonte
A font-sizepropriedade define o tamanho do texto.
Ser capaz de gerenciar o tamanho do texto é importante no design da web. No entanto, você não deve usar ajustes de tamanho de fonte para fazer com que os parágrafos pareçam títulos ou os títulos pareçam parágrafos.
Sempre use as tags HTML apropriadas, como <h1> - <h6> para títulos e <p> para parágrafos.
O valor do tamanho da fonte pode ser um tamanho absoluto ou relativo.
Tamanho absoluto:
- Define o texto para um tamanho especificado
- Não permite que um usuário altere o tamanho do texto em todos os navegadores (ruim por motivos de acessibilidade)
- O tamanho absoluto é útil quando o tamanho físico da saída é conhecido
Tamanho relativo:
- Define o tamanho em relação aos elementos circundantes
- Permite que um usuário altere o tamanho do texto nos navegadores
Nota: Se você não especificar um tamanho de fonte, o tamanho padrão para texto normal, como parágrafos, é 16px (16px=1em).
Definir o tamanho da fonte com pixels
Definir o tamanho do texto com pixels oferece controle total sobre o tamanho do texto:
Exemplo
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Dica: Se você usar pixels, ainda poderá usar a ferramenta de zoom para redimensionar a página inteira.
Definir tamanho da fonte com Em
Para permitir que os usuários redimensionem o texto (no menu do navegador), muitos desenvolvedores usam em vez de pixels.
1em é igual ao tamanho da fonte atual. O tamanho de texto padrão nos navegadores é 16px. Portanto, o tamanho padrão de 1em é 16px.
O tamanho pode ser calculado de pixels para em usando esta fórmula: pixels /16= em
Exemplo
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
No exemplo acima, o tamanho do texto em em é o mesmo do exemplo anterior em pixels. No entanto, com o tamanho em, é possível ajustar o tamanho do texto em todos os navegadores.
Infelizmente, ainda há um problema com versões mais antigas do Internet Explorer. O texto fica maior do que deveria quando fica maior e menor do que deveria quando fica menor.
Use uma combinação de porcentagem e Em
A solução que funciona em todos os navegadores é definir um tamanho de fonte padrão em porcentagem para o elemento <body>:
Exemplo
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Nosso código agora funciona muito bem! Ele mostra o mesmo tamanho de texto em todos os navegadores e permite que todos os navegadores ampliem ou redimensionem o texto!
Tamanho da fonte responsiva
O tamanho do texto pode ser definido com uma vwunidade, o que significa a "largura da janela de visualização".
Dessa forma, o tamanho do texto seguirá o tamanho da janela do navegador:
Olá Mundo
Redimensione a janela do navegador para ver como o tamanho da fonte é dimensionado.
Exemplo
<h1 style="font-size:10vw">Hello World</h1>
Viewport é o tamanho da janela do navegador. 1vw = 1% da largura da janela de visualização. Se a janela de visualização tiver 50 cm de largura, 1vw é 0,5 cm.