CODEWITHSUNDEEP
htmlcssfont-size
Dan
Dan

Reputation: 3870

Most Standard way to Set Font Sizes in HTML/CSS

I've been working in HTML/CSS for years, but I'd like to clarify something about setting font sizes. What is the best format to set your font?

Typically, i've been setting with a font-size in a percentage, and then using em to change it up or down from there.

Is this the most standard way to do it? I've seen fonts declared in pixels, points, with relative keywords like "larger" or "smaller" I've seen it set as percentages, etc.

So what's the most standard? Is the most standard the best? any research to back it up?

Thanks,

Upvotes: 16

Views: 29917

Answers (4)

Rob Berrones
Rob Berrones

Reputation: 21

I generally set html to 10px, then use font-size: 100% on the body. You can then use the px/em ratio 14px/1.4em on elements. The only thing I run into is then if I nest base elements, the font gets all funky, and you have to specify font-size on all nested elements.

Example: if I have p, section, article, div{font-size: 1.6em;}, any time I have p, section, article, div nested, the font becomes proportional to the container. So the 1.6em that was originally 16px is now 1.6em of 16px (not 10px) or 25.6px. You'd have to re-scale the text to 0.625em (or 16px/25.6px = 0.625em). You will have more control over consistency across browsers, but it may require a bit more effort from you.

Some may be asking, "Why go through all this hassle?" That is a good question. Here is the answer: Responsiveness. That, and I work for a company that needs to be 508 compliant. That includes ultimate control over starting font sizes. I can't rely on assuming that the end user has "medium" or 16pt font selected, because the law clearly states it must be X or Y for high contrast, etc..

Upvotes: 2

Jason Gennaro
Jason Gennaro

Reputation: 34855

You should set the font-size in the body tag to 100%. That way, people who visited your site will see the text at the right size for what they have set in their browser. For instance, people with low vision may set the text size larger. If your font-size is set to 100%, they should see it exactly as desired.

After that, you could set the sizes on your h1, h2, p, etc. with % or em.

Upvotes: 3

Joris Ooms
Joris Ooms

Reputation: 12038

What I learnt at school is the following:

Set font-size in body with percent to 62.5%:

body {
      font-size: 62.5%;
}

Then you can use em in the same sense as you would use pixels, except you divide by 10.

For example:

h1 {
    font-size: 1.4em; /* 14px */
}

We learnt to use em for 'elastic' layouts. If you specify your font-size in em, the text will keep its proportions after a user zooms in or out.

Then again, I see people use px or other declarations for fonts all the time; as far as I know they're all standard. I guess it just comes down to creating the best user-experience.

Upvotes: 27

Alohci
Alohci

Reputation: 82986

They're all standard. Use what works for you.

Upvotes: 2

Related Questions