SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    setting default font size

    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>layOut001</title>
    
      <style type="text/css">
        *{margin:0px;padding:0px}
        .pdg5{padding:5px}
      </style>
      
    </head>
    <body class="pdg5">
    myText
    </body>
    </html>
    Since the default font size will by browser and user, I like to set the basic font size.

    I think that I can set it using px, point, or em.
    Which is the best for the basic font size or default font size of my site?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    One approach is to NOT set a default font size, let the user decide what the default font size is, instead. You can use ems to make the content larger where larger text is needed or smaller where smaller text is needed. Ems or percent will allow all text to scale proportionally as the user desires. Empower the user.

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Empower the user.
    User Sovereignty...

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by dotJoon View Post
    Which is the best for the basic font size or default font size of my site?
    My preference is to set font-size to 100% on the body element ... which these days is the same as doing nothing. Any other font sizes (for various elements) I do in ems or rems. That way, you are letting end users choose their own optimal font size. Just make sure your site works nicely at any font size.

  5. #5
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    My preference is to set font-size to 100% on the body element ...
    In order to apply your advice, should I designate the code "font-size:100%" to body or I don't need to designate it?



    Quote Originally Posted by ralph.m View Post
    Any other font sizes (for various elements) I do in ems or rems.
    What is different between { font-size: 1.5em; } AND { font-size: 1.5rem; } in output?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by dotJoon View Post
    In order to apply your advice, should I designate the code "font-size:100%" to body or I don't need to designate it?
    You don't need to bother these days, so far as I know.

    What is different between { font-size: 1.5em; } AND { font-size: 1.5rem; } in output?
    1.5em means 1.5 times the size of the set fot size for that element. E.g. Say the element was in a div that had a font size of 2em then this element would have a font size of 3em (1.5 x 2). Of course there may be no font sizes set other than on the body, in which case 1.5em is just that—1.5 times the body font size.

    1.5rem, on the other hand means 1.5 times the body font size, no matter what other (closer) font sizes may have been set.

    So it could be that 1.5em is the same size as 1.5rem, depending on the circumstances.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    1em = 100% font size OF THE PARENT ELEMENT. do note that when used for other attributes, say...width, 1em= width of 'M' character of the CURRENT ELEMENT. ( so yes, it's calculated differently depending on what attribute your are setting)

    rem is a handy unit, that is 100 fontsize/the width of 'M' character of the BODY TAG, regardless of which descendant it is being applied to. This way you can avoid cascading calculations!

    for example :
    Code:
     <body style="font-size:100%">
     am at 100% of DEFAULT  size
     <div style="font-size:.8em">
    am at 1*0.8=80% of DEFAULT  size
     <div style="font-size:.7em">
      am at 1*0.8*0.7=0.56 of DEFAULT  size
     <div style="font-size:.5em">
      am at 1*0.8*0.7*0.5=0.23 of DEFAULT  size!!!
    </div></div></div>
    </body>
    
     <body style="font-size:100%">
     am at 100% of DEFAULT  size
     <div style="font-size:.8rem">
    am 0.8  of DEFAULT  size
     <div style="font-size:.7rem">
      am  0.7 of DEFAULT  size
     <div style="font-size:.5em">
     am 0.5 of DEFAULT  size!!!
    </div></div></div>
    </body>



    REM is a recent CSS3 unit, so it's supported by most modern browsers. Still if you need to support OLD browsers, you will need some sort of fallback

    hope that clears things up!

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dotJoon View Post
    In order to apply your advice, should I designate the code "font-size:100%" to body or I don't need to designate it?
    There are old versions of Internet Explorer that almost no one uses any more that need that specified for the rest of the sizes to work correctly. If you don't use it and you have the last user of that antiquated version of IE visit your site then the page will not appear correctly. For the other billions of web users it will make no difference.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

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