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?


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.


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.


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?


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

Thank you, this was really helpful :slightly_smiling_face:

The description in this lesson didn’t make sense to me either. And I couldn’t figure out WHAT exactly changed and WHERE after setting this declaration. So I started reading comments here and experimenting myself.

It seems true - any value>0 increases the spacing, while any value<0 decreases it.
The word/letter spacing settings work like this on various graphic design apps (ex. AI). So I believe it is a common practice :wink:

But it would take me some time to figure this out without your comment :wink:

1 Like

To learn more about word-spacing, I would recommend this page: http://webtypography.net/2.1.1

It’s based on a classic typography textbook called The Elements of Typographic Style, and the website describes how this book can be applied to web typography with CSS.


What would the unit of measure for “em” be? Does it stand for a certain measurement?


1 Like

Lol, I swear this lesson was made by some troll who wanted to see what they could get away with. Change the word spacing of a tag that is one word? OMG, I so regret giving y’all money.