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





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







18















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>












share|improve this question




















  • 1





    Why the close votes?

    – Crashalot
    Mar 4 at 9:59






  • 1





    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
    Mar 4 at 10:02













  • @Pete so you're saying normal and 0 are equivalent, right?

    – Crashalot
    Mar 4 at 10:06











  • 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
    Mar 4 at 10:14




















18















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>












share|improve this question




















  • 1





    Why the close votes?

    – Crashalot
    Mar 4 at 9:59






  • 1





    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
    Mar 4 at 10:02













  • @Pete so you're saying normal and 0 are equivalent, right?

    – Crashalot
    Mar 4 at 10:06











  • 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
    Mar 4 at 10:14
















18












18








18


2






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>












share|improve this question
















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>








.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>





.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>






html css letter-spacing






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 5 at 5:47









Nisarg

11.2k52341




11.2k52341










asked Mar 4 at 9:56









CrashalotCrashalot

15.6k48192334




15.6k48192334








  • 1





    Why the close votes?

    – Crashalot
    Mar 4 at 9:59






  • 1





    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
    Mar 4 at 10:02













  • @Pete so you're saying normal and 0 are equivalent, right?

    – Crashalot
    Mar 4 at 10:06











  • 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
    Mar 4 at 10:14
















  • 1





    Why the close votes?

    – Crashalot
    Mar 4 at 9:59






  • 1





    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
    Mar 4 at 10:02













  • @Pete so you're saying normal and 0 are equivalent, right?

    – Crashalot
    Mar 4 at 10:06











  • 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
    Mar 4 at 10:14










1




1





Why the close votes?

– Crashalot
Mar 4 at 9:59





Why the close votes?

– Crashalot
Mar 4 at 9:59




1




1





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
Mar 4 at 10:02







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
Mar 4 at 10:02















@Pete so you're saying normal and 0 are equivalent, right?

– Crashalot
Mar 4 at 10:06





@Pete so you're saying normal and 0 are equivalent, right?

– Crashalot
Mar 4 at 10:06













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
Mar 4 at 10:14







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
Mar 4 at 10:14














2 Answers
2






active

oldest

votes


















18














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


























  • so in CSS2, it only differs for text-align: justify

    – gsnedders
    Mar 4 at 18:02






  • 1





    @gsnedders yes it may differ with justify (not necessarely). Unfortunately I cannot proove it, I am trying to find if I can get a working example to show this difference.

    – Temani Afif
    Mar 4 at 18:31



















3














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
























    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


















    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















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    18














    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


























    • so in CSS2, it only differs for text-align: justify

      – gsnedders
      Mar 4 at 18:02






    • 1





      @gsnedders yes it may differ with justify (not necessarely). Unfortunately I cannot proove it, I am trying to find if I can get a working example to show this difference.

      – Temani Afif
      Mar 4 at 18:31
















    18














    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


























    • so in CSS2, it only differs for text-align: justify

      – gsnedders
      Mar 4 at 18:02






    • 1





      @gsnedders yes it may differ with justify (not necessarely). Unfortunately I cannot proove it, I am trying to find if I can get a working example to show this difference.

      – Temani Afif
      Mar 4 at 18:31














    18












    18








    18







    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















    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














    share|improve this answer



    share|improve this answer








    edited Mar 4 at 10:37

























    answered Mar 4 at 10:03









    Temani AfifTemani Afif

    82.2k104795




    82.2k104795













    • so in CSS2, it only differs for text-align: justify

      – gsnedders
      Mar 4 at 18:02






    • 1





      @gsnedders yes it may differ with justify (not necessarely). Unfortunately I cannot proove it, I am trying to find if I can get a working example to show this difference.

      – Temani Afif
      Mar 4 at 18:31



















    • so in CSS2, it only differs for text-align: justify

      – gsnedders
      Mar 4 at 18:02






    • 1





      @gsnedders yes it may differ with justify (not necessarely). Unfortunately I cannot proove it, I am trying to find if I can get a working example to show this difference.

      – Temani Afif
      Mar 4 at 18:31

















    so in CSS2, it only differs for text-align: justify

    – gsnedders
    Mar 4 at 18:02





    so in CSS2, it only differs for text-align: justify

    – gsnedders
    Mar 4 at 18:02




    1




    1





    @gsnedders yes it may differ with justify (not necessarely). Unfortunately I cannot proove it, I am trying to find if I can get a working example to show this difference.

    – Temani Afif
    Mar 4 at 18:31





    @gsnedders yes it may differ with justify (not necessarely). Unfortunately I cannot proove it, I am trying to find if I can get a working example to show this difference.

    – Temani Afif
    Mar 4 at 18:31













    3














    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




























      3














      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


























        3












        3








        3







        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













        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












        share|improve this answer



        share|improve this answer










        answered Mar 4 at 10:03









        Andreas FursterAndreas Furster

        9821524




        9821524






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            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















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Probability when a professor distributes a quiz and homework assignment to a class of n students.

            Aardman Animations

            Are they similar matrix