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

Discussion in 'HTML' started by Mc Lauren Series, Feb 11, 2010.

  1. /* 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?
    Mc Lauren Series, Feb 11, 2010
    #1
    1. Advertising

  2. Mc Lauren Series

    dorayme Guest

    In article
    <
    m>,
    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?


    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.

    --
    dorayme
    dorayme, Feb 11, 2010
    #2
    1. Advertising

  3. dorayme wrote:
    > In article
    > <
    > m>,
    > 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?

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

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 11, 2010
    #3
  4. Jonathan N. Little wrote:

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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 12, 2010
    #4
  5. Mc Lauren Series

    Andy Dingley Guest

    On 12 Feb, 05:44, "Jukka K. Korpela" <> wrote:

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


    Verdana: not so much a font, more metadata for annotating
    cluelessness.
    Andy Dingley, Feb 12, 2010
    #5
  6. In article
    <>, 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.
    --
    David Postill
    Dance your Life - Biodanza in Holland - <http://www.danceyourlife.eu>
    David Postill, Feb 12, 2010
    #6
  7. Mc Lauren Series

    Lars Eighner Guest

    In our last episode,
    <>, the
    lovely and talented Mc Lauren Series broadcast on alt.html:

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

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


    --
    Lars Eighner <http://larseighner.com/> Warbama's Afghaninam day: 72
    1739.8 hours since Warbama declared Viet Nam II.
    Warbama: An LBJ for the Twenty-First century. No hope. No change.
    Lars Eighner, Feb 12, 2010
    #7
  8. Jukka K. Korpela wrote:
    > Jonathan N. Little wrote:
    >
    >> 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.
    >


    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; }

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 12, 2010
    #8
  9. On Feb 12, 10:44 am, "Jukka K. Korpela" <> wrote:
    > Jonathan N. Little wrote:
    > > 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.
    >
    > --
    > Yucca,http://www.cs.tut.fi/~jkorpela/


    Could you please suggest me some fonts that look good in the normal
    font size? Also, what fallback fonts would be good?
    Mc Lauren Series, Feb 12, 2010
    #9
  10. Mc Lauren Series

    Doug Miller Guest

    In article <>, Mc Lauren Series <> wrote:
    >
    >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.
    Doug Miller, Feb 12, 2010
    #10
  11. Mc Lauren Series

    dorayme Guest

    In article <hl4ggq$9iq$-september.org>,
    (Doug Miller) wrote:

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

    --
    dorayme
    dorayme, Feb 12, 2010
    #11
  12. Mc Lauren Series

    BootNic Guest

    Re: font-size in separate line doesn't quite work for me asexpected

    On Sat, 13 Feb 2010 08:48:46 +1100
    dorayme <> wrote:

    > In article <hl4ggq$9iq$-september.org>,
    > (Doug Miller) wrote:
    >
    >> 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?
    >


    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-----
    BootNic, Feb 12, 2010
    #12
    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. dave richards
    Replies:
    2
    Views:
    600
    Paul Furman
    Feb 19, 2004
  2. Ken
    Replies:
    35
    Views:
    2,231
  3. wial
    Replies:
    2
    Views:
    804
  4. mttc
    Replies:
    2
    Views:
    2,371
    Roedy Green
    Jul 3, 2009
  5. Richard \(MrBonus\)

    onBeforeUnload doesn't work quite the way I want it too

    Richard \(MrBonus\), Sep 2, 2004, in forum: Javascript
    Replies:
    1
    Views:
    112
    Robert
    Sep 7, 2004
Loading...

Share This Page