Default percentage font-size on the html element

[thehung1724]

I set the default html font-size is:

html{
    font-size: 75%; /* 12px */
}

Then set body font-size like below:

body{
    font-size: 0.75em; /* 12px */
}

Now, I’m gonna set 14px for p tag so it will be look like:

p{
    font-size: 0.875em; /* 14px */
}

But when I check on the browser, it looks so small. What’s wrong with my above code? Thank in advance.

[TechnoBear]

The p is calculating 0.875 of the parent element’s font-size. You’ve set that to 0.75em, so your p will be 0.75x0.875=0.656em

[quote=“thehung1724, post:1, topic:102291”]
What’s wrong with my above code?
[/quote]In my opinion, the fact that you’ve overridden whatever default setting your visitors have chosen to use. I have my default font size at 16px because anything smaller than that becomes difficult to read. If you override that, I immediately have the inconvenience of needing to zoom to use your site - not something which will encourage me to use it.

[PaulOB]

You set the html element to 75% and then you set body to 75% so the body will be 75% of the computed size of the html element.

If for example the default for the html element was 16px (not guaranteed as the user can change this and UA’s don’t have to set a default and indeed mobile may be different also) but for arguments sake say the default is16 px then your 75% of 16px would make the html element 12px.

You then set the body to 57% so it will be 75% of its parent which means the body is 9px.

You then set a p element to be .875% of the body so the p element is now 10.5px (10px or 11px depending on how the browser rounds up or down - most likely 11px).

In most cases you want to set the base size of the text to the size of the text that is most used in the site so that you avoid compounding issues.

For readable content text you don’t really want to be smaller than 14px so just setting body to 8.7.5% will do the trick.

body {
	line-height:1.4;
	font-size:87.5%;
}

Or just leave it at the default which is what users usually want.

Remember though that this is not guaranteed and users can have different default set as their base so they may be seeing 20px or 10px but that’s their choice. You just have to code with this in mind. The sizes will all be relative though so it should not really matter.

Avoid resetting the font-sizes everywhere and avoid setting on elements that may be nested as sizes will compound. You can set a font-size on a p element quite safely but do the same thing on a ul and nested list will compound.

To avoid the compounding issue these days you can use the rem unit which is always relative to the body element.

[thehung1724]

Thank @PaulOB so much. Please see what I set code below is right or not:

html{
font-size: 100%;
}

body{
font-size: 0.75em; /* 12px */ 
}

p{
font-size: 1.167em; /* 14px. Converted from pxtoem.com */
}

[PaulOB]

@thehung1724

Please see what I set code below is right or not:

It’s right as far as mathematics go and assuming the default is 16px (which it may not be).

However, if you want the base size as 14px then why not do it on one go.

body {
	line-height:1.4;
	font-size:87.5%;
}

The p elements will now be 14px (or an equivalent scale to the users base size) as they have no default size (unlike headings etc). No need for your three rules as such.

In your example if you nested a p element inside a div that had a different font-size then the p element would be 1.167 larger than the size you set on the div. In my example the p would be the same size as that set on the div which most likely would be what you want.

[thehung1724]

Thank @PaulOB

I want the base size as 12px so I’ll set:

body{
    font-size: 75%;
}

I’ll try your suggestion and notice if I have trouble.