As it is Card

Community feedback

• 

  P

  Daniel•140

  @obriedan

  Posted over 3 years ago

  You can set your font size to be variable using clamp(). It works by taking three values

  • the smallest size acceptable
  • the target size
  • the largest size

  You can use it many ways in practice, however a quick and simple method is to determine the minimum and maximum font size in PX (or better REM) and use Viewport Width as the target size.

  for instance font-sze: clamp(0.75rem, 3vw, 1rem)

  If you're unsure about which target size to use, you can input a value and use dev tools + resonsive mode to slide between your viewports. Monitoring the computed font size will show you if you hit the correct minimum and maxium sizes.

  11

  Marked as helpful