Font Spacing in Code

Discussion in 'HTML' started by Obala, Feb 6, 2008.

  1. Obala

    Obala Guest

    How can I set character/font spacing using HTML code? By that I mean
    e.g. MS Word: Format > Font > Character Spacing > Spacing = Expanded
    by 0.75 pt?
     
    Obala, Feb 6, 2008
    #1
    1. Advertising

  2. Obala

    Steve Pugh Guest

    On Feb 6, 1:36 pm, Obala <> wrote:
    > How can I set character/font spacing using HTML code? By that I mean
    > e.g.  MS Word: Format > Font > Character Spacing > Spacing = Expanded
    > by 0.75 pt?


    Spacing is a presentation issue and hence is handled by CSS not by
    HTML. See http://www.w3.org/TR/CSS21/text.html#spacing-props for the
    letter-spacing and word-spacing properties.

    Steve
     
    Steve Pugh, Feb 6, 2008
    #2
    1. Advertising

  3. Obala wrote:

    > How can I set character/font spacing using HTML code? By that I mean
    > e.g. MS Word: Format > Font > Character Spacing > Spacing = Expanded
    > by 0.75 pt?


    MS Word is a terrible tool to use for creating web pages. It is for
    producing printable documents. You should use a tool designed for web
    page/site creation. Kompozer might be something you want to investigate.
    http://kompozer.net/

    Points (pt) are for printing, not web browsers. Use percentages instead,
    and set the default content font size to 100%.

    --
    -bts
    -Friends don't let friends drive Vista
     
    Beauregard T. Shagnasty, Feb 6, 2008
    #3
  4. Scripsit Steve Pugh:

    > On Feb 6, 1:36 pm, Obala <> wrote:
    >> How can I set character/font spacing using HTML code? By that I mean
    >> e.g. MS Word: Format > Font > Character Spacing > Spacing = Expanded
    >> by 0.75 pt?

    >
    > Spacing is a presentation issue and hence is handled by CSS not by
    > HTML.


    Indeed. But you may need extra HTML markup in order to be able to set
    the spacing in CSS.

    > See http://www.w3.org/TR/CSS21/text.html#spacing-props for the
    > letter-spacing and word-spacing properties.


    Specifically, letter-spacing is what corresponds to the MS Word setting
    described above. Note that despite its name, it affects all characters,
    not just letters. When set for text containing word spaces, it is
    usually a good idea to set word-spacing too.

    Generally, setting the _overall_ letter spacing is a bad idea - or, to
    put it somewhat extremistically, an insult to font designers. A font
    designer has carefully set the spacing, and then comes some wannabe
    author who thinks he knows better.

    Setting it _locally_, often very locally, might be a good idea, since
    some character combinations result in apparent gaps. But then you would
    need extra markup, typically <span>, writing e.g.
    <span style="letter-spacing:-0.05em">Wa</span>tt
    instead of just
    Watt
    And this is rather awkward - and risky, since you really don't know how
    it will look like in different browsing situations.

    Worse still, browsers disagree on the interpretation whether this should
    increase just the spacing between "W" and "a" or after the "a" as well.

    Thus, in very local adjustments like this, it's probably better to set a
    negative left margin for a single character, e.g.
    W<span style="margin-left:-0.05em">a</span>tt

    But this pays off in special situations only, e.g. in headings that
    would otherwise suffer from poor spacing for some character
    combinations. (In text processing, you can deal with such issues by
    turning on the kerning option. In CSS, you cannot, since CSS has no such
    option at present.)

    More info, including some examples:
    http://www.cs.tut.fi/~jkorpela/www/letter-spacing.html

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Feb 6, 2008
    #4
  5. Obala

    Ben C Guest

    On 2008-02-06, Jukka K. Korpela <> wrote:
    > Scripsit Steve Pugh:

    [...]
    > Generally, setting the _overall_ letter spacing is a bad idea - or, to
    > put it somewhat extremistically, an insult to font designers. A font
    > designer has carefully set the spacing, and then comes some wannabe
    > author who thinks he knows better.


    The same arguably goes for line-height, where line-height: normal is the
    only way to get a line height based in any way on the wishes of the font
    designer (if you're lucky).

    [...]
    > Thus, in very local adjustments like this, it's probably better to set a
    > negative left margin for a single character, e.g.
    > W<span style="margin-left:-0.05em">a</span>tt


    Note however that the CSS 2.1 specification says there may be
    implementation-defined limits on negative margins on inline boxes.

    In other words some browsers might clamp them to zero. Not that that
    matters much.

    > But this pays off in special situations only, e.g. in headings that
    > would otherwise suffer from poor spacing for some character
    > combinations. (In text processing, you can deal with such issues by
    > turning on the kerning option. In CSS, you cannot, since CSS has no
    > such option at present.)


    Surely most browsers do have kerning "on" except for monospace fonts? Or
    am I missing something?
     
    Ben C, Feb 6, 2008
    #5
  6. Scripsit Ben C:

    >> Generally, setting the _overall_ letter spacing is a bad idea - or,
    >> to put it somewhat extremistically, an insult to font designers. A
    >> font designer has carefully set the spacing, and then comes some
    >> wannabe author who thinks he knows better.

    >
    > The same arguably goes for line-height, where line-height: normal is
    > the only way to get a line height based in any way on the wishes of
    > the font designer (if you're lucky).


    There are two reasons why that's not comparable:
    1. Line height is not an inherent property of the font. The font
    characteristics include the height of the font, i.e. the size of the
    font, but using it as the line height (line-height: 1) is almost always
    a bad idea - and not the browser default.
    2. Line height should, according to well-established typographic theory
    and practice, depend on the line length (column width) and also on the
    nature of the text, such as the presence of ascenders, descenders, and
    diacritic marks. So it makes a lot of sense that authors set it.

    > Note however that the CSS 2.1 specification says there may be
    > implementation-defined limits on negative margins on inline boxes.


    The statement I was able to find relates to all margins:
    "Negative values for margin properties are allowed, but there may be
    implementation-specific limits."
    http://www.w3.org/TR/CSS21/box.html#margin-properties

    I have never seen any problems that could be caused by such limits.

    > Surely most browsers do have kerning "on" except for monospace fonts?


    I have never seen anything resembling kerning on web pages except a few
    days ago in a screenshot from Firefox on some Linux platform (where the
    combination "Vo" appeared so that the "o" touches the "V", unlike in
    typical situations, sich as IE on Windows, where the letters are
    separated by disturbing spacing so that e.g. the word "Vorpommern" looks
    like "V" followed by space and "orpommern".

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Feb 6, 2008
    #6
  7. Obala

    Ben C Guest

    On 2008-02-06, Jukka K. Korpela <> wrote:
    > Scripsit Ben C:
    >
    >>> Generally, setting the _overall_ letter spacing is a bad idea - or,
    >>> to put it somewhat extremistically, an insult to font designers. A
    >>> font designer has carefully set the spacing, and then comes some
    >>> wannabe author who thinks he knows better.

    >>
    >> The same arguably goes for line-height, where line-height: normal is
    >> the only way to get a line height based in any way on the wishes of
    >> the font designer (if you're lucky).

    >
    > There are two reasons why that's not comparable:
    > 1. Line height is not an inherent property of the font. The font
    > characteristics include the height of the font, i.e. the size of the
    > font, but using it as the line height (line-height: 1) is almost always
    > a bad idea - and not the browser default.


    Many fonts also include a "line gap". Font-size + line gap is usually
    about 1.1 times font size, but it depends on the font, and is what I'm
    now fairly sure most browsers give you when you set line-height: normal.

    > 2. Line height should, according to well-established typographic theory
    > and practice, depend on the line length (column width) and also on the
    > nature of the text, such as the presence of ascenders, descenders, and
    > diacritic marks. So it makes a lot of sense that authors set it.


    Certainly.

    >> Note however that the CSS 2.1 specification says there may be
    >> implementation-defined limits on negative margins on inline boxes.

    >
    > The statement I was able to find relates to all margins:
    > "Negative values for margin properties are allowed, but there may be
    > implementation-specific limits."
    > http://www.w3.org/TR/CSS21/box.html#margin-properties


    You're right, the limits are on all margins, not just those on inline
    boxes.

    > I have never seen any problems that could be caused by such limits.
    >
    >> Surely most browsers do have kerning "on" except for monospace fonts?

    >
    > I have never seen anything resembling kerning on web pages except a few
    > days ago in a screenshot from Firefox on some Linux platform (where the
    > combination "Vo" appeared so that the "o" touches the "V", unlike in
    > typical situations, sich as IE on Windows, where the letters are
    > separated by disturbing spacing so that e.g. the word "Vorpommern" looks
    > like "V" followed by space and "orpommern".


    You appear to be right. I'm shocked. Not that you're right, but that
    browsers aren't doing kerning.

    I just tried a test in which I shuffled up a given set of letters,
    expecting to see a ragged edge on the right (I put a background-color on
    span)

    <span>Vilify</span><br>
    <span>liyVfi</span><br>
    <span>lyiifV</span><br>
    <span>ifyliV</span><br>
    <span>ifyVli</span><br>
    <span>Vlyfii</span><br>
    etc...

    but it was all square in Firefox, Opera and Konqueror on Linux.

    I also tried Vo, and the o was too far from the V.
     
    Ben C, Feb 6, 2008
    #7
  8. Obala

    Bergamot Guest

    Beauregard T. Shagnasty wrote:
    > Obala wrote:
    >
    >> How can I set character/font spacing using HTML code? By that I mean
    >> e.g. MS Word: Format > Font > Character Spacing > Spacing = Expanded
    >> by 0.75 pt?

    >
    > MS Word is a terrible tool to use for creating web pages.


    I didn't get the impression the OP was using Word to create a web page,
    just using the Word example to illustrate what he wanted to do.

    --
    Berg
     
    Bergamot, Feb 6, 2008
    #8
  9. Bergamot wrote:

    > Beauregard T. Shagnasty wrote:
    >> Obala wrote:
    >>
    >>> How can I set character/font spacing using HTML code? By that I mean
    >>> e.g. MS Word: Format > Font > Character Spacing > Spacing =
    >>> Expanded by 0.75 pt?

    >>
    >> MS Word is a terrible tool to use for creating web pages.

    >
    > I didn't get the impression the OP was using Word to create a web
    > page, just using the Word example to illustrate what he wanted to do.


    Oh, you may be right. <g> I didn't take it that way when I read it.

    --
    -bts
    -my car is powered by Microsoft Sync...
    -I have to reboot every seven miles
     
    Beauregard T. Shagnasty, Feb 6, 2008
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Karl Hungus

    Font class, external font files question

    Karl Hungus, Feb 4, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    571
    Karl Hungus
    Feb 4, 2004
  2. =?Utf-8?B?Tmlja3k=?=
    Replies:
    2
    Views:
    735
    Matt Berther
    Feb 20, 2005
  3. Michael Glavitsch
    Replies:
    1
    Views:
    799
    Roedy Green
    Jul 15, 2003
  4. Nick Spinel
    Replies:
    0
    Views:
    970
    Nick Spinel
    Jul 25, 2003
  5. mttc
    Replies:
    2
    Views:
    2,467
    Roedy Green
    Jul 3, 2009
Loading...

Share This Page