CSS

How To Make Text Bold

Now seems like a good time to talk about font weight.

I don’t want more jokes about my weight.

Don’t worry I wasn’t going to. This is just about CSS, I promise.

Good.

Wow this has really been weighing heavily on your mind hasn’t it?

It has act…. Wait….. was that a joke?

Remember before when we looked at headings and paragraph elements? If not then now is a good time to refresh your memory.

You may remember that the headings elements were far more bold than paragraph text. Rather than referring to ‘bold-ness’ of text, which can be confusing.

Yes, if you mix that up for lack of hair, which I am assuming you’re not talking about.

Yes, the word ‘bold-ness’ can be confusing.

Instead, in CSS we call a font’s ‘bold-ness’, it’s weight and bolder text is darker and heavier looking than normal text.

To set font-weight, firstly you have to refer to the font-weight property in CSS, which is done like this:

        font-weight: 
      

Then you need a value for your CSS property. CSS accepts some keywords for font-weight but you can also use numbers. Let’s start with looking at the some examples with keywords.

Font Weight Keywords

By default, paragraph text will use the normal font weight which looks just like this text. If you want to specifically set your font-weight to the normal setting, you can do that with this code:

        font-weight: normal;
      

Headings use bold text but you can set any text to be bold with the ‘bold’ keyword, used like this:

        font-weight: bold;
      

The result looks like this.

Chunky characters for chunky cats.

You may also wish your text to be less-bold or lighter than normal text. This is another option with CSS and is done like this:

        font-weight: lighter;
      

The will result in text which looks like this.

Lightweight letters for little lions

I prefer the chunkier text.

Just saying.

Use the box below, to try out these keywords and see which one you prefer.

        font-weight:
      

Font Weight Issues

Font Weight Values

As well as the keywords you can also use numbers to set font-weight in your CSS code.

But what unit of measurement do you use?

Grams or kilos or pounds or ounces doesn’t make sense.

If it were actually baldness you could use whatever the opposite of hair is.

But for this I don’t know what you could use!

That is a very good question.

When setting font-weight with numbers, you don’t actually use a unit of measurement; you just use the number. As Aria said, grams and kilos make no sense as the text does not actually weigh anything.

What is the opposite of hair?

That is a less good question.

The numbers you can use go from 100 to 900 in jumps of 100. More weight means bolder text, so 100 is the lightest and 900 is the heaviest or boldest text. Normal weight is

There’s no such thing as normal weight; we are all cute.

Normal font weight is equal to a value of 400 with bold text being equal to 700.

Use the box below to try out these values. Do you notice anything strange?

        font-weight:
      

The opposite of hair.

Font Weight Issues

I’m having a weight issue.

Aria, I’ve told you before, it was only a little joke.

Everyone thinks you’re lovely as you are.

I meant font-weight. Not all the values seem to work?

Ah, that’s a good point and definitely worth talking about.

Is it really everyone that thinks I’m lovely?

Yes, everyone

Aria has stumbled across a good point. Sometimes, not all of the values for setting font-weight in CSS make a difference. This depends if there is an option for that particular font-weight associated with that particular font and often there is not.

Each font will have light, normal and bold options so while it seems that using numbers will give you more control, in reality it’s just more likely to cause issues and so using the keywords is often far simpler.

Use the boxes below to compare the result of text using keywords and using values.

        
        
        #example-title {
        font-weight:
        }
        .example-paragraph {
        font-weight:
        }
      

Aria's Title

This is Aria's paragraph.

You can also use this box to experiment with different font-weight values to see how they compare next to each other.