The most standard way to set font sizes in HTML / CSS

Question

I have been working in HTML / CSS for many years, but I would like to clarify something about font size adjustment. What is the best format for setting a font?

As a rule, I set the font size as a percentage, and then used em to change it up or down.

Is this the most standard way to do this? I saw fonts declared in pixels, dots, with relative keywords such as more or less. I saw that it is set as a percentage, etc.

So what is the most standard? Is the most standard best? any studies to support this?

Thanks,

Answer 1

They are all standard . Use what works for you.

Answer 2

What I learned at school is the following:

Set the font size in the body with a percentage of up to 62.5%:

body { font-size: 62.5%; } 

Then you can use em in the same sense as pixels, except that you divide by 10.

For example:

 h1 { font-size: 1.4em; /* 14px */ } 

We learned how to use em for "elastic" layouts. If you specify your font size in em, the text will retain its proportions after the user zooms in or out.

And again, I see that people use px or other font ads all the time; As far as I know, they are all standard. I think it just comes down to creating a better user experience.

Answer 3

You must set the font-size in the body tag to 100% . This way, people who visit your site will see the text in the correct size for what they installed in their browser. For example, people with low vision can increase the size of the text. If your font-size set to 100% , it should see it exactly as desired.

After that, you can set the dimensions to h1 , h2 , p , etc. using % or em .

Answer 4

I usually set html to 10px , then use font-size: 100% on body . Then you can use the px / em 14px / 1.4em for the elements. The only thing I encounter is when I set the basic elements, the font gets funky, and you must specify a font-size for all nested elements.

Example: if I have p, section, article, div{font-size: 1.6em;} , at any time when I have p, section, article, div , the font becomes proportional to the container. So, 1.6em , which was originally 16px , is now 1.6em 16px (not 10px ) or 25.6px . You will have to rescale the text to 0.625em (or 16px / 25.6px = 0.625em ). You will have more control over the consistency between browsers, but you may need a little more effort.

Some may ask, "Why all this trouble?" This is a good question. Here is the answer: Responsiveness. This, and I work for a company that must meet the requirements of 508. This includes final control over the initial font sizes. I can’t rely on the end user to have the font set to “medium” or 16pt , as the law clearly states that it should be X or Y for high contrast, etc.

Answer 5

Someone says that this is not good and may break your layout, look at it: http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/