FAQ: CSS Typography - Word Spacing

Frequently Asked Questions CSS FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

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!

2

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?

8 Likes
3

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.

12 Likes
4

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
5

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.

4 Likes
6

Thanks! This really helps.

7

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?

9 Likes
8

Please more lesson on this word spacing

9

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
10

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
11

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.

2 Likes
12

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

13

https://www.w3schools.com/cssref/css_units.asp

1 Like
14

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.

15

Why ems and how do they work?

16

I agree. Also, when setting the h2 elements’ word-spacing property to 0.05em, I personally didn’t see a difference. However, I increased it to 50px and that’s when I saw a real difference

17

@matrenitski, @blogwhiz20587, and @jnijnijni this article really helped me understand the difference between px, em and rem. I also recommend watching this video as it goes through most of the CSS units

1 Like
18

This em thing was seriously confusing to me. After much searching and testing, this is what I found.
em is essentially the same as font-size, but font size does not have a precise definition.
Font size is defined in most fonts as something just a little larger than the vertical distance from the top of an “H” to the bottom of a “p”.
The default (or “intrinsic”) word spacing is typically 0.25em, or 1/4 of the font-size.

When you specify word-spacing: normal; you are specifying that the spacing will be that default (1/4 of the Hp distance).
When you set word-spacing to a specific length, you are specifying to ADD that much length to the intrinsic spacing.
This is true whether you are specifying a relative length (such as em) or an absolute length (such as px).
But in a relative length, you also have to know what the parent’s font-size is, which also depends on it’s parent, etc.

So. In this example a good text to test with is the paragraph in the blue banner at the top (which conveniently, actually has spaces).
This paragraph is nested like so: html -> body -> div class=“banner” -> p (paragraph). The only parent that has a font-size set is the html element itself, where font-size is set to 16px.
(The font-size properties set for h1, h2, etc. don’t matter because those are not parents for this paragraph.)

So if our font-size is 16px and the default word-spacing is 0.25 of this, the spacing should be 4px when word-spacing is normal.
I started with no word-spacing property set at all in the code block for the selector: .banner p
Test 1:
I set word-spacing: normal; to see if this paragraph changed at all. It seemed to stay the same, so the spacing here does seem to be default.
Test 2:
I set word-spacing to 4px, and the paragraph’s spaces clearly got larger. It was difficult to tell by how much, but the words were clearly farther apart.
Test 3: If my theory is correct, then 1em (= font-size) is 16px and so 0.25em is 4px.
I changed the word-spacing to 0.25em and the paragraph’s spacing did not appear to change.
This seems like confirmation that 0.25em == 4px.

For a final check, I tried a negative em value and a negative px value. (If the default spacing is 0.25em, and setting a length ADDs the length to that, then setting word-spacing to -0.25em should exactly get rid of the spacing.)
I set word-spacing to -0.25em, and sure enough, the paragraph in the blue banner now looks like a single un-spaced string of text. No spaces, and the words also don’t overlap.
I then set word-spacing to -4px, and this looked the same; no spaces and also no overlap.

So for this paragraph, font-size is 16px, word-spacing is 4px by default.
If I set a length in em or in px, CSS ADDs that much to the default spacing of 4px.
If I set the word-spacing to -4px or -0.25em, that exactly gets rid of the spaces.
Whew.

1 Like
19

Word spacing is on the horizontal axis. Line spacing is on the vertical axis.

An EM is the width of an M. That’s all we need to know in terms of word spacing. A space character is about 0.5em. When we apply the word-spacing property it adds extra space on the space character. If we make that value a negative, it takes away from the normal width of the space character.

Try this experiment.

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Word Spacing</title>
<style>
  body {
    font-size: 100%;
    margin: 0;
    padding: 0;
  }
  .normal {
    word-spacing: normal;
  }
  .tight {
    word-spacing: -0.1em;
  }
  .loose {
    word-spacing: 0.5em;
  }
  p {
    margin: 0;
    font-size: 1em;
  }
</style>
</head>
<body>
  <p class="tight">A quick brown fox jumps over the lazy dog.</p>
  <p class="normal">A quick brown fox jumps over the lazy dog.</p>
  <p class="loose">A quick brown fox jumps over the lazy dog.</p>
</body>
</html>

Change up the font-size of the P to 2em for better detail.

Word Spacing in EMs - Replit

2 Likes
20

Thank youuuu!
So it adds/subtracts extra space from the default normal spacing of that specific font, rather than how this lesson worded it which 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.

Is it possible for the lesson to be corrected