How to have a responsive font size

Make a text fit 100% of the width of parent container if often an idea designers use in their concepts. However, when it comes to responsive design it becomes tricky to keep the text matching the initial idea.

Here are a few ways to do responsive text:

Resize text at breakpoints

Not much to say here, except if you are in a fluid responsive design it may not take 100% of the width and fit perfectly.

SVG images

It can be an image (svg or not actually – the good thing is SVG won’t get blur), just add style=”width: 100%; height: auto;” to your image. However, it’s not the best practice for text (think about SEO and user accessibility)

SVG live text

and set the size of the text in pourcentage relatively to the parent container.

Read css-tricks for more explanation about how to do svg text

Check http://caniuse.com/#search=svg to know where SVG is supported (nearly all browsers except IE8)

Javascript plugins

• Texttailor
  “Responsive text to fill the height of the parent element or ellipse it when it doesn’t fit.”
• Fittextjs
  “jQuery plugin for inflating web type. FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.”
• Flowtype
  “Web typography at its finest: font-size and line-height based on element width.”

You know something better? Please add a comment!