Default Font Settings?

What default font settings do you recommend for a website?

In the past, I did this…

body{
    font-family: Helvetica, Arial, Sans-Serif;
    font-weight: normal;
    line-height: 1.4em;
    font-size: 0.9em;
    color: #000;
    background: #FFF;
}

For some reason, 1em seems to large for me. Is it a bad idea to set it to 0.9em for instance?

You can set it to whatever you like. :slight_smile: Preferably use relative units, such as em or %, rather than px. Based on the (somewhat erroneous) assumption that 1em or100% equates to 16px, I prefer to set em values or percentages at approximate whole pixel values, though.

So rather than 0.9em, which for many users would result in a 14.4px calculation by the browser, I’d go for 0.9375em, which would equate to 15px, and so on. The reason is that you don’t know what the browser will do with 14.4px, as it might round up or down.

Of course, the end user’s default font size may well not be 16px, but apparently that’s the general default, and I don’t know how many people change the default on their machine.


Just remember that font sizing is a more contentious issue than which political party you follow, so expect a heated exchange below. :stuck_out_tongue:

I would recommend leaving that particular value at 100%. Why? Because I assume that users have chosen as their own browser’s default font size one that satisfies their needs for most of the sites that they visit. If you choose to change their expectation by reducing the font size to one that satisfies YOU in YOUR browser, then the user is required to zoom their browser to compensate for the difference. Why annoy them?

1 Like

I did a bit of looking in dev tools to see what it was here.
font-size is 1rem
AFAIK this is based off of body which is 14px.

Seems OK to me even with my tired old eyes.

I have trouble with low contrast sites, and some text in attached images here are a strain. But knock wood, the text is still readable though depending on how tired I am I may move a bit closer to the monitor or shift to bifocal viewing.

tl,dr I tend to have more trouble with low contrast than I do font size

rems are based on the html (root) font size. In most cases, that means the user’s chosen font size unless the coder chose to specify otherwise.

If one’s chosen font size were 14px, then applying .9em or 90% to the html or body tag would reduce the user’s apparent font-size by 10% assuming .ems within the body of the page. 14px -10% = 12.6px (depending on rounding and assuming .ems within the body of the page) That’s tiny to my tired eyes.

Off-Topic
Ironic that in spite of all the admonitions that listening to loud rock and roll would ruin my hearing I can still hear a whisper but have a wee bit of trouble seeing at times.
No one ever warned me about the perils of reading too much! :wink:

5 Likes

Another comment about the default setting for line-height. It is best to set your default without units.
So you should have line-height: 1.4;

2 Likes

Hmmmm. Has she ever asked about that before???

and

Absolute Font Size? - #23 by ronpat

4 Likes

Interesting suggestion.

In the print world, 12pt font was considered “standard” and 10pt font maybe the second choice.

I think 16px font looks like grandpa sized font on my laptop…

Who is she?

The cat’s mother.

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