font-size in separate line doesn't quite work for me as expected

[Mc Lauren Series]

/* CSS Sample 1 */
body {
font: Verdana, Arial;
font-size: small;
}

/* CSS Sample 2 */
body {
font: small Verdana, Arial;
}

Why both the CSS do not produce the same output?

The output with sample 1 is too small. The output with sample 2 is
easily readable. Why the difference?

 

[dorayme]

<[email protected]
m>,

/* CSS Sample 1 */
body {
font: Verdana, Arial;
font-size: small;
}

/* CSS Sample 2 */
body {
font: small Verdana, Arial;
}

Why both the CSS do not produce the same output?

The output with sample 1 is too small. The output with sample 2 is
easily readable. Why the difference?

In Sample 1, you are not specifying *both* font-size and
font-family in the shorthand version. If you try:

body {
font: 1000px Verdana, Arial;
font-size: small;
}

for Sample 1 (does not matter what you put in font for size, it
gets overridden. But *some* font-size needs to be there before
the family.

 

[Jonathan N. Little]

<[email protected]
m>,


In Sample 1, you are not specifying *both* font-size and
font-family in the shorthand version. If you try:

body {
font: 1000px Verdana, Arial;
font-size: small;
}

In other words for the "font" shorthand you need at a minimum to specify
font size *and* font family. So because you didn't the rule was ignored
and if you look at you text closely you will see it is not the oversize
Verdana but whatever you default i, typically a serif Roman or Times font

 

[Jukka K. Korpela]

In other words for the "font" shorthand you need at a minimum to
specify font size *and* font family. So because you didn't the rule
was ignored and if you look at you text closely you will see it is
not the oversize Verdana but whatever you default i, typically a
serif Roman or Times font

Aren't we obliged to add that when an author declares Verdana, he either
needs to default font size making the text appear too big to many people's
taste or to set it to some (lower) value, thereby creating trouble when
Verdana is not used. On systems that lack Verdana, either because it was
never installed or because it was taken away, this would result in the
user's default font to be used in a size smaller than the default.

This is one of the key reasons why Verdana should not be used on web pages,
except in special occasions like headings and subscripts.

 

[Andy Dingley]

Aren't we obliged to add that when an author declares Verdana,

Verdana: not so much a font, more metadata for annotating
cluelessness.

 

[David Postill]

<3184227f-03d2-4bc5-bb5b-8dee2bc6f3ba@k36g2000prb.googlegroups.com>, on
Thu, 11 Feb 2010 14:38:25 -0800 (PST), Mc Lauren Series wrote:

| /* CSS Sample 1 */
| body {
| font: Verdana, Arial;
| font-size: small;
| }
|
| /* CSS Sample 2 */
| body {
| font: small Verdana, Arial;
| }
|
| Why both the CSS do not produce the same output?
|
| The output with sample 1 is too small. The output with sample 2 is
| easily readable. Why the difference?

The first sample is invalid css.

The properties that can be set, are (in order): "font-style font-variant
font-weight font-size/line-height font-family"

The font-size and font-family values are required. If one of the other
values are missing, the default values will be inserted, if any.

 

[Lars Eighner]

In our last episode,

/* CSS Sample 1 */
body {
font: Verdana, Arial;

You meant font-family. You also did not include a generic family.

font-size: small;
}

/* CSS Sample 2 */
body {
font: small Verdana, Arial;
}

Why both the CSS do not produce the same output?

Because you have confused font with font-family. You also have not
included a generic family. If Verdana or Arial is not installed, the
font family will fall through to the browser default.

 

[Jonathan N. Little]

Aren't we obliged to add that when an author declares Verdana, he either
needs to default font size making the text appear too big to many
people's taste or to set it to some (lower) value, thereby creating
trouble when Verdana is not used. On systems that lack Verdana, either
because it was never installed or because it was taken away, this would
result in the user's default font to be used in a size smaller than the
default.

This is one of the key reasons why Verdana should not be used on web
pages, except in special occasions like headings and subscripts.

I totally agree with you with respect to Verdana, and despise the the rule

body { font-size: small; }

But at times explaining to the misinformed of such gets very tiresome
and I feel like a broken record. So this time I decided to narrow my
answer to the OP's question of why the rules had different results.
Hopefully after conveying this tidbit we can follow with sermons on the
ills of Verdana and body { font-size: small; }

 

[Mc Lauren Series]

Aren't we obliged to add that when an author declares Verdana, he either
needs to default font size making the text appear too big to many people's
taste or to set it to some (lower) value, thereby creating trouble when
Verdana is not used. On systems that lack Verdana, either because it was
never installed or because it was taken away, this would result in the
user's default font to be used in a size smaller than the default.

This is one of the key reasons why Verdana should not be used on web pages,
except in special occasions like headings and subscripts.

Could you please suggest me some fonts that look good in the normal
font size? Also, what fallback fonts would be good?

 

[Doug Miller]

Could you please suggest me some fonts that look good in the normal
font size?

"Look good" is a very subjective thing, depending not only on the designer's
preferences but also on those of the viewer(s).

Also, what fallback fonts would be good?

For sans-serif fonts, Arial is a good fallback; for serif fonts, Times New
Roman is a good choice -- both of those are widely available, and very likely
to be installed on almost any web client that visits your page.

Of course, the final fallback should always be "sans-serif" or "serif", so
that you maintain at least some control over the manner in which your page
displays. Without that, if none of the fonts you have specified exist on the
client machine, the fallback is the browser's default font, whatever that
happens to be.

 

[dorayme]

Of course, the final fallback should always be "sans-serif" or "serif", so
that you maintain at least some control over the manner in which your page
displays.

Is it so obvious that an author should hang on to some control?

 

[BootNic]

Is it so obvious that an author should hang on to some control?

It's only an illusion control is … at least some browsers allow the
user to set what font to use for sans-serif, serif, cursive, fantacy
and perhaps even monospace.

--
BootNic Fri Feb 12, 2010 06:25 pm
Sometimes I think the surest sign that intelligent life exists
elsewhere in the universe is that none of it has tried to contact
us.
*Bill Watterson*

â• 150 days remaining

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.12 (GNU/Linux)

iEYEARECAAYFAkt145EACgkQmo2774GZ7qlfcQCdFNLA7FkZzds3ID3OzTxZT/xe
8sgAniARMfy2x3Yt3Z+cYkpLHEbOTyZt
=clp6
-----END PGP SIGNATURE-----