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:
É possível ainda usar valores personalizados para determinar o tamanho da letra, estes valores poderão estar em diversas unidades de medidas.
pixel (px)
A largura em pixel é proporcional ao dispositivo que estamos usando, monitor, telão, tela de um dispositivo móvel, etc. Esta tem sido uma das unidades mais utilizadas, pelo menos foi assim até o conceito de sites responsivos se tornarem populares. O que ocorre é que para trabalhar com layouts flexíveis, nem sempre o px é a melhor alternativa.
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. O "em" é bastante popular para trabalhar com layouts responsivos.
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.
Medidas em porcentagens não são muito comuns para font-size, mas são bastante comuns para containers (div, por exemplo) ou imagens. No caso do font-size, faz mais sentido usar a unidade "em" ao invés de porcentagem.
vh e vw são unidades de medidas modernas e bastante apropriadas para trabalhar com layouts responsivos. O vh é usado para medir a altura em relação ao viewport, enquanto que o vw é é usado para medir a largura em relação ao viewport.
Viewport é o tamanho utilizável de uma tela, seja em um PC, notebook, tablet ou celular. Imagine que um determinado viewport tenha as seguintes dimensões:
Assim, 1vh é equivalente a 7px, pois ele equivale a 1/100. 1vw é equivalente a 4px, pois também equivale 1/100.
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.
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.
Contudo existem ícones que são tratados também como fonts e por isso usamos também o font-size para determinar o tamanho deles. Dois exemplos de sistemas de ícones que utilizam este método são o Fontawesone e o Bootstrap Icons.
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.
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.
Com informações de: https://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/
COMPARTILHE: Facebook Twitter WhatsApp