A propriedade font-size define o tamanho do texto.
Ser capaz de gerenciar o tamanho do texto é importante em web design. No entanto, você não deve usar ajustes de tamanho de fonte para fazer os parágrafos parecerem títulos ou os títulos parecem parágrafos.
Sempre use tags HTML adequadas, 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 relativo aos elementos circundantes
Permite que um usuário altere o tamanho do texto nos navegadores
Observação: 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 do texto com pixels oferece controle total sobre o tamanho do texto:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Dica: se você usar pixels, ainda poderá usar a ferramenta de zoom para redimensionar a página inteira.
Para permitir que os usuários redimensionem o texto (no menu do navegador), muitos os desenvolvedores usam em 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: <i>pixels/16=<i>em
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 */
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
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 */
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>
</body>
</html>
No exemplo acima, o tamanho do texto em em é igual ao exemplo anterior em pixels. Porém, 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 maior e menor do que deveria quando menor.
A solução que funciona em todos os navegadores é definir um tamanho de fonte padrão em porcentagem para o elemento <body>:
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>
</body>
</html>
Nosso código agora funciona muito bem! Ele mostra o mesmo tamanho de texto em todos os navegadores e permite que todos os navegadores amplie ou redimensione o texto!
O tamanho do texto pode ser definido com uma unidade vw, que significa a "largura da janela de visualização".
Dessa forma, o tamanho do texto seguirá o tamanho da janela do navegador:
Resize the browser window to see how the font size scales.
<h1 style="font-size:10vw">Hello World</h1>Experimente você mesmo →
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>
<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>
<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>
</body>
</html>
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 terá 0,5 cm.