Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Web Typography Responsive Text and Vertical Rhythm: Part 2

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points
Posted by SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

Current support of viewport units vs FitText

As of October 2014 it seems that viewport units are now widely supported by all mayor browsers. Does this mean that now I can replace the use of FitText with the use of viewport units for fluid web pages?

How could I set minimum and maximum font-sizes for headings using viewport units?

2 Answers

Gina Bégin
PLUS
Gina Bégin
Courses Plus Student 8,613 Points
Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points

SERGIO RODRIGUEZ — would you mind sharing how you found out that it is now widely supported? I'd love to use that instead of downloading the plugin!

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points
SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

Gina, have a look in the following link. In Oct 28 2014 there is a 78% support for both prefixed and un-prefixed viewport units.

http://caniuse.com/#search=view

Preston Skaggs
Preston Skaggs
11,818 Points
Preston Skaggs
Preston Skaggs
11,818 Points

Setting minimum and maximum font sizes can be done with media queries since viewport units depend on the height or width of the viewport.

For example if you want a max font size of 24 pixels:

h1 {
    font-size: 2vw;
}

@media screen and (min-width: 1200px){
    h1 {
        font-size: 24px;
    }
}