Better way to scale than vw

[Edrol97]

Hi all, I've added vw into my css for various elements. I'm confused about how to style and scale the navigationbar. How do I change the font size within the various navigation bars I have? Example of what I have tried unsuccessfully below. Thanks.

#sunnavigationbar {
  background-color: #ec1801;
  padding: 20px 20px;
  font-family: "Eliot Lord";
}

#sunnavigationbar a {
  font-family: "Eliot Lord";
  color: white;
  padding: 20px 20px;
  text-decoration: none;
  font-size: 2vw;
}

 

[JosiahMaybe]

That seems like it should work. Suppose there is anything overriding? I normally use px; rem; but vw (viewport width) should work. Have you set viewport width to all screen with a meta tag? X E.

 

[joeworkman]

You might want to look into clamp.

https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

 

[tomliv]

Hi all, I've added vw into my css for various elements. I'm confused about how to style and scale the navigationbar. How do I change the font size within the various navigation bars I have? Example of what I have tried unsuccessfully below. Thanks.

#sunnavigationbar {
  background-color: #ec1801;
  padding: 20px 20px;
  font-family: "Eliot Lord";
}

#sunnavigationbar a {
  font-family: "Eliot Lord";
  color: white;
  padding: 20px 20px;
  text-decoration: none;
  font-size: 2vw;
}

I use this tool frequently:

🧮 Fluid Typography Calculator

Calculate a fluid typography scale to level up your web dev and web design.

royalfig.github.io

After putting in the parameters you want, it will create a font-size declaration that will scale fonts but with a min and max size so the font size won't get too small or too large.