Responsive Text
Responsive Text, Responsive Font Size or Viewport Sized Typography allows the font-size of the text on a webpage to conform to the size of the screen or browser in which it is displayed. There are multiple ways of achieving this but some methods are more efficient than others.
So?So What?
Having Responsive Text leads to a more aesthetically pleasing display across platforms of any size. This maintains a permanent and comfortable line height for reading on a web page and allows the aesthetics of the typography on a header stay consistent.
What's this again? How can we do this?What not to do!
- Use javascript
- Set a bunch of break points
These methods just add more code for the page to read taking up load time and are just not very efficient.
What you should do.
Use Viewports!
- View Width (vw)
- View Height (vh)
- vmin = vw or vh (whichever is smaller)
- vmax = vw or vh (whichever is larger)
Using these in CSS is very simple and cost effective in terms of time and code.
How do they work?
One unit is equal to 1% of the viewport axis (width vw or height vh). The viewport is essentially the size of the browser window. If the viewport is 100mm wide, then 1vw == 1mm. However, if the viewport is 50mm wide, then 1vw == 0.5mm. Very simple you see.
For font-size, if the view port remained at 100mm, then 5vw would roughly be equal to one letter space depending on the typeface and font-weight used. So to get the exact font-size you want you will have to do some tweaking around with the values.
Is this the best method? Is it only for text?Does it only apply to text?
No! Viewports can be used for anything. Instead of using percentage widths on divs and other elements you can apply a vw to them. Most browsers support this style of setting responsive widths.
Want to see it in action?
If you're on a desktop, restore your browser window down and adjust the window size to see the text conform to the viewport in real time!
How does it work agin? Got it!