CSS Videos
By Ashton Sanders

CSS Properties

CSS Font-Weight (Bold)

(19 votes, avg: 3.32/5)

Video Transcript:

Hello and welcome to CSS My name is Ashton Sanders I’m going to explain the CSS Property: Font-Weight.

Font-Weight is the CSS property to make text bold or not bold.

(You would think this is the most simple, straight-forward CSS property, but it’s not. In this case, it is a bit more complicated than it needs to be, giving you just a bit more functionality than you’d expect or think you’d need. The bad news is that some browsers don’t currently pay attention to this extra functionality.)

CSS Font-Weight has the values you’d expect: “bold” and “normal”, and honestly, that’s all you really need to know, but here’s the…

CSS Bold Details

CSS Font-Weight also has a sliding scale of not-bold to bold. It starts at 100 (not bold) and increases by increments of one hundred up to 900 (bold). At this point almost none of the modern browsers care about this sliding scale, but maybe one day, you’ll be able to accurately make your text just a little bit bolder with font-weight: 300. Until then, 100 to 500 count as not bold and 600 to 900 count as bold.

(There is also a “lighter” and a “bolder” value, but it might as well be “normal” and “bold” for all intensive purposes.)

Below this video, I’ll show each of the CSS font-weight (CSS bold or not bold) values in effect (and in two fonts) so you can see how each one looks in your browser (and in this video, I’ll show you what the font-weight values looks like in Firefox 12):

Font: Trebuchet Font: Arial
normal bold normal bold
lighter bolder lighter bolder
100 600 100 600
200 700 200 700
300 800 300 800
400 900 400 900
500   500  

You’ll also notice in some browsers (including FireFox 12) that Font-Weight 800 and 900 for the font Arial changes from “Arial Bold” to “Arial Black”.

The final possible value for CSS font-weight is “inherit” which acts as all other inherit values: allowing your element to inherit its bold or not bold state from its parent element. (This is what all elements do on default.)

That is the long winded explanation of how to bold text with CSS.

Thank you for watching, and please subscribe in the left sidebar if you want to get notified when I post new CSS Tutorials. There are advanced CSS Videos in the works, so stay tuned!

Ashton Sanders

This entry was posted by Ashton Sanders on Saturday, June 9th, 2012 at 1:38 am and is filed under CSS Properties, Text/Font. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

6 Responses to “CSS Font-Weight (Bold)”

  1. evan1138 says:

    “to inherit it’s bold or not bold state from it’s parent element.”
    Both it’s’s should be just its. It’s arbitrary but that’s the way English does its thing, here acting as a kind of secret-handshake of the cult of grammarians.

  2. Cyan says:

    Looking forward to more CSS tutorial videos!

  3. Sam says:

    You misspelled “functionality” in the video 🙂

  4. Matt says:

    Great site Ashton! I’m learning alot! let me know when you post more vids! Happy Holidays!


Leave a Reply

.love { css: awesome }