Propriedade font-size

A propriedade font-size define o tamanho da fonte do texto. Os valores da propriedade são quaisquer unidades para tamanhos (geralmente, são px, em ou rem) ou palavras-chave especiais (usadas muito raramente).

Sintaxe

seletor {
	font-size: valor;
}

Valores em forma de palavras-chave

Valor	Descrição
`xx-small`	O menor de todos. Exemplo: Lorem ipsum dolor sit amet.
`x-small`	Muito pequeno. Exemplo: Lorem ipsum dolor sit amet.
`small`	Pequeno. Exemplo: Lorem ipsum dolor sit amet.
`medium`	Médio. Exemplo: Lorem ipsum dolor sit amet.
`large`	Grande. Exemplo: Lorem ipsum dolor sit amet.
`x-large`	Muito grande. Exemplo: Lorem ipsum dolor sit amet.
`xx-large`	O maior de todos. Exemplo: Lorem ipsum dolor sit amet.
`larger`	Maior que a fonte do elemento pai em um determinado valor.
`smaller`	Menor que a fonte do elemento pai em um determinado valor.

Valor padrão: medium.

Exemplo

Vamos definir o tamanho da fonte dos parágrafos para 20px:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-size: 20px;
}

Exemplo

Neste exemplo, o tamanho do parágrafo está definido como 16px, e para o span dentro dele - 150%. Neste caso, o tamanho da fonte para o span será 150% do seu elemento pai, ou seja, do parágrafo, e seu tamanho real será 16px * 150% = 24px:

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: 150%;
}

Exemplo

Neste exemplo, o tamanho do parágrafo está definido como 16px, e para o span dentro dele - larger. Neste caso, o tamanho da fonte para o span será maior que o do seu elemento pai (o parágrafo):

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: larger;
}

Exemplo

Observe que fontes com diferentes font-family e o mesmo font-size podem visualmente ter tamanhos completamente diferentes (para resolver este problema, consulte a propriedade font-size-adjust).

No exemplo abaixo, ambos os parágrafos têm font-size definido como 16px, mas diferentes font-family:

<p id="elem1">
	Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
	Lorem ipsum dolor sit amet.
</p>

#elem1 {
	font-size: 16px;
	font-family: Arial;
}
#elem2 {
	font-size: 16px;
	font-family: "Times New Roman";
}