From the course: Responsive Typography Techniques

Tools for controlling type dynamically with JavaScript and jQuery - CSS Tutorial

From the course: Responsive Typography Techniques

Start my 1-month free trial

Tools for controlling type dynamically with JavaScript and jQuery

“

In this tutorial, we'll look at two javascript tools that could come in handy for setting type in your responsive design. The first is flow type, which is a javascript based method for constantly adjusting your type, as its container resizes. It's a bit like getting the benefits of using the viewport units, without having to worry about browser support. And from this demo on their site, you can see that it really does adjust the size of the type constantly. Of course, you do need to set some parameters to make it work for you, and you do need to have your type sized in relative units for it to work. They've also put together a specific demo page for you to investigate its overall speed and performance. FitText is a jQuery plugin that comes in handy for headlines. If you have some large text that you'd like to have scaled with a viewport, FitText has you covered. And they actually have their own headline using FitText here. But make sure you heed the developer's warning and only use FitText on display type. The main project is a jQuery plugin, but there is also a vanilla javascript version maintained on GitHub. And you can find that here. If you find yourself in need of a way to have the type in your layout scale continuously, one of these scripts might just do the trick for you.

Contents