CSS CSS Basics Understanding Values and Units Percentages

Parent element

When font-size is in percentage, what is the parent element that it is related to?

1 Answer

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,081 Points

I think in this example (and in probably most cases) the parent is the <body> element, which has a default font-size 16px. So, a font-size of 200% would be 32px... etc.

But if you have a <p> inside a <h1> (for example) where you've declared the font-size of the <h1> as 32px and then declared the <p> as being a font-size of 150%... the font-size would be 48px. So, it kind of depends of whether or not the child has a parent with a defined font-size.

It's all relative, but remember that the default font-size of the browser is 16px.

razmig pulurian
razmig pulurian
Courses Plus Student 23,888 Points

Jason,

Is there a resource you could point us to which lists the default font sizes for the various elements (e.g. what's the default font size for h1, h2, h3, h4, p, etc...). I tried to look this up using some of the resources that Guil provided, but I wasn't able to find anything useful... likely I'm looking in the wrong places.

Also, any idea if these default values apply to all browsers, or does each browser have it's own standard?

Jason Anders
Jason Anders
Treehouse Moderator 145,081 Points

Hi razmig pulurian

I'm not sure about heading tags and if the browsers are consistent in size, but the default body text size in browsers is 16px. In my opinion, it is always better if you style the heading tags yourself for 2 main reasons: 1-- You can be sure of consistency across browsers, and 2-- the right size might not be the same for all designs and layouts.

I did find a couple links for you...

Font Sizing - via W3Schools

Thread from StackOverflow

I hope these help. Keep Coding! :)

razmig pulurian
razmig pulurian
Courses Plus Student 23,888 Points

Hi Jason,

Thanks for the answer and the links. They definitely help!

A bit of background on why I asked this question in the first place...

I recently read a web article which describes the subtle the difference between setting absolute values (e.g. 16px) for fonts, versus using relative values (e.g., using 100%). You can find the article here: http://terrillthompson.com/blog/589

To summarize: Some users have difficulty reading text. Many browsers (e.g., firefox?) allow the user to override the default browser font size to make websites easier to read. If designers use relative values, the browser will resize the text according to the font size the user chooses in their browser settings. If designers use absolute values, the browser will not resize text. So, even though 100% and 16px body text has the same display output (100% = 16px), the browser handles resizing of the text differently.

The reason I asked about default browser font sizes for various browsers: If all browsers had the same, or similar, default text values for things like headers, the choice of absolute versus relative values is made easily (for me, at least). I would always use relative values.

However, after reading the stack overflow link you provided, it looks like this is not the case at all. Browsers have vastly different default sizes for their headings. I guess in this case, I would go with your suggestion.

  • Use absolute values for larger text elements (H1, H2, etc). You can control the appearance more and ensure it displays consistently across browsers. Users will probably have less need to override headings as they are large to begin with.

  • Use relative values for body and paragraph texts. This allows the user to resize the text if they need to. Since most browsers use 16px default for body anyway, it will likely display consistently across browsers.

Would be nice if all browsers used consistent settings, but I guess that will not be happening any time soon :)

Reuven Kishon
Reuven Kishon
5,270 Points

And what happens if in your example, the h1 did not have a defined font-size and you set the p to 150%? It would be 150% of the h1's default font-size, which is defined either in a normalize.css/reset.css file that you include in your HTML, or if not availlable, the browser's default setting for h1?

Alex Crump-Haill
Alex Crump-Haill
5,943 Points

http://stackoverflow.com/questions/6140430/what-are-the-most-common-font-sizes-for-h1-h6-tags - a useful resource for more information on how browsers interpret undefined h1-h6 tags.