Css: 100% Font Size - 100% of What

CSS: 100% font size - 100% of what?

The browser default which is something like 16pt for Firefox, You can check by going into Firefox options, clicking the Content tab, and checking the font size. You can do the same for other browsers as well.

I personally like to control the default font size of my websites, so in a CSS file that is included in every page I will set the BODY default, like so:

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px
}

Now the font-size of all my HTML tags will inherit a font-size of 14px.

Say that I want a all divs to have a font size 10% bigger than body, I simply do:

div {
    font-size: 110%
}

Now any browser that view my pages will autmoatically make all divs 10% bigger than that of the body, which should be something like 15.4px.

If I want the font-size of all div's to be 10% smaller, I do:

div {
    font-size: 90%
}

This will make all divs have a font-size of 12.6px.

Also you should know that since font-size is inherited, that each nested div will decrease in font size by 10%, so:

<div>Outer DIV.
    <div>Inner DIV</div>
</div>

The inner div will have a font-size of 11.34px (90% of 12.6px), which may not have been intended.

This can help in the explanation:
http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

What does font-size: 100% on the html element do?

There are many types of declaring the font-size as the same value for the browser.

1. font-size: 1em;

2. font-size: 100%;

3. font-size: 16px; // this is default

This way, you can get the default font-size. But note that 16 px will alter the font-size, however em and % will depend on the font-size used in the body tag.

Fiddle: http://jsfiddle.net/afzaal_ahmad_zeeshan/5Wkus/

So you'll see, em depends totally on the font-declared in body. Or you can say, it runs from child to parent. It keeps looking for the font-size change in the nearest parent. Which in most cases directs the code to the body element or the user agent default stylesheet.

CSS - font size 100% of the containing div (element)

This is not possible with pure CSS. You have 4 options:

1) Define the font size for certain breakpoints, to fill up as much as the container as possible, cross browser/platform.

2) Use Viewport Percentage Units: vw as described in this SO answer

3) Use a JS library to fill the text of the parent container, eg:

• BigText
• FitText

4) Apply a font size that fits the container well, maybe tweak it after 600px +; and live with the fact the font won't fit exactly 100% of the container.

I recommend no.4 for your specific requirment - there will be no JS dependancy, it's simplest to apply and it won't make that much of a difference for your requirement. Maybe the form would look better if you align the text to the left as well. I think no1 and 2 are a bit of an overkill.

Is 1.0em the same as 100% for font sizes?

Yes.

1em and 100% mean the same thing (for font-size) — "The same font-size as the parent element" (which is not the same thing as the font size the user has selected unless you are talking about the HTML element).

There are bugs in Internet Explorer when em is used and the font size picked from the view menu is not medium.

Font scaling based on width of container

If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.

If the container is the body, what you are looking for is Viewport-percentage lengths:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.

The values are:

• vw (% of the viewport width)
• vh (% of the viewport height)
• vi (1% of the viewport size in the direction of the root element's inline axis)
• vb (1% of the viewport size in the direction of the root element's block axis)
• vmin (the smaller of vw or vh)
• vmax (the larger or vw or vh)

1 v* is equal to 1% of the initial containing block.

Using it looks like this:

p {
    font-size: 4vw;
}

As you can see, when the viewport width increases, so do the font-size, without needing to use media queries.

These values are a sizing unit, just like px or em, so they can be used to size other elements as well, such as width, margin, or padding.

Browser support is pretty good, but you'll likely need a fallback, such as:

p {
    font-size: 16px;
    font-size: 4vw;
}

Check out the support statistics: http://caniuse.com/#feat=viewport-units.

Also, check out CSS-Tricks for a broader look: Viewport Sized Typography

Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography

And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu

Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. Molten Leading in CSS

Why cant I make percentages work for font-size

If you to use percentage to font-size of your elements, this is relative to font-size defined in html. So even the window size change, your font-size continues with the same size. The common font-size of html is 16px, so if you have a h1 with font-size: 200%, not matter the window size, the h1 font-size will have 32px.

To font-size change with change of window width use vw. In this way your font-size becomes dynamic.

Like this: h1 { font-size: 15vw }. It means that if window width is 200px your font-size will have 30px;
100vw == 100% of width

1vw == 1% of width.

Why set body font-size to 100%

Setting the font-size to 100% makes use of the user's default font configuration (People with visual impairment tend to increase it for example), by setting the percentage you are truly making a site that is adapting to the user's device .

Em on the other hand (quoting the article you referenced):

An em is a unit of measurement. Just like pixels, ems can determine the size of elements on a web page. Unlike pixels, which are absolute, ems are relative to their parent’s font size, which is where a lot of confusion lies.

   desired pixel / inherited pixel  = em

So people use this to make the inherited pixel set to user default configuration.
Making it a bit unpredictable to control the font-size, one perfect example would be the multiple anchor tags in a paragraph that is referenced in the article as well:

The anchor within the paragraph is still sized at 1.2em, but that’s now relative to the parent paragraph, which is already 19.2px – (1.2 * 19.2px = 23.04px). This gives us extra large anchors in some parts of our page; hardly desirable.

In short, using percentages makes the font-size global, using ems makes it relative to the inherited size.

---

Related Topics