Educação e Utilidade Pública Educação e Utilidade Pública

Como usar font-size para tamanho da letra ou 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

Índice deste artigo

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.

Unidade relativa

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

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.

Unidade absoluta

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.

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.

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.

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.

Com informações de: https://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/

Veja também