font-size

The property especifica o tamanho, ou altura, da fonte. font-size afecta não só a fonte à qual é aplicada, mas também é utilizada para calcular o valor das unidades em, rem, e ex comprimento.

p { font-size: 20px;}

pode aceitar como valores palavras-chave, unidades de comprimento, ou percentagens. É importante notar no entanto que quando é declarado como parte do font shorthand property, é um valor obrigatório. Se não for incluído no estenodac87aa2″>, toda a linha é ignorada.

Valores de comprimento (por exemplo px, em, rem, ex, etc) que são aplicados a font-size não podem ser negativos.

Palavras-chave e valores absolutos

.element { font-size: small;}

Aceita os seguintes valores absolutos de palavras-chave:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Estes valores absolutos são mapeados para tamanhos de fontes específicos, tal como calculados pelo navegador. Mas também pode usar dois valores de palavras-chave que são relativos ao tamanho da fonte do elemento pai.

Outros valores absolutos incluem mm (milímetros), cm (centímetros), in (polegadas), pt (pontos) e pc (picas). Um ponto é igual a 1/72 de uma polegada enquanto uma pica é igual a 12 pontos – estes valores são tipicamente utilizados para documentos impressos.

Palavras-chave relativas

• larger
• smaller

Por exemplo, se o elemento pai tiver um tamanho de fonte de small, um elemento criança com um tamanho relativo definido de larger tornará o tamanho de fonte igual a medium para o elemento criança.

Valores percentuais

.element { font-size: 110%;}

Valores percentuais, tais como a definição de um tamanho de fonte de 110%, são também relativos ao tamanho de fonte do elemento pai, como mostrado na demonstração abaixo:

Ver a Pen qdbELL por CSS-Tricks (@css-tricks) em CodePen.

A unidade em

.element { font-size: 2em;}

A unidade em é uma unidade relativa com base no valor calculado do tamanho da fonte do elemento pai. Isto significa que os elementos da criança são sempre dependentes dos seus pais para definir o seu tamanho de fonte. Por exemplo:

<div class="container"> <h2>This is a heading</h2> <p>This is some text.</p></div>

.container { font-size: 16px;}p { font-size: 1em;}h2 { font-size: 2em;}

No exemplo acima, o parágrafo terá um tamanho de fonte de 16px porque 1 x 16 = 16px enquanto o cabeçalho será 32px porque 2 x 16 = 32px. Há muitas vantagens em digitar em escala dependendo do tamanho da fonte do elemento pai, nomeadamente podemos embrulhar elementos dentro de um recipiente e saber que todas as crianças serão sempre relativas umas às outras:

Ver a Caneta Descobrindo como funciona a unidade em por CSS-Tricks (@css-tricks) em CodePen.

A unidade rem

No caso de unidades rem, contudo, o tamanho da fonte depende do valor do elemento raiz (ou o elemento html).

html { font-size: 16px;}p { font-size: 1.5rem;}

No exemplo acima, a unidade rem é igual a 16px (porque é herdada do elemento html/root) e, portanto, o tamanho da fonte para todos os elementos de parágrafo será calculado a 24px (1,5 x 16 = 24). Ao contrário das unidades em, o parágrafo irá ignorar o estilo de todos os seus pais para além da raiz.

Esta unidade é suportada pelos seguintes navegadores:

th>Safarith>Firefoxth>Operath>IEth>Androidth>iOS

Chrome
Works	Works	Works	Works	10+	Works	Works	Works

A ex unidade

.element { font-size: 20ex;}

Para ex unidades, 1ex seria igual à altura calculada da letra minúscula x do elemento raiz. Assim, no exemplo abaixo o html elemento é definido para 20px e todos os outros tamanhos de fonte são determinados pela altura x dessa fonte em particular.

Ver a Caneta Descobrindo como funciona a ex unidade por CSS-Tricks (@css-tricks) em CodePen.

Experimentar com a demonstração acima a minha substituição do font-family no elemento html para ver como os outros tamanhos de fontes mudam.

Viewport units

.element-one { font-size: 100vh;}.element-two { font-size: 100vw;}

Viewport units, tais como vw e vh, definir o tamanho da fonte de um elemento em relação às dimensões do viewport:

• 1vw = 1% da largura do viewport
• 1vh = 1% da altura do viewport

Então, se tomarmos o seguinte exemplo:

.element { font-size: 100vh;}

Então, isto indicará que o tamanho da fonte do elemento deve ser sempre 100% da altura do viewport (50vh seria 50%, 15vh seria 15% e assim por diante). Na demonstração abaixo tente redimensionar a altura do exemplo para ver o tipo stretch:

Veja o tipo Pen Sizing com unidades vh por CSS-Tricks (@css-tricks) em CodePen.

vw unidades são diferentes na medida em que define a altura das formas de letra pela largura do viewport, por isso na demonstração abaixo terá de redimensionar a janela do navegador horizontalmente para ver estas alterações:

Ver o tipo de Dimensionamento da Caneta com unidades vw por CSS-Tricks (@css-tricks) em CodePen.

Estas unidades são suportadas pelos seguintes navegadores:

th>iOS

Chrome	Safari	Firefox	Opera	IE	Android
31+	7+	31+	27+	9+	4.4+	7.1+

É importante notar que existem duas outras unidades de viewport: vmin e vmax. O primeiro encontrará os valores de vh e vw e definirá o tamanho da fonte como o menor dos dois enquanto vmax define o tamanho da fonte como o maior destes dois valores.

A unidade ch

.element { font-size: 24ch;}

O ch unidade é semelhante ao ex unidade na medida em que definirá o tamanho da fonte de um elemento em relação à largura do glifo 0 (zero) da fonte:

Ver o tipo de tamanho da caneta com unidades ch por CSS-Tricks (@css-tricks) em CodePen.

Esta unidade é suportada por:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
27+	Works	10+	Works	9+	Works	Works

Propriedades Relacionadas

• font
• font-família
• font-stretch
• font-style
• font-variant
• font-weight