Fluid text sizes

HTML & CSS
1

Hi there,
I am trying to set up some fluid/responsive font sizes for my headings.

I have used a generator that has created the following:

–font-size-sm: clamp(0.69rem, 0.36vw + 0.61rem, 0.89rem);
–font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
–font-size-md: clamp(1.44rem, 0.26vw + 1.38rem, 1.58rem);
–font-size-lg: clamp(2.07rem, 0.07vw + 2.06rem, 2.11rem);
–font-size-xl: clamp(2.99rem, -0.32vw + 3.06rem, 2.81rem);
–font-size-xxl: clamp(4.3rem, -1vw + 4.55rem, 3.75rem);
–font-size: clamp(6.19rem, -2.17vw + 6.73rem, 5rem);

However, I am trying to use something like:

h1{
font-size: clamp(6.19rem, -2.17vw + 6.73rem, 5rem);
}

h2{
font-size-xxl: clamp(4.3rem, -1vw + 4.55rem, 3.75rem);
}

etc

But I am getting errors (in SASS).

Am I doing something completely wrong?

Thanks

2

Hmm, well what you have doesn’t quite look like proper CSS variables. Here’s an example

:root {
  --font-size-xxl: clamp(4.3rem, -1vw + 4.55rem, 3.75rem);
}

h1 {
  font-size: var(--font-size-xxl);
 }
3

The values don’t make a lot of sense, the negative vw will make text larger on small screens and smaller on big screens.
You have a min size lareger than your max size.
And you need to wrap the preferred equation in a calc().

4

I see, this was the tool I used:

So I would do something like this?:

–font-size-sm: clamp(0.69rem, 0.36vw + 0.61rem, 0.89rem);
–font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
–font-size-md: clamp(1.44rem, 0.26vw + 1.38rem, 1.58rem);
–font-size-lg: clamp(2.07rem, 0.07vw + 2.06rem, 2.11rem);
–font-size-xl: clamp(2.99rem, -0.32vw + 3.06rem, 2.81rem);
–font-size-xxl: clamp(4.3rem, -1vw + 4.55rem, 3.75rem);
–font-size-xxxl: clamp(6.19rem, -2.17vw + 6.73rem, 5rem);

h1 {
font-size: var(–font-size-xxxl);
}

5

They should start with a double dash if using CSS custom variables.

:root {
  --font-size-sm: clamp(0.69rem, 0.36vw + 0.61rem, 0.89rem);
  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --font-size-md: clamp(1.44rem, 0.26vw + 1.38rem, 1.58rem);
  --font-size-lg: clamp(2.07rem, 0.07vw + 2.06rem, 2.11rem);
  --font-size-xl: clamp(2.99rem, -0.32vw + 3.06rem, 2.81rem);
  --font-size-xxl: clamp(4.3rem, -1vw + 4.55rem, 3.75rem);
  --font-size-xxxl: clamp(6.19rem, -2.17vw + 6.73rem, 5rem);
}
h1.sm {
  font-size: var(--font-size-sm);
}

I’ve rolled them into a codepen so you can see each in action.

6

You don’t need calc() inside clamp now.

1 Like
7

Thanks. I am still getting to grips with the responsive font sizes.

I have come across this:

Is this right or wrong? Could I not just define my h1-h6 using vw?

8

You could do that but then the text just keeps on getting bigger and bigger on large screens and smaller and smaller on small screens.

That means that on my large iMac the text would be huge and look very silly. Conversely on a small iPhone the text will be too small to read comfortably.

That’s why clamp is good because it allows for fluid text but with a minimum and maximum size. The text is fluid between that range.

You really only want that effect for headings though as your readable body text does not want to scale like that. Indeed I tend to make sure the smaller screen text stays at 1rem whereas on a desktop you could get away with a little smaller size if needed. It’s easier to read small text on a desktop but a phone needs larger text to read easily.

In the end you need a mixture of strategies including media queries and vw and also not forgetting line length and how that affects readability.

9

I see. But if I set the min and max size using clamp, wouldn’t the h1 be the max size anyway? I’m a bit confused :confused:

10

The font size will scale between the min and max size depending on the viewport width.

The font will never be bigger or smaller than the max and min values but it will scale between those depending on the viewport width.

Here’s a dynamic demo that prints out the font-size as you widen or shorten the screen.

You do need to ensure that you have the correct vw value for your screen size. There are a number of generators around that will help with this.

1 Like
11

Thanks for that, that helps.

What if I wanted a set font size on desktop for example for a H1? Or does that defeat the object?

12

Well that wouldn’t be fluid then would it :wink:

We seem to be going around in circles a little bit here :slight_smile:

Let me instead ask you these questions.

One of my desktops has an 800px screen what size would you want the h1 to be on that ?

My other desktop has a 2500px screen what size would you want the h1 to be on that.

I also have another desktop but I divide the screen with my aps and have 4 windows open so my browser window is only 600px wide. What size should the h1 be on that?

They are all desktops. :slight_smile:

Now what about laptops? Some of my laptops are bigger than my desktop and some are smaller than my tablets. Yet my phone is smaller than my tablet although some have wider screens than my old tablets?

You can now see that clamp caters for all of these. In my example any screens larger than about 2000px are all 48px even if they are 5000px wide and andy screens smaller than about 350px don’t get any smaller than 20px. Screens in-between those 2 sizes get a steadily increasing range suitable to their width.

Now you could just say h1{font-size:3rem} but that may look to large on 1200px but fine on 2400px.

13

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