Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Understanding CSS letter-spacing: is it valid to replace the default value of normal with 0?

Tags:

According to this page, the CSS letter-spacing property has a default value of normal.

Notably, non-default values are added to the default value:

The most important point to note when using letter-spacing is that the value specified does not change the default, it is added to the default spacing the browser applies (based on the font metrics). letter-spacing also supports negative values, which will tighten the appearance of text, rather than loosening it.

According to this definition, 0 should be equivalent to the default value of normal since 0 + X = X.

1) Is it valid to use 0 as a replacement for the default value of normal? (This is for a slider implementation.)

2) Why isn't 0 the default value? Why introduce another value (i.e., normal)?

This test on CodePen also suggests a value of 0 is, indeed, equivalent to the default value of normal.

.loose {
  letter-spacing: 2px;
}

.tight {
  letter-spacing: -1px;
}

.zero {
  letter-spacing: 0;
}

.normal {
  letter-spacing: normal;
}
<p>This type has no additional letter-spacing applied.</p>

<p class="loose">This type is letter-spaced loosely at <code>2px</code>.</p>

<p class="tight">This type is letter-spaced tightly at <code>-1px</code></p>

<p class="zero">This type is letter-spaced at <code>0</code></p>

<p class="normal">This type is letter-spaced at <code>normal</code></p>
like image 204
Crashalot Avatar asked Mar 04 '19 09:03

Crashalot


People also ask

What does letter-spacing do in CSS?

The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text.

How do you change the space in CSS?

Use the line-height property in CSS to do so. Browsers by default will create a certain amount of space between lines to ensure that the text is easily readable. For example, for 12-point type, a browser will place about 1 point of vertical space between lines.

Which of the following CSS property is used to specify the space between every letter inside element?

The letter-spacing property is used to specify the space between the characters in a text.


2 Answers

No both aren't exactly equivalent. If you check the current specification

normal

The spacing is the normal spacing for the current font. This value allows the user agent to alter the space between characters in order to justify text.

Then

<length>

This value indicates inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.

In most of the cases, they will render the same but as you can read, the user agent doesn't handle both the same.


The definition in the Draft of the next level seems to have changed slightly and both are now the same.

For legacy reasons, a computed letter-spacing of zero yields a resolved value (getComputedStyle() return value) of normal..

You can also read here: https://github.com/w3c/csswg-drafts/issues/1484

CSS2 used to treat normal different than 0, so computing differently was a requirement. Now that the spec treats them the same ...


I don't know if all the browsers are already implementing this level but you can most likely consider them the same

like image 102
Temani Afif Avatar answered Sep 29 '22 09:09

Temani Afif


According to the Mozzila docs: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing#Values

The normal letter spacing for the current font. Unlike a value of 0, this keyword allows the user agent to alter the space between characters in order to justify text.

Seems like 0 is more of a hard value to set it to the default. Normal can be modified by the user agent.

like image 30
Andreas Furster Avatar answered Sep 29 '22 08:09

Andreas Furster