How to make the font size smaller when I resize the browser

css, fonts, html

Solution

For HTML5 web pages I would highly suggest using Viewpoint Width/Height values. They function similarly to % but are font sizes that resize with the window.

For example...

.some-paragraph{
    font-size: 5vw;
}

This would set the font-size to always be 5% of the current viewport width, even on re-sizing!

Learn more here: http://www.w3.org/TR/css3-values/#viewport-relative-lengths

Note: You may need to have this in your head:

 <meta name="viewport" content="initial-scale=1">

Problem

I am making a website with html5 and css. I am trying to make this website responsive, but I don't know why the size of the font stay the same when I resize the browser window, even when I'm using `em` or `percentage`s such as: `font-size: XXem` or `font-size: XX%`. How can I make font resizable?

Original source