Where to set font-family: body or html element?

Question

Where is it best to declare the font-family CSS property? On the html or body element?

html {
    font-family: sans-serif;
}

or

body {
    font-family: sans-serif;
}

I searched online, but I cant find a definitive answer.

Answer 1

I know most people set the font family on the body element. But since there is no right or wrong (all elements are children of the html and body element), pick one and stick to it. This goes for all of the programming choices you make. This makes debugging your work a lot easier.

Answer 2

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. (If a particular element doesn't inherit it, you can always override its font-family property with a value of inherit.)

But what is best practice, and why? That's a bit harder to answer, but I'll have a go. Let's start with semantics…

The html element represents the whole document (including non-visible metadata), while the body element represents the content of the document. Since font-family is a property of styled content, it would seem logical to apply it to body. That's one point for body.

Next question: Where do the browsers define text formatting properties like font-family? I looked at the user agent stylesheets for Safari (WebKit), Mozilla Firefox and Chrome, and also used the Web Inspector on a page with no overriding CSS, but I couldn't find a global font-family declaration anywhere. But here's something interesting… In Safari, the global text color property is defined on the html element. So, if that's anything to go by, it suggests WebKit browsers do define global font properties on the html element.

There are CSS resets that also tackle it here, like Bootstrap's _reboot.scss file:

// 2. Change the default font family in all browsers.
html {
   font-family: sans-serif; // 2
   …
}

Still, we can override this on the body element, and that is just what Bootstrap does a few lines later:

body {
   margin: 0; // 1
   font-family: $font-family-base;
   …
}

Half a point to html?

The CSS specs (as far as I know) don't dictate where font-family is declared (it applies to 'all elements'), but it does give us some hints. The first code example in the W3C document CSS Fonts Module Level 3 is this:

body {
   font-family: Helvetica;
   font-weight: bold;
}

Another one is here:

body {
   font-family: "Gill Sans", sans-serif;
   font-size: 12pt;
   margin: 3em;
}

It explains:

The first declaration on the BODY element sets the font family to "Gill Sans". If that font is not available, the user agent (often referred to as a "browser") will use the sans-serif font family which is one of five generic font families which all users agents know. Child elements of BODY will inherit the value of the font-family property.

Another point to body.

Final scores:

body: 2
html: 0.5

Winner: body! :-D

Answer 3

As others have said, it would probably make sense to specify the font-family on the body. However, since there isn't exactly very many downsides to applying it to the html element, I thought it would be worth mentioning the :root pseudo-class selector, which selects the root of the page (the html element in most scenarios) and could be more convenient in this scenario.

Usually, the :root selector is used to set CSS custom properties (variables) and font-sizes, but I'd say it would be reasonable to apply a font-family on it.

:root {
  /* ...custom properties, font-size, etc... */
  font-family: sans-serif;
}

Answer 4

The * selector will give you better coverage. For example, form elements, like input, don't inherit font styles from html and body tags. But if you set it with * then you'll make sure your font styles pass down to all HTML elements.

* {
  font-family: 'Open Sans', Helvetica, sans-serif;
}

Here's a demo. Using * selector vs html and body.

Answer 5

If you are trying to change the font-family of the entire page I would have to agree with user7357089 and nashcheez that the "best" method would be to place it in the body tag. All of your visible HTML would be contained within the body tag anyway, adding it to the HTML would be unnecessary.

Answer 6

I assume that you will have one font family on website, the best way to do that is to use

* selector, this one select all elements so:

*{
   font-family:"your-font-family";
}

Answer 7

Best practice is to set the font-family in the body.

body {
   font-family: Arial !important;
}

The !important is useful here so that in case you are using any other framework, your font-family does not get overridden.

You can also use the * selector.

* {
    font-family: Arial !important;
}

The *-selector means any/all elements, but will obviously be on the bottom of the property chain when it comes to overriding more specific selectors.

Note that the !important flag will render the font-style for * to be absolute, even if other selectors have been used to set the text (for example, the body or maybe a p).

Answer 8

Depending on the project the best place would be a separately linked style page that contains all your css code. But from your question it sounds as if you want to write it into your HTML.

And if you want to do it in the same file as your HTML, than an internal style sheet is the 2nd best choice, and place "style" tags within your "head" tags and write your CSS within the "style tags.

<head>
  <style>
    <!–– Insert CSS Code Here -->
  </style>
</head>

Otherwise you just write it inline (at the point of the element you are trying to style).

Now what method is best depends on the project but it is generally thought that an external style sheet is the first option as it makes it easy for someone else to follow along with which elements are affected by what styling. If it's a small project with not much CSS than an "Internal Style Sheet is the next best option, again for readability and keeping your CSS in one place. Inline styling although possible is not really encouraged.

Answer 9

The best way to add styles to <body> tag. Because it contains hierarchy, so it follows that it must contain all global styles.

Refer: https://css-tricks.com/html-vs-body-in-css/