Can I combine minmax() with responsive length property in CSS? [duplicate]

Question

I had the idea to use responsive font-size in CSS, so that the font size would depend on the viewport width, but be limited for minimum and maximum size, like this:

@property --font-size-norm {            /* normal */
    syntax: "<length>";
    inherits: true;
    initial-value: minmax(10pt, minmax(1.8vw, 14pt));
}

but the browser did not like it.

So I tried to set it to 10pt instead and add the rule

p {
    font-size: var(--font-size);
}

to a test element and at an outer element I set

.outer {
    --font-size: minmax(10pt,minmax(1.8vw, 14pt);
}

When resizing the viewport, the font size changes, but it gets larger than 14pt (and smaller than 10pt).

@property --font-size-norm {            /* normal */
    syntax: "<length>";
    inherits: true;
    initial-value: 1.8vw;
}

.outer {
  --font-size: minmax(10pt, minmax(1.8vw, 14pt));
}

.outer p {
  font-size: var(--font-size);
}

<html>
<body>
<div class="outer">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum</p>
</div>
</body>
</html>

In principle I would like to have the magic of sizing in the properties initial value, but I'm unsure whether that expression would be evaluated when the property is being defined, or each time when it is being used.

minmax() is only available for specific grid property, look for min() or max() or clamp() — Temani Afif
– Temani Afif, Commented May 23 at 7:51
Use clamp(min, preferred, max). This lets you set a minimum, a scaling value, and a maximum and it works with font-size! — Omprakash S
– Omprakash S, Commented May 23 at 7:53

Omprakash S · Accepted Answer · 2025-05-23 07:54:53Z

1

minmax() is not a valid CSS function for property values like font-size! It’s only used in CSS Grid to define track sizing, not for values like font-size, width, etc. Refer this

clamp() is what you want. Use clamp(min, preferred, max). This lets you set a minimum, a scaling value, and a maximum and it works with font-size as well.

.outer {
  --font-size: clamp(10pt, 1.8vw, 14pt);
}

.outer p {
  font-size: var(--font-size);
}

answered May 23 at 7:54

Omprakash S

1

Sign up to request clarification or add additional context in comments.

2 Comments

U. Windl May 23 at 8:21

I guess I was thinking that minmax() is a generic mathematical function available in CSS; somehow it's odd that there exist two similar functions: clamp() and minmax().

Omprakash S May 23 at 8:27

minmax() only valid within the context of CSS Grid and Flexbox layouts (e.g., for defining track sizes like grid-template-columns: minmax(200px, 1fr)), clamp() This is the generic mathematical function available for many property values (e.g., font-size, width, height, etc.)

U. Windl · Accepted Answer · 2025-05-23 08:26:26Z

0

Alternate answer (answering a different aspect of the question):

Using

@property --font-size-norm {            /* normal */
    syntax: "<length>";
    inherits: true;
    initial-value: clamp(10pt, 1.8vw, 14pt);
}
p {
    font-size: var(--font-size-norm);
}

also works; so it seems it is evaluated on each use (instead of once).

Tested with Firefox 128.

answered May 23 at 8:26

U. Windl

4,74839 silver badges65 bronze badges

Collectives™ on Stack Overflow

Can I combine minmax() with responsive length property in CSS? [duplicate]

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related