FAQ: CSS Typography - Word Spacing

This community-built FAQ covers the “Word Spacing” 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 Word Spacing

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!

It’s not clear from the exercise where in the document the change should become apparent.

I think it’s only in the “Space Mono” at the bottom, because all other h2 content only has a single word.

Maybe change the exercise to alter more text so it’s more apparent what the attribute is affecting?

4 Likes

It would be very helpful to get some info on px, pt, em etc. and the difference between them. We had only very tangential info before on measurement units. I think it’s very important.

6 Likes

What is the value of 1 em and how it compares to 1 px? Could you only use px as a measure for spacing the elements in your website?

1 Like

1px is an absolute value (as are mm, cm, in, pt) and is always 1 pixel.
1em is relative to the font size (roughly the height of the lowercase letters.)

The standard word spacing is 0.25em so it scales with changes in font size. You can use px instead but a 10px space is fine for large sizes but too wide for tiny sizes so you would have to adjust the spacing by hand again.

em is also useful for margin, padding, indentation and the like.

3 Likes

Thanks! This really helps.

There seems to be an error in the example given in this exercise:

h1 {
  word-spacing: 0.3em;
}

The explanation given is:

The default amount of space between words is usually 0.25em. In the example above, the word spacing is set to 0.3em, which represents an increase of only .05em in word spacing.

If this were true, then that would mean the word-spacing value (0.3em) represented the actual length of the space rendered between words. However, in the task, when we add the declaration word-spacing: 0.05em; to our h2 selector, the space rendered between the words Space and Mono does not reduce to a tiny 0.05em.

https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing explains that length values (e.g. 0.05em etc.) increase the existing default length of space by that value, rather than represent the actual length of space to be rendered.

This makes sense, as our declaration word-spacing: 0.05em; does appear to slightly increase the space between the words Space and Mono … (I assume from 0.25em to 0.3em).

Could someone confirm this, please?

3 Likes

Please more lesson on this word spacing

That totally makes sense thinking back to when I have used the similar property, letter-spacing in that past; I recall that I have provided it negative values to make a particular typeface more readable.

Just tested it and you can provide both word-spacing and letter-spacing with negative values, as well as positive ones.

So I think you’re right; the value provided is in addition to the existing spacing.

1 Like