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

Design Web Typography Basic Web Typography Weights and Styles

Andre Kucharzyk
Andre Kucharzyk
4,479 Points

Why would you define font-weight in numeric value instead of plain words?

Why would you define font-weight in numeric value instead of plain words?

Vedran Vuković
Vedran Vuković
3,301 Points

it depends of what kind of font design You want to achieve.

3 Answers

Max Senden
Max Senden
23,177 Points

Some fonts have a multitude of very specific weights such as: 'light', 'extra-light', 'thin', 'semi-bold', 'bold', 'extra-bold', 'black', etc. It's easier to describe the difference between light and thin in numbers than to assume everybody understands the difference between them if you put it in words.

Having said this most fonts only have a couple of weights. In that case it's just as easy to just say 'bold' instead of '700'.

Steven Parker
Steven Parker
229,644 Points

Numeric values would allow you greater precision. But the word choices are often good enough, and they do tend to be more commonly used.

Andre Kucharzyk
Andre Kucharzyk
4,479 Points

Thanks for replies! So when it comes to our exercise I've pasted below (tell me if I understand it correctly), it doesn't REALLY matter how you name font-weight? Even if font real weight is 300, and you name it 700, font still remains 300, right?

@font-face { font-family: 'Open Sans'; src: url('webfonts/OpenSans-Light-webfont.eot'); src: url('webfonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/OpenSans-Light-webfont.woff') format('woff'), url('webfonts/OpenSans-Light-webfont.ttf') format('truetype'), url('webfonts/OpenSans-Light-webfont.svg#open_sanslight') format('svg'); font-weight: 300; font-style: normal; }

Steven Parker
Steven Parker
229,644 Points

That's what I would expect, but it seems like it would be confusing to do that.