Results 1 to 10 of 10

Thread: Fonts in points

  1. #1
    Uranium Lounger CWBillow's Avatar
    Join Date
    Jul 2002
    Location
    Las Vegas, NV USA
    Posts
    6,371
    Thanks
    78
    Thanked 12 Times in 11 Posts

    Fonts in points

    I cannot seem to get my font sizes right where I want them. I have the font statement

    <font face="Comic Sans MS" size="4" color="#000000">

    How would that look if I wanted to state the font size in points?

    Chuck
    -------------------------------------------------
    "Good judgment comes from experience, and experience - well, that comes from poor judgment."

    ~ A(lan) A(lexander) Milne (1882-1956)- "House at Pooh Corner"

  2. #2
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts
    The <font> tag has been deprecated. In other words, it is considered historical baggage from a bygone era that we're not supposed to use any more.

    The numeric sizes in the <font> tag correspond to levels such as smaller, small, medium, large, larger, and do not have any guaranteed fixed value.

    For better results, you can use CSS to create short-hand class names, for example, in your <head>:

    Code:
    <style type="text/css">
    .comic14black{
      font-family: "Comic Sans MS", sans-serif;
      font-size: 14px;
      color: #000;
    }
    </style>
    And you can use them in the <body> in a wide variety of ways:

    Code:
    <p class="comic14black">This whole paragraph is styled.</p>
    
    <p>Only <span class="comic14black">this phrase</span> is styled.</p>
    Note that I used px for pixels instead of pt for points, since converting point sizes to pixels may cause rounding issues.

  3. #3
    Uranium Lounger CWBillow's Avatar
    Join Date
    Jul 2002
    Location
    Las Vegas, NV USA
    Posts
    6,371
    Thanks
    78
    Thanked 12 Times in 11 Posts
    Fabulous! Thanks Jefferson.

    Chuck


    Quote Originally Posted by jscher2000 View Post
    The <font> tag has been deprecated. In other words, it is considered historical baggage from a bygone era that we're not supposed to use any more.

    The numeric sizes in the <font> tag correspond to levels such as smaller, small, medium, large, larger, and do not have any guaranteed fixed value.

    For better results, you can use CSS to create short-hand class names, for example, in your <head>:

    Code:
    <style type="text/css">
    .comic14black{
      font-family: "Comic Sans MS", sans-serif;
      font-size: 14px;
      color: #000;
    }
    </style>
    And you can use them in the <body> in a wide variety of ways:

    Code:
    <p class="comic14black">This whole paragraph is styled.</p>
    
    <p>Only <span class="comic14black">this phrase</span> is styled.</p>
    Note that I used px for pixels instead of pt for points, since converting point sizes to pixels may cause rounding issues.
    -------------------------------------------------
    "Good judgment comes from experience, and experience - well, that comes from poor judgment."

    ~ A(lan) A(lexander) Milne (1882-1956)- "House at Pooh Corner"

  4. #4
    Uranium Lounger CWBillow's Avatar
    Join Date
    Jul 2002
    Location
    Las Vegas, NV USA
    Posts
    6,371
    Thanks
    78
    Thanked 12 Times in 11 Posts
    Jefferson;

    OK, the attached shows your code. Now, what if all I want to change, in the body, halfway through, is the size of the font?

    I can't seem to just specify the one trait.

    Chuck
    Attached Files Attached Files
    -------------------------------------------------
    "Good judgment comes from experience, and experience - well, that comes from poor judgment."

    ~ A(lan) A(lexander) Milne (1882-1956)- "House at Pooh Corner"

  5. #5
    Super Moderator RetiredGeek's Avatar
    Join Date
    Mar 2004
    Location
    Manning, South Carolina
    Posts
    9,436
    Thanks
    372
    Thanked 1,457 Times in 1,326 Posts
    Chuck,

    I think what you want is:
    Code:
    <body class="comic14black;">
    <!-- From here on everything is as above unless you change it
           as in the DIV below-->
    <br>
    <div style="font-size: 24px;">This whole Division is 24px.
       <p>
       </p>
        <p>And this as well
        </p>
    </div>
    </body>
    BTW: CSS defines 7 relative font sizes xx-small, x-small, small, medium, large, x-large, and xx-large. If you use these then in modern browsers when the user zooms using Ctrl + Mouse Wheel all the fonts will retain their size relative to all the others. As a mature (hopefully) citizen I really appreciate sites that do this as opposed to those who don't since I can make the text the size my eyes can handle.
    Last edited by RetiredGeek; 2011-07-30 at 20:58.
    May the Forces of good computing be with you!

    RG

    PowerShell & VBA Rule!

    My Systems: Desktop Specs
    Laptop Specs

  6. #6
    Uranium Lounger CWBillow's Avatar
    Join Date
    Jul 2002
    Location
    Las Vegas, NV USA
    Posts
    6,371
    Thanks
    78
    Thanked 12 Times in 11 Posts
    Thanks RG!

    Chuck
    -------------------------------------------------
    "Good judgment comes from experience, and experience - well, that comes from poor judgment."

    ~ A(lan) A(lexander) Milne (1882-1956)- "House at Pooh Corner"

  7. #7
    New Lounger
    Join Date
    Jan 2010
    Location
    SoCal
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good advice given. One additional point (if it matters)...
    Pixels (px) are an absolute size, and will override the browser's ability to resize the text. If you want the same effect but also resizeable, use EMs. The numbers will be much smaller though (e.g., if I recall correctly, 14px is approximately 1.2em). Happy coding!

  8. #8
    Uranium Lounger CWBillow's Avatar
    Join Date
    Jul 2002
    Location
    Las Vegas, NV USA
    Posts
    6,371
    Thanks
    78
    Thanked 12 Times in 11 Posts
    Jethro, that sounds like a good idea.

    Thanks,
    Chuck
    -------------------------------------------------
    "Good judgment comes from experience, and experience - well, that comes from poor judgment."

    ~ A(lan) A(lexander) Milne (1882-1956)- "House at Pooh Corner"

  9. #9
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts
    I think 1em = 16px.

    In recent browsers, the text+graphics zoom feature can expand pixel measurements as well.

  10. #10
    Uranium Lounger CWBillow's Avatar
    Join Date
    Jul 2002
    Location
    Las Vegas, NV USA
    Posts
    6,371
    Thanks
    78
    Thanked 12 Times in 11 Posts
    Thanks Jefferson.

    Chuck
    -------------------------------------------------
    "Good judgment comes from experience, and experience - well, that comes from poor judgment."

    ~ A(lan) A(lexander) Milne (1882-1956)- "House at Pooh Corner"

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •