Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

Negrito em CSS - A propriedade font-weight (bold, bolder, lighter, normal e 100-900)

Neste Tutorial de CSS de nossa apostila, vamos falar sobre mais um assunto que se refere as fontes e formatação de textos, que é aparentemente simples (e realmente é), o negrito, através da propriedade font-weight do CSS.

Vamos ver toda a flexibilidade e diferenciação que o CSS nos traz em relação ao HTML solo e puro.


Curso de HTML e CSS com certificado
Obter meu certificado!

Como usar o negrito em CSS: font-weight

Quando estudamos esse assunto, de deixar um texto em negrito, no HTML, aprendemos simplesmente que devemos usar a tag <b></b> e está tudo resolvido.

Porém, no HTML você teria que ir em cada lugar que quer usar o negrito, de cada página, e aplicar as tags. Obviamente que isso é um trabalho sobrenatural se você vai criar seu site inteiro na mão, e mais ainda se ele for um site com muitas páginas e seções.

A solução, para variar, é usar CSS para definir onde irá aplicar o negrito.
Isso é feito usando a propriedade font-weight

Porém, o sentido de negrito em CSS vai bem além daquele que vimos em nosso curso de HTML, pois agora podemos definir o grau de negrito que queremos.

Ou seja, o CSS nos permite definir a espessura, o grau ou peso (weight) de negrito que queremos aplicar em uma fonte.
Inclusive nos permitindo deixar mais espesso ou mais fina a fonte, tudo fica de acordo com sua vontade.

Essas possibilidades de negrito com a propriedade font-weight podem não parecer tão úteis para a maioria das pessoas, mas mostram todo o poder e versatilidade do CSS.

Para grandes revistas e jornais que migraram do papel para a web, foi uma baita mão na roda, pois antes ficávamos preso com o padrão de negrito de cada navegador, no HTML, e muitas vezes a espessura e grau do negrito não eram o desejado por webdesigners nem era igual ao usado no papel.




Como deixar a fonte em negrito em CSS: font-weight: bold

Vamos estudar o primeiro valor da propriedade "font-weight", que é o "bold".

O bold equivale a nossa famosa tag <b>, para simplesmente negritar um trecho.
A sintaxe é:

font-weight: bold;

O negrito serve, basicamente, para destacar um trecho de um texto.
Por exemplo, para fazer a seguinte frase em negrito:

"O CSS é uma linguagem de estilo realmente importante na criação de sites."

Podemos usar o seguinte trecho de código, diretamente na tag <span>:
"O CSS é uma linguagem de estilo <span style="font-weight: bold">realmente</span> importante na criação de sites."

Ou em uma folha de estilos
.negrito {
 font-weight: bold;
}

Para isso, basta nomear os locais de seu site que você quer negritar, por exemplo:
<p>O CSS é uma linguagem de estilo <span class="negrito">realmente</span> importante na criação de sites.</p>


Deixando o texto ainda mais em negrito em CSS: font-weight: bolder

O CSS nos permite ainda usar um valor chamado "bolder" para você deixar seu negrito ("bold") ainda mais realçado do que era antes, a sintaxe de uso é:

font-weight: bolder;

Ou seja, não significa que vai ficar mais espesso, mais grosso.

Vai ficar mais do que era antes.

Porém, isso depende totalmente do da família de fonte que seu navegador esteja usando (font-family), e isso pode variar de acordo com seu sistema operacional (cada sistema define um tom de negrito usado nos programas, como nos navegadores).

Quando estudamos, ainda neste tutorial de CSS sobre os valores numéricos da font-weight iremos entender melhor este conceito de bolder.

.MaisNegrito {
 font-weight: bolder;
}

Tirando o negrito de uma fonte em CSS: fonte-weight: lighter
No HTML tínhamos duas opções: ou usa negrito, ou não usa.
Já no CSS, você pode usar negrito, deixar mais negrito ainda, menos, normal e até deixar o oposto, bem fino (veremos isso em detalhe ao fim do tutorial, quando estudarmos os valores do atributo font-weight).

Assim, se estiver usando um determinado tom de negrito, e usar o valor "bolder", vai subir no tom de negrito e deixar a fonte mais espessa.

E para deixar mais fina, menos 'negrita', do que ela era antes ?
Use o valor "lighter":

font-weight: ligther;

Na folha de estilo:

.MenosNegrito {
 font-weight: lighter;
}

Poderoso esse, CSS, não?
Espere até ver último próximo tópico deste tutorial.

Deixando a fonte normal em relação ao negrito: font-weight: normal

Este valor, "normal", é bem comum em diversos tipos de propriedades no CSS, como no tutorial sobre itálico com o font-style, este valor serve para explicitar que não usaremos as propriedades de negrito, e sim a espessura normal, comum e padrão do navegador.

A sintaxe para fixar o negrito em normal é:

font-weight: normal;

Na verdade, todo texto tem seu nível de negrito, o que o "normal" vez não é tirar o negrito, e sim colocar no valor padrão do seu browser.
É muito usado caso esteja escrevendo em um texto, class ou ID que está em um nível diferente de negrito e queria que a fonte volte ao seu valor normal de boldness.

Como definir o grau de negrito em CSS: 100, 200, 300, 400, 500, 600, 700, 800 e 900

O negrito da tag <b>, do valores "bold", "bolder", "normal" e "lighter" são apenas uma maneira mais simples de definir o grau de negrito de uma fonte.

Um jeito mais específico e poderoso de definir o tanto de negrito, ou a espessura de uma fonte, que o CSS nos fornece é através de valores numéricos, que vão de 100 até 900, variando de 100 em 100, onde 100 é o valor com menos negrito (quase invisível) e o valor 900 é o com mais grau de negrito, mais grosso.

Assim, os possíveis valores são:
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

Dependendo do seu browser, os valores que já estudamos nada mais são que esses valores numéricos:
normal = 400
bold = 700

Se você usar "bolder", ele sobe 100, e se usar "lighter" ele desce 100 nessa faixa de valores.
Assim, para ver toda a faixa de valores de seu browser:

<div style="font-weight:100">font-weight: 100</div>
<div style="font-weight:200">font-weight: 200</div>
<div style="font-weight:300">font-weight: 300</div>
<div style="font-weight:400">font-weight: 400</div>
<div style="font-weight:500">font-weight: 500</div>
<div style="font-weight:600">font-weight: 600</div>
<div style="font-weight:700">font-weight: 700</div>
<div style="font-weight:800">font-weight: 800</div>
<div style="font-weight:900">font-weight: 900</div>

3 comentários:

Dani disse...

Olá!
Estou com um problema no meu site: as palavras em negrito ou itálico não aparecem nas postagens!
No caso do negrito, quando tento mudar em "font-weight" o texto todo fica.
Você pode me ajudar ou orientar, por favor?
Obrigada
Dani

Samoel disse...

Olá amigos do HTML Progressivo, primeiro deixe-me parabeniza-los pelo blog, sem dúvida uns dos melhores que já encontrei. Sou programador desktop - VB - e estou migrando para a Web. Desde que comecei tenho encontrado alguns problemas no CSS e o HTML 5, pois alguns navegadores não suportam algumas de suas propriedades. No caso do font-weigth até o 500 a fonte é normal acima disto é negrito normal, ou seja todos iguais, testei no IE, Firefox e Chrome, será este o caso também?

Unknown disse...

As informações foram passadas de maneira muito clara. Parabéns pelo tutorial rico em conteúdo!

Tutoriais de HTML e CSS