Search code examples
cssresponsive-designresponsiveclamp

CSS clamp function formula for font-size

How can I use the clamp function, for my h1 element, to change the font-size responsive with specific requirements.

h1 { font-size: clamp(min, ???, max); }

Only from a screen width of 576px should "clamp" increase the size of the font proportionally/responsive up to a screen width of 1200px.

@media (min-width: 576px) 
{
    h1 { font-size: clamp(32.44px, ???, 61.04px); }

}

Is there a formula to calculate the green area in the picture?

enter image description here

Solution

  • slope = (maxFontSize - minFontSize) / (maxWidth - minWidth)

    yAxisIntersection = -minWidth * slope + minFontSize

    preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]

    On this Website, I found the formula to calculate the value for clamp.

    Linearly Scale font-size with CSS clamp() Based on the Viewport

    The calculation example for my situation:

    • maxFontSize = 61.04px or 3,81rem

    • minFontSize = 32.44px or 2,0275rem

    • maxWidth = 1200px or 75rem

    • minWidth = 576px or 36rem

    • slope = ( 3,815 - 2,0275) / ( 75 - 36 )

    • slope = 1,7875 / 39

    • slope = 0,045833

    • yAxisIntersection = -36 * slope + 2,0275

    • yAxisIntersection = 0,3775

    • preferredValue = yAxisIntersection[rem] + (slope * 100)[vw]

    • preferredValue = 0,3775rem + 4,5833vw

    • clamp(2,0275rem, 0,3775rem + 4,5833vw, 3,815rem);

    Temani Afif found a website where you can calculate the value. Font-size Clamp Generator