Scaling font size based on width and height of container

Question

So I'm trying to work on a more responsive design for my HTML document and the first thing I wanna get sorted is scaling of font size depending on the height and width of the container. Right now i have the following:

I researched a bit and found the unit "vw" in css which allows the font to scale based on the container but i just noticed that it only works when i resize my browser width wise which gets something like:

As shown the text are indeed scaling if i resize the browser width wise however, i realized that when i adjust the height of the browser, it doesn't scale at all.

How do i ensure that the text is scaled based on the width and height of the container?

html,body {
    height: 100%;
}

.outer {
    height: 50%;
    border: 1px solid black;
    width: 50%;
}

#cat1 {
    height: 50%;
    border: 1px solid black;
    font-size: 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
}

#cat2 {
    height: 50%;
    border: 1px solid black;
    font-size: 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href = "style.css">
    <title>Document</title>
</head>
<body>
    <div class = "outer">
        <div id = "cat1">
            This is text1
        </div>
        <div id = "cat2">
            This is text2
        </div>
    </div>
</body>
</html>

https://stackoverflow.com/questions/30693928/how-to-make-font-size-relative-to-parent-div/51737647 This is a similar question and check my answer for what I tried to do. — Harsha Limaye, Oct 31 '20 at 04:53
You could try using something like [CSS Clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp). Which varies depending on the viewport size and base font. — Tanner Dolby, Oct 31 '20 at 06:09
I might also add using `calc()` and CSS variables along with a viewport unit `vmin` such as `calc(var(--font-size) * 1vmin)` could be helpful. — Tanner Dolby, Oct 31 '20 at 06:12

score 4 · Answer 1 · answered Oct 31 '20 at 06:09

While the font-size CSS property can take a unitless number, a percentage or a length in a relative unit, all of these are relative to the parent element's font-size. Even if you use the CSS calc function, any measurement will be understood as a ratio of the parent's font-size, never the width or height of an element.

The only exception to this are rem and ren units, which are relative to the <html> element's font-size, and the vw and vh units, which are respectively percentages of the viewport's width and height. In other words, 100vh is the height of the window, 100vw is the width of the window. Red Blob Games has an interesting article on the use of vw units for responsive font-sizing, I recommend giving it a read.

You can use CSS transforms to scale the rendered size of elements, but this can make text appear blurry or stretched which is definitely not what you want when trying to make a website responsive and accessible.

Long story short, there's no CSS-only way to set the font size relative to an element's size. If you truly want to do this, you will have to use JavaScript to compute the element's size in pixels and then pass a px value to the font-size CSS property.

But at that point you'd be actively fighting against the way the web is supposed to work: elements stretch to fit their contents, not the other way around.

That Red Blob Games article lists https://www.madebymike.com.au/writing/precise-control-responsive-typography/ as one of its source, another interesting reference. — Domino, Oct 31 '20 at 06:27

Harsha Limaye · Answer 2 · 2020-10-31T04:50:52.930

Edit: This approach might be wrong. This will set the font size as a portion of the inherited font size and not the width/height of the parent element.
Please check this out:

Old answer

Use em unit instead of vw.

html,body {
    height: 100%;
}

.outer {
    height: 50%;
    border: 1px solid black;
    width: 50%;
}

#cat1 {
    height: 50%;
    border: 1px solid black;
    font-size: .5em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
}

#cat2 {
    height: 50%;
    border: 1px solid black;
    font-size: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href = "style.css">
    <title>Document</title>
</head>
<body>
    <div class = "outer">
        <div id = "cat1">
            This is text1
        </div>
        <div id = "cat2">
            This is text2
        </div>
    </div>
</body>
</html>

Scaling font size based on width and height of container

2 Answers2