Font-size: tamanho da letra(fonte) em CSS

Veja este Tutorial de CSS que mostra como usar a propriedade fonte-size, tamanho da letra, com Unidades relativas, como pixel e porcentagem e absolutas, como point e centímetros

Home Tecnologia

A propriedade font-size é usada para indicar o tamanho da letra(fonte) em CSS. Este tamanho poderá ser especificado em várias unidades de medidas. Normalmente as unidades de medidas são relativas, como pixel e porcentagem e absolutas, como point e centímetros.

O bom planejamento do site é de vital importância para que a propriedade font-size seja aplicada corretamente e sem desperdício, isto é, não é necessário ficar aplicando o tamanho da letra em todas as tags de texto.

As medidas possíveis para o font-size são:

  • xx-small (equivale a 9px)
  • x-small (equivale a 10px)
  • small (equivale a 13px)
  • medium (equivale a 16px)
  • large (equivale a 18px)
  • x-large (equivale a 24px)
  • xx-large (equivale a 32px)
  • smaller (equivale a 13px)
  • larger (equivale a 18px)

É possível ainda usar valores personalizados para determinar o tamanho da letra, estes valores poderão estar em diversas unidades de medidas.  

Unidade relativa

pixel (px)

A largura em pixel é proporcional ao dispositivo que estamos usando, monitor, telão, tela de um dispositivo móvel, etc

ems (em)

Determina a quantidade de vezes que se deve aumentar o tamanho da letra em relação ao tamanho do elemento pai. Por exemplo:

body{
    font-size:20px;
}
h1{
     1.5em;
}

O tamanho da fonte no h1 será de 30px, pois ele está aumentando 1 vez e meia o tamanho da letra do elemento pai que aqui no nosso exemplo é a tag body.

Porcentagem (%)

Determina que o tamanho da letra será feita em um percentual em relação ao elemento pai. Vejamos abaixo um exemplo prático.

p{
    font-size:20px;
}
span{
     200%;
}

O tamanho da letra no span será de 40px, pois ele está 200% acima do tamanho da fonte do elemento pai que aqui no nosso exemplo é a tag p.

Unidade absoluta

  • points - pontos (pt)
  • in (in)
  • centímetros (cm)
  • milímetros (mm)
  • picas (pc)

Estas medidas não são muito comuns para uso em web e sua aplicação é mais comuns para mídias impressas, como jornais, revistas, outdoor, entre outros. Para usar essas medidas, use a mestra regra das relativas, aplicando apenas o valor adequado e a medida em si.

font-size: 28pt;
font-size: 2cm;
font-size: 10in;
font-size: 40mm;
font-size: 3pc;

Gostou? Compartilhe



 

Leia também:



© 2008-2019 | Professor Digital | Política de Privacidade | Em Jesus Cristo eu confio