9 votes

Climate Crisis Font shrinks in response to Arctic sea ice data

2 comments

  1. [2]
    gco
    Link
    Very interesting approach to bring attention to the climate crisis, though title could be consider slightly misleading. When I read it, I immediately thought it would be getting updated in real...

    Very interesting approach to bring attention to the climate crisis, though title could be consider slightly misleading. When I read it, I immediately thought it would be getting updated in real time rather than relying on existing data.

    3 votes
    1. pseudolobster
      Link Parent
      Unfortunately that's not quite possible. Fonts aren't smart like that. A font isn't able to know what the year is. The designers did make it so the "wght" parameter takes values from 1979 to 2050,...

      Unfortunately that's not quite possible. Fonts aren't smart like that. A font isn't able to know what the year is. The designers did make it so the "wght" parameter takes values from 1979 to 2050, so to make this font degrade over time you just need to use javascript to set "wght" equal to the current year.

      eg:

      <style>
      body { 
          font-family: "ClimateCrisis";
      }
      </style>
      
      <script>
      document.onload(){ 
          document.body.style.fontVariationSettings = '"wght" ' + new Date().getFullYear();
      }
      </script>
      

      In other news, TIL about variable fonts and font variation settings. I didn't know it was possible to set custom parameters like this. That's really cool and makes me wonder what other unique ways you could use this.

      4 votes