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. Veja ainda algumas dúvidas respondidas.

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;

Perguntas e respostas

O fonte-size é usado apenas para letras (fontes)?

Sim, ele é usado para definir o tamanho da fonte ou da letra e portanto é específico para esta finalidade. Em CSS existe outras propriedades que são aplicadas a definir tamanho de objetos que se aplica imagens, divs e outros elementos de HTML.

O que é melhor usar: unidade absoluta ou relativa?

Conforme explicado acima, cada uma delas cumprir um papel e deve ser usado no seu respectivo contexto. Assim o uso de uma fonte absoluta faz mais sentido para locais onde os tamanhos de aplicação são absolutos, como que acontece nas mídias impressas. Já o tamanho relativo é mais propício para o uso em tela que tem o seu tamanho também relativo em função da resolução da tela.

É melhor usar pixel ou porcentagem?

Esta é uma pergunta cuja resposta ainda depender bastante do propósito que você tem e o contexto em que está sendo aplicado.

Por padrão é comum usar pixel para definir o tamanho da letra, enquanto a porcentagem é mais usada para definir o tamanho de objetos. Mas isto não é necessariamente uma regra e pode sim ser usado em um caso ou outro.

Mas ao invés de usar pixels ou porcentagem, muitos designers preferem utilizar (em), que é uma medida proporcional e portanto um pouco mais fácil de ser usada quando se refere a letra. De fato, a porcentagem não faz muito sentido, bem como o pixels pode não ser também a melhor opção para todos os casos, especialmente quando estivermos falando de dispositivos móveis. Assim a medida (em) aparece como uma boa opção para se trabalhar com tamanho de letras.


VEJA TAMBÉM:

CANAL NO YOUTUBE

INSCREVA-SE:



Sistemas Web

Playlist de SQL

Youtube Youtube Youtube
© 2021 - Utilidade Pública: Tecnologia, Educação e Cidadania.