Responsive font sizing using CSS media queries

By Mattias Kihlström

Imagine you are using the principles of responsive web design in your latest web project. Also imagine that a part of your design calls for the text size to adapt to the browser width. Fluidly. And you don't want to use JavaScript for it. What should you do?

Font sizes that automatically adapts to the width of it’s container doesn’t yet come right out of the box. CSS3 will bring us units like vw and vh, but we still have to wait a little while longer before support is in the majority of the browsers out there. How do you solve responsive font sizing without using JavaScript today? That's right, write a lot of media queries. But even better, let this tool write them for you:

You can find the source code on github.