Is it possible to scale font based on width of the container?

Like how you do with images, can you do the same thing with font?

I’m thinking a browser window, can you scale font to the size of the browser window?

You can use the vw (viewport width) units to set font-size.

h1 {
   font-size: 5vw;
}

1vw = 1% of the screen width.

3 Likes

I think you would need to use that with caution, to prevent it becoming unmanageably large on a desktop monitor, or impossibly small on mobile.

2 Likes

This is what I was thinking about, something like this.

Code

Working test page
https://testpage34567.blogspot.com/

html,
body {
  height: 100%;
  background: #000000;
  padding: 0;
  margin: 0;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

p {
  font-style: normal;
  font-size: 10vw;
  font-family: georgia;
  margin-top: 0;
  margin-bottom: 0;
  border: 1px solid blue;
  padding: 5px;
}


/* unvisited link */

a:link {
  color: blue;
  text-decoration: none;
  outline: 0;
}


/* visited link */

a:visited {
  color: blue;
  text-decoration: none;
  outline: 0;
}


/* mouse over link */

a:hover {
  color: blue;
  text-decoration: none;
  outline: 0;
}


/* selected link */

a:active {
  color: blue;
  text-decoration: none;
  outline: 0;
}

<div class='outer'>
  <div class='tcell'>

    <p><b><a href="https://www.google.com/" target="_blank">Enter</a></b></p>


  </div>
</div>

This is a bit complicated, but if done properly, allowing the width of the browser window to adjust the font size works smashingly well!

2 Likes

I have that covered:-

3 Likes

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