.container {    font-size: 33px;}

Esta propriedade assume vários tipos de valores:

  • Palavras-chave (palavras-chave de tamanho absoluto e tamanho relativo),
  • Comprimento (como pixels (px) e unidades em), e
  • Porcentagens.

.container {    font-size: xx-large;}

A questão é: que tipo de valor você deve escolher e por quê?

Essa é a questão que este artigo aborda. Ele vai mostrar como usar o font-size propriedade e as diferenças entre seus muitos valores. Portanto, da próxima vez que você precisar alterar o tamanho da fonte do seu texto, você saberá qual valor procurar.

Valores de palavra-chave

Existem dois tipos de valores de palavra-chave que você pode usar com o tamanho da fonte: absolute-size e relative-size palavras-chave. Vamos começar com absoluto.

Palavras-chave de tamanho absoluto

O código abaixo usa a palavra-chave de tamanho absoluto small para dimensionar o texto HTML.

.childElement {    font-size: small;}

Existem mais opções de palavras-chave de tamanho absoluto para escolher:

  • xx-pequeno
  • muito pequeno
  • pequeno
  • médio
  • ampla
  • extra grande
  • xx-grande
  • xxx-grande

O valor de uma palavra-chave de tamanho absoluto é determinado pelo navegador do tamanho de fonte padrão. Normalmente, esse tamanho é médio.

Palavras-chave de tamanho relativo

Palavras-chave de tamanho relativo são outra opção de palavra-chave a ser considerada. Você tem dois para escolher: smaller e larger.

.parentElement {    font-size: smaller;}

O tamanho da fonte de um elemento com uma palavra-chave de tamanho relativo é relativo– maior ou menor – para o tamanho da fonte do pai.

Dito de outra forma, o tamanho da fonte do elemento pai afeta o tamanho da fonte do elemento filho, como você pode ver abaixo.

Neste exemplo, a palavra-chave de tamanho relativo smaller é aplicado ao elemento filho, e o valor de tamanho absoluto large é aplicado ao elemento pai.

font-size aceita vários valores de comprimento diferentes. Exploraremos três deles: pixels (px) e unidades em e rem. Apesar da sua seleção, o valor do comprimento usado deve ser positivo.

.parentElement {    font-size: 60px;}

Píxeis

Pixels são um unidade de comprimento absoluto. Isso significa que eles são não afetado por outros elementos, como o elemento pai ou o tamanho da janela.

Como resultado, os pixels são precisos: você define o número exato de pixels de que precisa em um elemento e normalmente é isso que você obtém. No entanto, pode haver pequenas diferenças entre os navegadores.

Observe que os elementos filhos usam pixels e ter o mesmo tamanho de fonte no exemplo de código acima.

EMs

Embora você possa pensar nos pixels como fixos, pense nos valores em como variáveis.

Isso porque os valores em são um unidade de comprimento relativo. O tamanho da fonte de um elemento que usa um valor em é relativo para o tamanho da fonte de seu pai.

No entanto, digamos que você não tenha definido um tamanho de fonte para o elemento pai. Nem definiu um em outro lugar superior no DOM. Neste caso, o valor em é calculado usando o padrão do navegador (geralmente 16px).

Vamos tornar esta ideia concreta.

Digamos que o elemento pai seja definido como 30 px e o elemento filho como 2em. Então, o tamanho da fonte renderizada do elemento filho é 60px (2 x 30px = 60px). Você pode ver esse cenário no código abaixo.

Os valores em podem ser problemáticos devido ao seu efeito de composição, que é demonstrado no exemplo a seguir.

Quando você tem vários elementos que usam valores em aninhados uns nos outros, os valores de tamanho da fonte se combinam: eles ficam cada vez maiores. Este é o efeito combinado em ação.

REMs

Insira os valores rem, que foram criados para lidar com o problema de composição do ems.

Lembre-se de que os valores em são relativos ao elemento pai. Em contraste, os valores rem são relativos ao tamanho da fonte do elemento raiz (html).

Isso significa que você pode aplicar um valor rem a um elemento, e ele não será afetado pelo tamanho da fonte do pai. Isso evita o efeito de combinação que experimentamos acima.

Este exemplo usa o font-size propriedade com um valor rem.

Aqui está um ponto-chave do exemplo acima: o tamanho da fonte do elemento pai não afetam o tamanho da fonte dos elementos filhos.

As porcentagens oferecem mais uma maneira de definir o tamanho da fonte relativo para o tamanho da fonte do elemento pai.

O elemento com a porcentagem refere-se ao seu elemento pai para determinar o tamanho da fonte. O valor da porcentagem deve ser positivo.

Aqui está um exemplo.

Como você pode ver, quando se trata de tamanho de fonte, você tem muitas opções para atender às suas necessidades.

Escrevo sobre como aprender a programar e as melhores maneiras de fazer isso amymhaddad.com. Eu Ademais tweet sobre programação, aprendizado e produtividade: @amymhaddad.