Scaling font size responsively from a set size?

HTML & CSS
1

Hi there,

I have a <h1> tag with my heading in set at 72px.

What I am having issues with is when I scale down the window/device, one word appears too wide to fit on a screen so it creates horizontal scrolling and chops off the word.

I have played around with setting the font size to smaller sizes at various break points, which works, but I wondered if I can have the font size at 72px on desktop and then scale down equally as the window shrinks, like a percentage I guess?

Is there a way to do this or do I need to set it to be a size at each break point?

2

For me, I’ve found that using pixels (or points or any fixed values) for web design is just asking for trouble. Pixel perfection or fixed paper type layouts just aren’t realistic.

Using relative values (% or rem or such) for both allow for more flexibility, and reduce the need for breakpoints and the such. It also allows for relative consistency, which allowing the user to control the size they want.

For example, if you set your base font size (using * or html) to 100%, that sets the font size to the base font the user uses.

Then if you set that header to 4rem, that will keep the proportional size of the font while not being fixed to a specific font size. So if the user has 16px as their base, the h1 will become 72px. But if the user has 10px as their base, the h1 will be 40px. This keeps a consistent size relation between the two elements.

3

You can do it by using the vw unit but you will still need to set a minimum and maximum font-size to avoid getting too small or too big.

It’s explained here.

1 Like
4

Thanks for the replies.

I’ve now set

html{
font-size: 100%
}

and the h1 to:

.banner h1{
    font-size: 4rem;
}

But it is not scaling. Maybe I have missed something?

5

Yes :slight_smile:

That will set the font-size to 4 times the default (or users preferred default). It doesn’t actually scale anything in respect to the window size.

The only way to scale text with the window size is with the vw unit as I mentioned in my previous post. Of course that means you have to take care that the text is readable because you basically ignore the users default settings by imposing your design upon them. This means its (generally) ok to do this for headings that are large enough to read without zooming but you wouldn’t want to do it to readable chunks of text.

A simple example:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
h1{font-size:6vw;text-align:center;}
@media screen and (min-width:1370px){h1 {font-size:5rem}}
@media screen and (max-width:480px){h1 {font-size:1.2rem}}

</style>

</head>

<body>
<h1>This is some text that will scale with <br>the viewport
 over a min/max range</h1>
</body>
</html>

Have a look at the link I gave in the previous post as they show better ways using calc etc.

There’s also an old Sitepoint thread here that mentions a method from this old article.

1 Like
6

Great, thank you :slight_smile:

I will have a play around with the vw unit. I think I founds something with vh which made it look huge.

Thanks again!

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.