Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Should I set the default font-size on the body or html element?

I like to work in ems when creating websites. Therefore I set a default font-size of 100.01% on the body element.

My question is should I set the default font-size on the body or the html element? What are the pros and cons (if any) of both?

like image 306
joshnh Avatar asked Aug 01 '11 23:08

joshnh


People also ask

Where do you set font-size in HTML or body?

To change the font size in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-size.

Should I put font-family HTML or body?

The short answer is, you can use either. Since every displayed element is a descendant of the body element, and the body element itself is the child of the html element, all elements that inherit the font-family property will happily adopt it from either.

What is the default size of text in HTML element?

Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).

What is the default font-size using in font element?

The HTML <font> size Attribute is used to specify the size of text which is present inside <font> element. Attribute Values: It contains a single value number that specifies the size of the text. The font size lies between 1 to 7. The default value of font size is 3.


2 Answers

Now that the rem unit is starting to become popular, setting the base font-size on the root element (html tag) is advised (rem stands for root em).

like image 136
joshnh Avatar answered Sep 28 '22 16:09

joshnh


I don't believe there is any advantage or disadvantage to setting the base font-size on either html or body to allow for sizing with ems; they will both have the same effect.

Not related to the question:

I would however suggest using a different default font-size. I would set it as:

body {     font-size: 62.5%; } 

Doing this reduces the default font-size from 16px down to 10px. This then makes choosing font-size much easier as there is no need for difficult calculations. It means that 1em is equal to 10px and so calculating the px size is a matter of multiplying by 10:

  • 1.0em = 10px
  • 1.4em = 14px
  • 1.8em = 18px
  • 2.2em = 22px
like image 26
tw16 Avatar answered Sep 28 '22 16:09

tw16