Responsive fonts / typography with breakpoints

Responsive fonts means display of font against other elements could retain perfect layout to a designs original intention (no jumping lines for words). Which would be boss mode through Webflow.

 

So allow for setting of font sizes that can scale with the window (VW or VH) but have min and max sizes so they aren't crazy small for laptops or crazy big on 2k or 4K displays. 

 

Currently I have to add custom CSS that sets minimum and maximum sizes with specific window min and max values as well. Something like:

font-size: calc(MINpx + (MAX - MIN) * ((100vw - WINDOW_MINpx) / (WINDOW_MAX -WINDOW_MIN)));

line-height: calc(MINpx + (MAX - MIN) * ((100vw - WINDOW_MINpx) / (WINDOW_MAX -WINDOW_MIN)));

i.e.

font-size: calc(38px + (57 - 38) * ((100vw - 1024px) / (2592 - 1024)));

line-height: calc(46px + (66 - 46) * ((100vw - 1024px) / (2592 - 1024)));

 

 

  • Cael Prussian
  • Sep 18 2019
  • Reviewed