Scaling Font Size With Screen Size?

I'm developing a web app with AngularJS 1.x and Angular Material. I'm trying to create a landing page with a large title at md-display-4. Here's what it looks like: As you can see

Solution 1:

You can use viewport units, for example:

h1 {
    font-size: 10vw;
}

<h1>Foobar is the title here</h1>

Browser support reference

Solution 2:

Take a look into CSS media queries. It will give you the control you need over the font in relation to screen size.

You can add to bootstrap's exisiting classes to modify the font size depending on screen width.

Solution 3:

Viewport units make the browser's zoom inactive. But If you're willing to give it a shot you could resize fonts proportionally to the screen size by:

• Using relative font units like em or rem
• Then using javaScript to resize the root font size

document.documentElement.style.fontSize = x + 'rem';

• x needs to scale to the window width, which is fairly simple to do using

document.documentElement.clientWidth

• With the window resize event, but becomes a bit tricky when distinguishing between resizing the width and zooming, especially considering cross browser support, but it is doable if you focus on calculating the devicePixelRatio for all browsers.

If you don't want to fight with that, I've built a small library that properly handles font-scalling for all relative browsers IE9+.

Solution 4:

I think this kind of dynamic font size would be best defined using in css. Found this great example from youtube by Mike Riethmuller. https://www.youtube.com/watch?v=S8xSbtDySHE

How to do it is explained at 14:20.

The result is shown on 18:00.

What he basically does is defining font-size using calc and vw:

font-size: calc($min-font-px + ($max-font - $min-font) * (100vw - $min-screen-px) / ($max-screen / $min-screen));
// example dimension from video -->font-size: calc(16px + (24 -16) * (100vw - 400px) / (800 - 400));

When the screen is >=800px wide the max font-size is used. When screen size is less than 800px the font size gradually gets closed to min font-size until screen width is 400px.