Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Miguel Nunez
Miguel Nunez
3,266 Points

What does font weight mean exactly?

I'm getting confuse with this element on google cant find an easier source to explain this in a simpler way

5 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Font-weight defines the thinness or thickness of a font. The ranges are 100 to 900. Normal font is 400. 700 is bold. So 900 would be an "extra bold" and a 100 would be an "extra light". These are (to my knowledge) only used in increments of 100. Hope this helps! :dizzy:

Miguel Nunez
Miguel Nunez
3,266 Points

So basically this just makes your font text bold increase or decrease in thickness correct? and every time I go by 100 up it still stay looking the same thickness in other words so when I changed it to 200 and did a comparison of 100 I see no difference is thickness is that suppose to happen because i'm using w3schools.com editor to understand this visually but when I go up to over a couple of 100s up which takes a couple of 100s for it to be notice in boldness in other words I notice the change of thickness of the text changes when I enter 900 not sure if that makes sense how i'm explaining it to you I just thought if I start with 100 it will be normal and go to 200 it will get bold and if I go in 300 it will get thicker width and if I go up to 400 it will get more thicker in boldness in width and if I go up to 500 it will get bigger by width So is that what the element means ?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

First, font-weight is not an element. It's a property :smiley: Secondly, not necessarily. When using a font, that weight must be supported. Take a look at this quick-use page for the google font Open Sans.

https://www.google.com/fonts#QuickUsePlace:quickUse

Here you can pick font-weights of 300, 400, 600, 700, and 800. Anything above or below those might not result in a visual difference. Keep in mind that if you want to use all these weights your link will look like this:

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>

But again, it's best to think of a font-weight of 400 as normal. 700 as bold. Anything above 700 should get thicker (providing the font you have supports it). Anything less than 400 should get lighter (providing the font you have supports it). Hope that helps! :dizzy:

Miguel Nunez
Miguel Nunez
3,266 Points

So the higher I go by 100's example 100,200,300,400 etc.. it wont increase by boldness visually? and when you say weight I think of weight out side of coding terminology like how much something weighs heaviness like a person who weighs 185 pounds etc.. what does weight mean in coding terminology and sorry its been months since I been on here so I got the element and property mixed up. Does this property suppose to stretch a text on a web page in a bold way? I still thinking about this visually.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Oh sorry, that link doesn't work! My fault. Go here and click the first font that comes up.

https://www.google.com/fonts#

It's all the same font, but at different weights. This should give you an excellent visual representation of what's happening here. And which weights are supported for this font.

But I'm assuming you've at some point used Microsoft Word, right? And when you highlight a word and then click the "bold" button it turns that word from a font-weight of 400 to a font-weight of 700.

Miguel Nunez
Miguel Nunez
3,266 Points

Ok its making more sense to me now :) so basically font weight means thickness of text correct? aka boldness of text correct ?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Miguel Nunez exactly. Where 400 is normal and anything above that is bolder. Anything below that is lighter.

Miguel Nunez
Miguel Nunez
3,266 Points

Thank you your the best Jennifer. :)