Description

Responsive typography allows us to scale the font proportionally to the available screen width. Also, because we declare all component dimensions in rem units and/or percentages, the UI elements will scale along with the font. This means that we can partially mitigate the "stripiness" issue on large screens where main content has a max-width and is surrounded by large full bleed stripes of background colour, and we make sure the text remains comfortably legible. The current formula has been derived by taking two common screen resolutions, finding a good font size for those and finding the equation of a line connecting the two using the slope-intercept formula. So, given the points:

• for 1280px => 16px
• for 1920px => 20px we can find the slope of the curve:

  slope = (20 - 16) / (1920 - 1280)
  slope =  1/160
  

  From this, we can find the intercept:

  intercept = 16 - (1280 * (1/160))
  intercept = 8
  

  Therefore giving us an equation for screen sizes greater than 1280px:

  font-size = screen-width / 160 + 8
  

  In CSS, screen-width can be substituted with 100vh therefore giving us our responsive typography formula. QED