Selecting font size based on available font

Discussion in 'HTML' started by dave richards, Feb 19, 2004.

  1. Hi,

    I'm currently trying to learn css/html and am having difficulties with font
    sizes. The site loads a background with an image of a circle. All of the
    content needs to fit inside this circle and I have used a div to contain the
    content.

    in my css I listed a number of fonts (the site needs a font that looks like
    handwriting).

    body {
    font-family: "Monotype Corsiva","Comic Sans MS", "Cursive";
    font-size:16px;
    color: #505050;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    }

    The problem I have is that although 16px font size looks fine for "Monotype
    Corsiva", if this font is not available and another is selected the text
    either looks very compact or spills off the end of the div. I have tried
    px/pt/em for the font size. Is there anyway to either specifically set the
    font height to a set number of pixels or use a different font size depending
    on which font is selected.

    Thanks for your help
    Dave
     
    dave richards, Feb 19, 2004
    #1
    1. Advertising

  2. dave richards

    kchayka Guest

    dave richards wrote:
    >
    > I'm currently trying to learn css/html and am having difficulties with font
    > sizes. The site loads a background with an image of a circle. All of the
    > content needs to fit inside this circle


    It _needs_ to fit? I have seen many attempts to fit textual content
    within the confines of a fixed size background image, but don't recall
    any that were really successful. You cannot reliably acheive this using
    just HTML and CSS because you have no control over the visitor's fonts
    or text size.

    That's the nature of web media, and it is A Good Thing(TM). Start
    accepting it now and you will save yourself oodles of frustration later.
    It will also make you a better web designer.

    > in my css I listed a number of fonts (the site needs a font that looks like
    > handwriting).
    >
    > body {
    > font-family: "Monotype Corsiva","Comic Sans MS", "Cursive";


    It _needs_ to look like handwriting? Cursive fonts are generally hard
    to read on screen. They can be OK for headings (if they are a
    sufficiently large font size), but not for body text.

    > font-size:16px;


    Per accessibility guidelines, do not use px for font sizes, but
    something relative to the user's preferred default text size. I highly
    recommend % units.

    BTW, my default text size is larger than 16px, so you just made a font
    that was already hard to read on screen even more difficult, perhaps
    even unreadable. I would likely have to zoom text to read it at all,
    which would probably mess up your layout. That's the nature of the web.

    Ask yourself who is the site for, you or your visitors? Based on your
    answer, you may want to reconsider what you really _need_.

    --
    Reply address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Feb 19, 2004
    #2
    1. Advertising

  3. dave richards

    Paul Furman Guest

    dave richards wrote:

    > Hi,
    >
    > I'm currently trying to learn css/html and am having difficulties with font
    > sizes. The site loads a background with an image of a circle. All of the
    > content needs to fit inside this circle and I have used a div to contain the
    > content.



    Is it possible to set the image and div size in ems to they match the
    text? Probably not perfectly predictable but with some slack it might
    work in most cases. I don't know how weird the picture would look
    stretched... better than things spilling over.
     
    Paul Furman, Feb 19, 2004
    #3
    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. Andreas Klemt
    Replies:
    6
    Views:
    11,389
    Peter Theill
    Nov 28, 2004
  2. Michael Glavitsch
    Replies:
    1
    Views:
    795
    Roedy Green
    Jul 15, 2003
  3. Wongod
    Replies:
    2
    Views:
    746
  4. wial
    Replies:
    2
    Views:
    863
  5. mttc
    Replies:
    2
    Views:
    2,459
    Roedy Green
    Jul 3, 2009
Loading...

Share This Page