Neste artigo, você aprenderá como usar CSS para estilizar fontes em páginas da web.
Estilizando fontes com CSS
Escolher a fonte e o estilo corretos é fundamental para a legibilidade do texto na página.
CSS fornece várias propriedades para estilizar fontes de texto, incluindo alterar a fonte, controlar o tamanho da fonte e negrito, gerenciar variações e muito mais.
As propriedades da fonte incluem: font-family, font-style, font-weight, font-size e font-variant.
Vamos discutir cada uma dessas propriedades de fonte com mais detalhes.
Família de fontes
A propriedade font-family é usada para especificar a fonte usada para renderizar o texto.
Essa propriedade pode conter vários nomes de fontes separados por vírgulas como sistemas alternativos, de modo que, se a primeira fonte não estiver disponível no sistema do usuário, o navegador tentará usar a segunda fonte e assim por diante.
Então, primeiro liste a fonte que você deseja, depois liste todas as fontes que podem preencher a primeira fonte (se não estiver disponível). Você deve terminar sua lista com cinco famílias de fontes genéricas – serif, sans-serif, monospace. Uma declaração típica de família de fontes pode ser assim: cursive fantasy
body {
font-family: Arial, Helvetica, sans-serif;
}Observação: se o nome da família de fontes contiver várias palavras, ele deverá ser colocado entre aspas, como “Times New Roman”, “Courier New”, “Segoe UI” etc.
As famílias de fontes mais usadas em web design são serif e sans-serif porque são mais legíveis. Embora as fontes monoespaçadas sejam frequentemente usadas para exibir código, porque nessas fontes cada letra ocupa o mesmo espaço e se parece com o texto digitado.
As fontes cursivas parecem cursivas ou escritas à mão. As fontes extravagantes representam fontes artísticas, mas não são amplamente utilizadas devido à sua baixa disponibilidade em sistemas operacionais.
Diferença entre fontes com serifa e sem serifa
As fontes com serifa possuem linhas ou pequenos traços nas extremidades dos caracteres, enquanto as fontes sem serifa são mais retas e não possuem esses pequenos traços. Veja a imagem abaixo.
Estilo de fonte
A propriedade font-style é usada para definir o estilo da fonte do conteúdo de texto do elemento.
O estilo da fonte pode ser normal, itálico ou oblique. O padrão é normal.
Vamos tentar o seguinte exemplo para entender como funciona basicamente:
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}Nota: À primeira vista, os estilos de fonte oblíquo e itálico parecem a mesma coisa, mas há uma diferença. O italic estilo usa uma versão em itálico da fonte, enquanto o oblique estilo, por outro lado, é simplesmente uma versão inclinada da fonte normal.
Tamanho da fonte
A propriedade font-size é usada para definir o tamanho da fonte do conteúdo de texto do elemento.
Existem várias maneiras de especificar valores de tamanho de fonte, como usar palavras-chave, porcentagens, pixels, ems, etc.
Defina o tamanho da fonte em pixels
Definir o tamanho da fonte para um valor de pixel (como 14px, 16px etc.) é uma boa opção quando a precisão do pixel é necessária. Um pixel é uma unidade de medida absoluta que especifica um comprimento fixo.
Vamos tentar o seguinte exemplo para entender como funciona basicamente:
h1 {
font-size: 24px;
}
p {
font-size: 14px;
}Definir o tamanho da fonte em pixels não é fácil, pois o usuário não pode alterar o tamanho da fonte nas configurações do navegador. Por exemplo, usuários com visão limitada ou com baixa visão podem querer definir o tamanho da fonte muito maior do que o especificado.
Portanto, se você deseja criar um design inclusivo, deve evitar valores de pixel e usar valores relacionados ao tamanho de fonte padrão do usuário.
Dica: Você também pode usar o recurso de zoom para redimensionar o texto em todos os navegadores. No entanto, esse recurso redimensiona a página inteira, não apenas o texto. O W3C recomenda utilizar valores em porcentagens (%) para criar um layout mais robusto e escalável.
Defina o tamanho da fonte com EM
A unidade em refere-se ao tamanho da fonte do elemento pai. Ao definir a propriedade font-size, 1em é igual ao tamanho da fonte aplicada ao pai do elemento.
Portanto, se você definir um tamanho de fonte de 20px no elemento body, então 1em = 20px e 2em = 40px.
No entanto, se você não definir o tamanho da fonte em nenhum lugar da página, ele será o padrão do navegador, que geralmente é de 16 pixels. Portanto, por padrão, 1em = 16px e 2em = 32px.
Vamos dar uma olhada no exemplo a seguir para entender como ele funciona basicamente:
h1 {
font-size: 2em; /* 32px/16px=2em */
}
p {
font-size: 0.875em; /* 14px/16px=0.875em */
}Use uma combinação de porcentagem e EM
Como você apontou no exemplo acima, calcular o valor em não parece ser simples. Para simplificar isso, uma técnica popular é definir o tamanho da fonte do elemento body para 62,5% (62,5% do padrão 16px), que é 10px ou 0,625em.
Agora você pode definir o tamanho da fonte para qualquer elemento em unidades em, com uma conversão fácil de lembrar dividindo o valor px por 10. Então 10px = 1em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em, etc. Vejamos o seguinte exemplo:
body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.4em; /* 1.4em = 14px */
}
p span {
font-size: 2em; /* 2em = 28px */
}Defina o tamanho da fonte usando Root EM
Para facilitar as coisas, CSS3 introduziu remunity (abreviação de “root in”), que é sempre relativo ao tamanho da fonte do elemento raiz (html), independentemente da posição do elemento no documento (não sua posição) em relação ao tamanho da fonte do pai do elemento).
Isso significa que 1rem é equivalente ao tamanho da fonte do elemento html, cujo padrão é 16px na maioria dos navegadores. Vamos tentar um exemplo para ver como funciona:
html {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.4rem; /* 1.4rem = 14px */
}
p span {
font-size: 2rem; /* 2rem = 20px (not 28px) */
}
Use palavras-chave para definir o tamanho da fonte
CSS fornece várias palavras-chave que podem ser usadas para definir o tamanho da fonte.
Tamanhos de fonte absolutos podem ser especificados usando uma das seguintes palavras-chave: xx-small, x-small, small, medium, large, x-large, xx-large. No entanto, os tamanhos de fonte relativos podem ser especificados usando as seguintes palavras-chave: menor ou maior. Vamos tentar um exemplo para ver como funciona:
body {
font-size: large;
}
h1 {
font-size: larger;
}
p {
font-size: smaller;
}Nota: A palavra-chave medium é equivalente ao tamanho de fonte padrão do navegador, que geralmente é 16px. Da mesma forma, xx-small é equivalente a 9 pixels, x-small é 10 pixels, small é 13 pixels, large é 18 pixels, x-large é 24 pixels e xx-large é 32 pixels.
Dica: Ao definir o tamanho da fonte no elemento body, você pode definir um tamanho de fonte relativo em qualquer outro lugar da página, permitindo aumentar ou diminuir facilmente o tamanho da fonte de acordo.
Definir o tamanho da fonte usando unidades de viewport
O tamanho da fonte pode ser especificado em unidades de viewport, como vw ou vh.
As unidades da janela de visualização são porcentagens do tamanho da janela de visualização do navegador, onde 1vw = 1% da largura da janela de visualização e 1vh = 1% da altura da janela de visualização. Portanto, se a janela de visualização tiver 1600px de largura, 1vw é 16px.
Experimente o seguinte exemplo de redimensionamento da janela do seu navegador para ver como funciona:
body {
font-size: 1vw;
}
h1 {
font-size: 3vw;
}No entanto, há um problema com as células da janela de visualização. Em telas pequenas, as fontes são muito pequenas para serem lidas. Para evitar isso, você pode usar a função CSS calc() assim:
html {
font-size: calc(1em + 1vw);
}
h1 {
font-size: 3rem;
}Neste exemplo, o tamanho da fonte é de pelo menos 1em ou 16px, mesmo que a largura da janela de visualização seja 0.
Você ainda usa consultas de mídia CSS para criar uma tipografia melhor responsiva e suave.
Espessura da fonte
A propriedade font-weight especifica peso ou negrito da fonte.
Esta propriedade pode ter um dos seguintes valores: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 e inherit.
- Os valores numéricos 100-900 especificam pesos de fonte, onde cada número representa um peso maior que seu antecessor. 400 é igual a normal e 700 é igual a negrito.
- Os valores em negrito e mais claros são relativos ao peso da fonte herdado, enquanto outros valores, como normale , bold são pesos de fonte absolutos.
Vamos tentar um exemplo para entender como essa propriedade funciona basicamente:
p {
font-weight: bold;
}Nota: A maioria das fontes está disponível apenas em um número limitado de pesos; elas geralmente estão disponíveis apenas em normal e negrito. Se uma fonte com a gramatura especificada não estiver disponível, uma fonte alternativa mais próxima da gramatura disponível será selecionada.
Variante de fonte
A propriedade font-variant permite que o texto seja exibido em uma variante especial em minúsculas.
Letras maiúsculas ou minúsculas diferem ligeiramente das letras maiúsculas normais, onde as letras minúsculas aparecem como versões menores das letras maiúsculas correspondentes.
Experimente os exemplos a seguir para ver como essa propriedade realmente funciona:
p {
font-variant: small-caps;
}O valor normal remove letras maiúsculas do texto que foi formatado dessa maneira.
Leia também: HTML: guia sobre iFrame
