FAQ: CSS Typography - Font Weight II

This community-built FAQ covers the "Font Weight II " exercise from the lesson “CSS Typography”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise _Font Weight II _

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

1 Like

In this exercise it says:

You can look up the font you are using to see which font-weight values are available.

I understand the fact that some font families may have more font-weight values available than others, and that some may only have one (the default value). I’ve had a quick look to see if I can find some suitable reference material which lists available font weights by font family, but so far I can’t find anything.

Can anyone suggest something?

Or is it easier, and therefore more usual, to just find this out by trial and error?
(My understanding is that if a particular font-weight value isn’t available for a particular font family, then CSS will automatically render the ‘nearest’ one available according to a fallback weight rule.)

  • FAVORITE FONTS
  • There are few lines in ths topic which i camt understand … so plz help
    why this is using nav class=“header”
    and why this a class=“home” .?

I’m not sure I fully get what you don’t understand, but hopefully this will help…

I think the fact that a value of "header" has been used for the <nav> element’s class attribute is purely a decision of the coder. It seems logical to me as the navigation bar is also a kind of header, and if the page had more than one navigation bar (and therefore more than one <nav> element) the class="header" would allows us to select this particular one individually. But, I also think this could equally have been class="navigation" or class="anything else". The point is that this <nav> element can be selected for styling with a CSS class selector of whatever word is chosen as the class's value, which in this case is .header.

There are four navigation buttons, but only the “Favourite Fonts” one is to be styled blue. That’s why the <a> element that renders the link for this button needs a different class value to the other three (which are all class="pagelink". I think the coder has chosen class="home", because this button takes you back to the top of the page (a kind of “home”), although I admit it would seem more logical if the button also said “Home”. But again, I don’t think it actually matters what word is chosen as the class's value. What’s important is that, whatever this value is, it’s used as the CSS class selector to style the element according to a specific CSS rule set - which it is, as follows:

a.home {
  color: #4D00FF;
} 

Hope that helps! :sweat_smile:

2 Likes

I don’t know if this will help you Jon, but if you click in to each font on this webpage I’ll link, it lets you test out different weights. The few I tested I only saw a change between bold and normal, even though the picklist also has ‘lighter’ and ‘bolder’ for a total of four weights.

Thanks @agentgenx - but like you say, for each font on that linked web page, there only seems to be a difference between bold and normal. I find it hard to believe that there isn’t more variety available for some fonts…

It’s entirely due to the font-family creator. They can determine how many variants of ‘boldness’ to employ. Good font-families will usually employ a wide variety, though it is common to import only a couple for rendering purposes

1 Like

Since the valid values are multiples of 100, why don’t people just use 1-9 instead?

2 Likes

I’m curious - what effect will assigning a font-weight of 700 on a font-family that only has a 600 and a 800 (but no 700) weight font have?

Is it possible to ‘break’ my code if I assign a weight that the font-family doesn’t have?

How do browsers typically interpret mistakes in assigning weight?

Refer to MDN. Here is the link for font fallback rule.

1 Like

Why are font weights listed using a 3-digit number if only multiples of 100 are valid, as mentioned in exercise 4? Why not just use 1-9 instead of 100-900?

1 Like

I found Google Fonts to be a great resource when researching fonts and available weights - https://fonts.google.com/

2 Likes

Don’t quite get the css below. It means “home” class within “a” element?
a.home {
color: #4D00FF;
}
how is it different from
.home a {
color: #4DOOFE;
}

In semantic HTML lesson, we learned that HEADER element is better than DIV class= " header". So why are we using DIV instead of HEADER. Is it for only learning purpose?

in exercise 4 it says: " You can look up the font you are using to see which font-weight values are available."

Where can we look these up?

  1. What does the “multiples of 100” definition for bolding fonts originate from?
  2. You can look up the font you are using to see which [font-weight] values are available. » Where would one look this up?
1 Like