Setting base font size question

Hi there,

I have found the following snippet to set the base font-size to 16px. It is setting the font-size to 16px which I assume will be most browser’s default size.

html {font-size: 100%;} /16px/

body {
line-height: 1.75;
}

However, are there other browsers (which ones?) that have a smaller/larger font size as default?

If I want the base font to always be 16px, should I also set this to 16px in the html CSS?

html 
{font-size: 100%;
font-size: 16px;
}

A similar conversation on setting the base font size is here:

1 Like

It’s never about what you want :slight_smile:

The default font size for desktops is usually 16px but other devices will set a default that is appropriate for their system.

You don’t need to know what this is but can assume it’s the best size for the device in hand.

Just use rems and assume that one rem is the most legible reading copy for that device and then base your larger and smaller sizes from there.

You can never be certain what size a system has set and if you set font-size: 16 px on the root then you disrespect the users preferences as they may have set a higher (or smaller) default size. If you suddenly say the root size is 16px then you just broke it for them.

In the end it should be the users choice and Indeed they may have set their browser to disregard your fonts and font sizes altogether anyway.

With that in mind just do nothing at all and size your page in rems. You don’t need to add any font size to the html element. It will naturally be 100% which is 1 rem which will probably equate to 16px.

Declaring it twice as in your example would be nonsense anyway as one rule overwrites the other. :wink:

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.