Using Percent for Font Size

Font size with percentage value (%) not scaling with screen size

I think what you're looking for are viewport percentage units.

Try this:

.about-content-title h1 { font-size: 5vw; }

With this adjustment, when you re-size the browser window the font will scale in size.

From the spec:

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

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.

• vw unit - Equal to 1% of the width of the initial containing block.
• vh unit - Equal to 1% of the height of the initial containing
  block.
• vmin unit - Equal to the smaller of vw or vh.
• vmax unit - Equal to the larger of vw or vh.

Using percentage values (%) doesn't scale your fonts relative to the viewport because these values are relative to a parent or ancestor. See the spec: 4.3. Percentages: the <percentage> type

How to convert font size in percentages?

You can also try vh viewport height and vw viewport width

<span class="s1">Lorem ipsum dolor sit amet</span>
<span class="s2">Lorem ipsum dolor sit amet</span>

CSS:

span.s1 {
   font-size: 5vh
}
span.s2 {
   font-size: 5vw
}

Fiddle: https://jsfiddle.net/h9e6ubdz/ Resize your window to see it in action. There is also a very helpfull list of all CSS units, wich you can find here.

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.

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

---

Related Topics