Viewport Sized Typography

Searching the forums for 100% height sections and found a tutorial that described a few ways to do that and one of them was using the vh unit. Just type 100vh to the sections height as you would do with % or px. Worked perfectly for what i’m doing right now. Search a bit and found this article over at CSS-Tricks.
Theres a unit called vw that could be used on text for example. Is this something that could be brought in to Webflow?

It would be awesome to use vmin, vh, and vw instead of adding another .Js-file.

However, as mentioned in the comments, there’s trouble with the vh-values when it comes to rendering on iOS.

Apparently, iOS therefore doubles the vh-values and you would need to make a correction to account for it. And that’s just for the current ratio (1:2), older models have different ratio’s. That would be something to take into account if vh-values will be supported by WF.

I’ve used vh on a site for filling sections to to viewport height and its working on iOS. On my phone anyway =) But I understand its not working everywhere.

Well, if that are the stats so far and only IE gives some trouble, I do understand your first call. :smile:

1 Like

I know that more js may not be the most desirable method but a script similar to http://fittextjs.com/ might be the best way to go as far as device compatibility is concerned, at least for now.