Responsive font size in CSS

Question

I\'ve created a site using the Zurb Foundation 3 grid. Each page has a large h1:

Answer 1

I am afraid there isn't any easy solution with regards to font resizing. You can change the font size using a media query, but technically it will not resize smoothly. For an example, if you use:

@media only screen and (max-width: 320px){font-size: 3em;}

your font-size will be 3em both for a 300 pixels and 200 pixels width. But you need lower font-size for 200px width to make perfect responsive.

So, what is the real solution? There is only one way. You have to create a PNG image (with a transparent background) containing your text. After that you can easily make your image responsive (for example: width:35%; height:28px). By this way your text will be fully responsive with all devices.