Setting default font size

HTML & CSS
1 
<!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

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

User Sovereignty…

4

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

In order to apply your advice, should I designate the code “font-size:100%” to body or I don’t need to designate it?

What is different between { font-size: 1.5em; } AND { font-size: 1.5rem; } in output?

6

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

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 :

 <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

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.