Ask coding questions

← Back to all posts
How to add vw and vh to one style in html?
MikeJMS8910 (107)

I am trying to add the vw and vh property to a text element in HTML but it seems that it wont work unless I am only using 1 of the 2. So can someone tell me how to have both of the properties for the font-size property?

Comments
hotnewtop
Coder100 (16759)

what?
WHAT?

Just want to tell you that you should NOT use vw or vh for anything other than widths.

If you did this for fonts, if the screen size was super small, users won't be able to see the text.

MikeJMS8910 (107)

@Coder100 ok I didn't know that. Couldn't you just increase the value then? But if you are not supposed to do that then what is the best way to make the text fit on the screen?

Coder100 (16759)

just use good ol' pixels

text {
  font-size: 50px;
}

@MikeJMS8910

MikeJMS8910 (107)

@Coder100 yea but when you use that then the text doesn't fit on all size screens.

Coder100 (16759)

that's the point
you would use media breakpoints to make the text smaller or larger @MikeJMS8910

realTronsi (914)

@MikeJMS8910 or if you really want your text to adjust to the screen you can just add a buffer

font-size: calc(5vw + 20px);
realTronsi (914)

@Coder100

people who use vw and vh for responsive design

Coder100 (16759)

lmao but that literally defeats the purpose
it really doesn't make sense for fonts to have a size relative to a width
it should be at least relative to the aspect ratio @realTronsi

realTronsi (914)

@Coder100 yeah I don't know what he's trying to achieve, just an example