Ryfujk

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

If I am a new writer, where can I take help from a professional to judge my work?

How to add multiple differently colored borders around a node?

Do authors have to be politically correct in article-writing?

Can I become debt free or should I file for bankruptcy? How do I manage my debt and finances?

Six real numbers so that product of any five is the sixth one

What can I substitute for soda pop in a sweet pork recipe?

What's the purpose of these copper coils with resitors inside them in A Yamaha RX-V396RDS amplifier?

Talents during the time of Achasverous

What is meant by "mushroom grandeur" in this context?

What is the difference between throw e and throw new Exception(e)?

How to get the sitecore field updated date instead of item updated date?

Called into a meeting and told we are being made redundant (laid off) and "not to share outside". Can I tell my partner?

Visualize execution of scripts

Auto Insert date into Notepad

Do commercial flights continue with an engine out?

How to deny access to SQL Server to certain login over SSMS, but allow over .Net SqlClient Data Provider

Unexpected behavior of Bash script: First executes function, afterwards executes alias

How would we write a misogynistic character without offending people?

Does music exist in Panem? And if so, what kinds of music?

Why is working on the same position for more than 15 years not a red flag?

Is there a better way to make addon working on both blender 2.80 and 2.79?

Wanted: 5.25 floppy to usb adapter

Quenching swords in dragon blood; why?

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

What are valid values for the id attribute in HTML?Which characters are valid in CSS class names/selectors?Is it valid to replace http:// with // in a <script src=“http://…”>?How can I set the default value for an HTML <select> element?CSS text justify with letter spacingIs there a way to make css letter-spacing: 0.5 px?Is background-color:none valid CSS?CSS letter-spacing SAFARICSS underline and letter-spacingInconsistent margin with em

12

1

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.

<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>0</code></p>



.loose {

  letter-spacing: 2px;

}



.tight {

  letter-spacing: -1px;

}



.zero {

  letter-spacing: 0;

}



.normal {

  letter-spacing: normal;

}

html css letter-spacing

share|improve this question

asked 6 hours ago

CrashalotCrashalot

15.3k48188330

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Why the close votes?
  
  – Crashalot
  6 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  w3.org/TR/css-text-3/#letter-spacing-property: normal No additional spacing is applied. Computes to zero. - It's just a keyword value
  
  – Pete
  6 hours ago
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Pete so you're saying normal and 0 are equivalent, right?
  
  – Crashalot
  6 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I assume so as that's the latest published version of css text module 3 and makes no mention of the user agent - drafts.csswg.org/css-values/#keywords
  
  – Pete
  6 hours ago
  
  
  

  
  
  
  

add a comment | 

12

1

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.

<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>0</code></p>



.loose {

  letter-spacing: 2px;

}



.tight {

  letter-spacing: -1px;

}



.zero {

  letter-spacing: 0;

}



.normal {

  letter-spacing: normal;

}

html css letter-spacing

share|improve this question

asked 6 hours ago

CrashalotCrashalot

15.3k48188330

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Why the close votes?
  
  – Crashalot
  6 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  w3.org/TR/css-text-3/#letter-spacing-property: normal No additional spacing is applied. Computes to zero. - It's just a keyword value
  
  – Pete
  6 hours ago
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Pete so you're saying normal and 0 are equivalent, right?
  
  – Crashalot
  6 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I assume so as that's the latest published version of css text module 3 and makes no mention of the user agent - drafts.csswg.org/css-values/#keywords
  
  – Pete
  6 hours ago
  
  
  

  
  
  
  

add a comment | 

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.

<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>0</code></p>



.loose {

  letter-spacing: 2px;

}



.tight {

  letter-spacing: -1px;

}



.zero {

  letter-spacing: 0;

}



.normal {

  letter-spacing: normal;

}

html css letter-spacing

share|improve this question

asked 6 hours ago

CrashalotCrashalot

15.3k48188330

<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>0</code></p>



.loose {

  letter-spacing: 2px;

}



.tight {

  letter-spacing: -1px;

}



.zero {

  letter-spacing: 0;

}



.normal {

  letter-spacing: normal;

}

share|improve this question

asked 6 hours ago

CrashalotCrashalot

15.3k48188330

share|improve this question

asked 6 hours ago

CrashalotCrashalot

15.3k48188330

asked 6 hours ago

CrashalotCrashalot

15.3k48188330

asked 6 hours ago

CrashalotCrashalot

15.3k48188330

2 Answers
2

active

oldest

votes

10

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

share|improve this answer

edited 5 hours ago

answered 6 hours ago

Temani AfifTemani Afif

76.7k94489

add a comment | 

2

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.

share|improve this answer

answered 6 hours ago

Andreas FursterAndreas Furster

9701524

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54980706%2funderstanding-css-letter-spacing-is-it-valid-to-replace-the-default-value-of-no%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

10

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

share|improve this answer

edited 5 hours ago

answered 6 hours ago

Temani AfifTemani Afif

76.7k94489

add a comment | 

10

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

share|improve this answer

edited 5 hours ago

answered 6 hours ago

Temani AfifTemani Afif

76.7k94489

add a comment | 

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

share|improve this answer

edited 5 hours ago

answered 6 hours ago

Temani AfifTemani Afif

76.7k94489

share|improve this answer

edited 5 hours ago

answered 6 hours ago

Temani AfifTemani Afif

76.7k94489

answered 6 hours ago

Temani AfifTemani Afif

76.7k94489

answered 6 hours ago

Temani AfifTemani Afif

76.7k94489

2

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.

share|improve this answer

answered 6 hours ago

Andreas FursterAndreas Furster

9701524

add a comment | 

2

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.

share|improve this answer

answered 6 hours ago

Andreas FursterAndreas Furster

9701524

add a comment | 

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.

share|improve this answer

answered 6 hours ago

Andreas FursterAndreas Furster

9701524

share|improve this answer

answered 6 hours ago

Andreas FursterAndreas Furster

9701524

answered 6 hours ago

Andreas FursterAndreas Furster

9701524

answered 6 hours ago

Andreas FursterAndreas Furster

9701524