8

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:

enter image description here

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:

enter image description here

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.

enter image description here

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>

Improve this question
3
  • stackoverflow.com/questions/30693928/… This is a similar question and check my answer for what I tried to do. Commented Oct 31, 2020 at 4:53
  • You could try using something like CSS Clamp(). Which varies depending on the viewport size and base font. Commented Oct 31, 2020 at 6: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. Commented Oct 31, 2020 at 6:12

2 Answers 2

Reset to default
8

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.

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

1 Comment

That Red Blob Games article lists madebymike.com.au/writing/precise-control-responsive-typography as one of its source, another interesting reference.
-2

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:

  1. It might not be possible with only css.
  2. Em is not the correct answer as it relates to font-size of parent element and not its height or width.

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.