Font Spacing in Code

[Obala]

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?

 

[Steve Pugh]

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

 

[Beauregard T. Shagnasty]

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

 

[Jukka K. Korpela]

Scripsit Steve Pugh:

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

 

[Ben C]

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?

 

[Jukka K. Korpela]

Scripsit Ben C:

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

 

[Ben C]

Scripsit Ben C:


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.


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.


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.

 

[Bergamot]

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.

 

[Beauregard T. Shagnasty]

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.