By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,960 Members | 1,009 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,960 IT Pros & Developers. It's quick & easy.

Behind-the-scenes font size changes

P: n/a
Here is an example HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test!</title>
</head>
<body>
<p>fluffier <tt>firefly</ttfisticuffs</p>
</body>
</html>

The text looks a bit strange, as the middle word is not only rendered
in a fixed-pitch font, but the type size is also changed. Using the
DOM inspector in Firefox I could confirm that the <ptext is rendered
in 16 px, but the <tttext is reduced to 13 px. (The size difference
seems to be the same in Safari as well.) Admittedly many fixed-pitch
fonts look better if they are slightly reduced in size in relation to
proportional fonts, but this is just too much. In fact, if I use
<styleclauses to force the font size of both <pand <ttto the same
size, they look perfectly OK together. Even if not, I think the
browser should not take it upon itself to decide size changes. Is
there any way I can tell the browser not to mess about with the sizes,
short of adding a font-size: 100% to every tag I can imagine?

Oct 11 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a

Kai-Mikael Jää-Aro wrote:
Using the DOM inspector in Firefox I could confirm that the <ptext is rendered
in 16 px, but the <tttext is reduced to 13 px.
This is commonplace and deliberate. Monospaced fonts are typically
wider than proportional fonts, so the default stylesheet attempts to
compromise between matching their heights and their widths -- it can't
do both together.

IMHO, as a general rule it's better to match width like this when using
monospaced fonts in large blocks of text, but small inline sections
look better if you match heights. It's a trivial piece of CSS to do so.

This is also a presentation / CSS issue and definitely not HTML's
responsibility, so it could be seen as OT and better placed in
c.i.w.a.s Not worth moving the thread once it has started though,
IMHO.

Oct 11 '06 #2

P: n/a
On 11 Oct 2006, Kai-Mikael Jää-Aro wrote:
Is there any way I can tell the browser not to mess about with the sizes,
short of adding a font-size: 100% to every tag I can imagine?
You only need
code, tt { font-size: 100% }

Oct 11 '06 #3

P: n/a
Scripsit Kai-Mikael Jää-Aro:
Here is an example HTML file:
I don't think it's a real web page of yours.
<p>fluffier <tt>firefly</ttfisticuffs</p>
And why would you do that?
The text looks a bit strange, as the middle word is not only rendered
in a fixed-pitch font, but the type size is also changed.
Andy gave a good theoretical answer (and I mean "theoretical" in a positive
sense), which might be what you are after. If you have a practical problem,
I'm afraid you need to reveal it to us before we can solve it.

There _are_ real problems with monospace font size reduction when
representing program code, for example, but they are really a CSS matter.
The HTML side of the matter is that you should use <tt_only_ when you want
to say "I'm not saying anything about the meaning of this element except
that I'd like it to appear in a monospace font, though indirectly I'm saying
that it it's _not_ computer code or sample output".
In fact, if I use
<styleclauses to force the font size of both <pand <ttto the
same size, they look perfectly OK together.
If you could really force them to the same size, you would guarantee that
they are not OK to the _majority_ of users. One size does not fit all;
whatever fixed size to pick up, the odds are that _most_ people would really
rather read something smaller or something larger. But this is commonplace
CSS knowledge wherever CSS experts hang around.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Oct 11 '06 #4

P: n/a


On Oct 12, 12:47 am, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
Scripsit Kai-Mikael Jää-Aro:
Here is an example HTML file:
I don't think it's a real web page of yours.
Of course it isn't, what gave you that idea? As I wrote, it is an
example, concisely demonstrating the problem.
<p>fluffier <tt>firefly</ttfisticuffs</p>
And why would you do that?
Do what? Use mono-spaced text in the middle of a paragraph? I do that
all the time for filenames, code snippets and such. Is there any
reason I shouldn't?
The text looks a bit strange, as the middle word is not only rendered
in a fixed-pitch font, but the type size is also changed.
Andy gave a good theoretical answer (and I mean "theoretical" in a positive
sense), which might be what you are after. If you have a practical problem,
I'm afraid you need to reveal it to us before we can solve it.
I *thought* I explained my problem quite clearly: browsers introduce
(to me) unexpected size changes in displayed text depending on the tags
used. That causes the practical problem that the text looks bad and I
wanted to know if there was any global method of disabling the
size-changes. Andy's and Andreas' responses (for which I give thanks)
have been sufficient to inform me that this is intentional behaviour on
the part of the browser and that (as far as I have been able to infer)
this is limited to mono-spaced text and it therefore is sufficient to
ensure that tt and code tags are set with a font-size of 100% (which
magically affects all mono-spaced text).
There _are_ real problems with monospace font size reduction when
representing program code, for example, but they are really a CSS matter.
The HTML side of the matter is that you should use <tt_only_ when you want
to say "I'm not saying anything about the meaning of this element except
that I'd like it to appear in a monospace font, though indirectly I'm saying
that it it's _not_ computer code or sample output".
Well, the tt tag was for the purpose of the simplified example, the
real code looks rather messier as it is software-generated and uses
span and style sheets, but I checked that it would give the same
effect.
In fact, if I use
<styleclauses to force the font size of both <pand <ttto the
same size, they look perfectly OK together.
If you could really force them to the same size, you would guarantee that
they are not OK to the _majority_ of users. One size does not fit all;
whatever fixed size to pick up, the odds are that _most_ people would really
rather read something smaller or something larger.
My point was not that I wanted to enforce an *absolute* font size,
quite the opposite, but that I checked that the font-size changing done
by the browser in fact was quite unnecessary as the text looked better
when both pieces were set at the same font size, *regardless of what
that size was*.
But this is commonplace
CSS knowledge wherever CSS experts hang around.
I asked for help precisely because I am not a CSS expert. I thought I
made a reasonably good explanation of my problem and since I received
advice that solved my problem my explanation seems to have been good
enough.

Oct 12 '06 #5

P: n/a
Scripsit Kai-Mikael Jää-Aro:
>>Here is an example HTML file:
I don't think it's a real web page of yours.

Of course it isn't, what gave you that idea?
"Fluffier firefly fisticuffs", to begin with.
As I wrote, it is an
example, concisely demonstrating the problem.
So it's not a real web page of yours.
>> <p>fluffier <tt>firefly</ttfisticuffs</p>
And why would you do that?

Do what? Use mono-spaced text in the middle of a paragraph? I do
that all the time for filenames, code snippets and such. Is there any
reason I shouldn't?
For code snippets, <codeis the appropriate markup, not <tt>. For
filenames, it's debatable, but you could regard them as computer code of a
kind. Using <ttfor no apparent reason was the strange part.
I *thought* I explained my problem quite clearly: browsers introduce
(to me) unexpected size changes in displayed text depending on the
tags used.
So what did you fail to understand in the answer?
it therefore is
sufficient to ensure that tt and code tags are set with a font-size
of 100% (which magically affects all mono-spaced text).
That's rather questionable, since browsers do the size reduction for a
reason. Until you understand the reason, it's better to avoid playing with
the font size.

Besides, setting font size for tt and code "tags" surely does not affect all
monospace text. Think about <preelements, for example.
My point was not that I wanted to enforce an *absolute* font size,
quite the opposite, but that I checked that the font-size changing
done by the browser in fact was quite unnecessary as the text looked
better when both pieces were set at the same font size, *regardless
of what that size was*.
I'm afraid you still haven't grasped the issue. Surely you can set the font
size of <tt>, <code>, etc. elements to 100%, but if you think that it
guarantees that everything looks OK, you're mistaken. The browser may fonts
that differ from what you expect. Then the relationship between normal text
font and monospace text is different, and in general, the monospace text
will look too big. It's not catastrophic, but neither is the situation that
you originally saw as a problem.
>But this is commonplace
CSS knowledge wherever CSS experts hang around.

I asked for help precisely because I am not a CSS expert.
If you realized that this was basically an CSS issue, why did you ask in an
HTML group?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Oct 14 '06 #6

P: n/a
"Jukka K. Korpela" <jk******@cs.tut.fiwrites:
Scripsit Kai-Mikael Jää-Aro:
>it therefore is
sufficient to ensure that tt and code tags are set with a font-size
of 100% (which magically affects all mono-spaced text).

That's rather questionable, since browsers do the size reduction for a
reason. Until you understand the reason, it's better to avoid playing
with the font size.
I'd like to be enlightened. The whole IT business throws typography
back at least more than 1000 years BC for sure, but I generally still
don't understand the reasoning behind that.
>I asked for help precisely because I am not a CSS expert.

If you realized that this was basically an CSS issue, why did you ask
in an HTML group?
If you realised that Kai-Mikael posted in the wrong group, why didn't
you set a proper follow-up?
--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011
Oct 16 '06 #7

P: n/a


On Oct 15, 12:59 am, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
Scripsit Kai-Mikael Jää-Aro:
>Here is an example HTML file:
I don't think it's a real web page of yours.
Of course it isn't, what gave you that idea?
"Fluffier firefly fisticuffs", to begin with.
As I wrote, it is an
example, concisely demonstrating the problem.
So it's not a real web page of yours.
I never made the claim it was, indeed I clearly stated the opposite, so
what's the problem?
I *thought* I explained my problem quite clearly: browsers introduce
(to me) unexpected size changes in displayed text depending on the
tags used.
So what did you fail to understand in the answer?
Why you are picking on these rather irrelevant details.
it therefore is
sufficient to ensure that tt and code tags are set with a font-size
of 100% (which magically affects all mono-spaced text).
That's rather questionable, since browsers do the size reduction for a
reason. Until you understand the reason, it's better to avoid playing with
the font size.
I think my understanding of the situation was corroborated, but for my
particular purposes I have chosen another solution than what you would
prefer. It is probably not perfect, but it satisfies the constraints
*I* am working under.
Besides, setting font size for tt and code "tags" surely does not affect all
monospace text. Think about <preelements, for example.
Yes, I was quite surprised that setting a style for tt would change the
behaviour of span with monospaced text. It may or may not be an
intended side-effect, it may or may not only work for Mozilla-based
browsers, but it solves my immediate problem.
My point was not that I wanted to enforce an *absolute* font size,
quite the opposite, but that I checked that the font-size changing
done by the browser in fact was quite unnecessary as the text looked
better when both pieces were set at the same font size, *regardless
of what that size was*.
I'm afraid you still haven't grasped the issue. Surely you can set the font
size of <tt>, <code>, etc. elements to 100%, but if you think that it
guarantees that everything looks OK, you're mistaken. The browser may fonts
that differ from what you expect. Then the relationship between normal text
font and monospace text is different, and in general, the monospace text
will look too big. It's not catastrophic, but neither is the situation that
you originally saw as a problem.
Well, I'd be happy to leave it be, but unfortunately you are not the
customer in this case and thus not the arbiter of what is an acceptable
result.
But this is commonplace
CSS knowledge wherever CSS experts hang around.
I asked for help precisely because I am not a CSS expert.
If you realized that this was basically an CSS issue, why did you ask in an
HTML group?
"not a CSS expert" ="did not realise this was basically a CSS issue",
but in order to spare your sensitivity I will not post further on this
issue.

Oct 16 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.