Variable fonts can help us create dynamic and responsive typography. In this article, we’ll explore how to leverage variable fonts to create stunning animations that respond to music frequency. Whether you’re looking to add a new level of interactivity to your web designs or simply want to learn more about this exciting technology, this guide will provide you with the knowledge and tools you need to get started.

What is Variable Font?

Variable fonts are based on a standard outlined by OpenType, which includes ‘axes of variation’. These axes might be predefined, like width or weight, or custom-defined by the type designer.

Moreover, variable fonts offer a unified font family with (theoretically) endless variations in weight, width, and other attributes without needing multiple separate files. Traditional font families require separate files for each style variant (bold, italic, etc.), but a variable font condenses these into one file with a range of styles dynamically adjustable via CSS. This allows designers and developers fine-tuning styles to achieve the exact look they desire, dynamically adjusting a font’s weight, width, or any axis of variation.

Let’s take a look at the example below.

So as you can imagine, each axis in variable fonts allows for continuous settings, enabling a smooth transition from the lightest to the boldest weight without the jumps seen in traditional regular fonts.

Now let’s take a closer look at how the variable font looks like.

Roboto Flex – Google Fonts

Many variable fonts are available from various sources, but for this article, we’ll focus on Roboto Flex from Google Fonts. Navigate to the “Type tester” page on the font’s page, where you can view all available variable font axes on the left side. Let’s take a look at Weight and understand how it works.

Weight (wght)

In Google Fonts, they provide 3 components help us set up the font weight.

1. Tooltip

When you click the tooltip icon, it provides a description of the variation but also importantly, it gives us the variable font axis name we can use in styling. For example, the axis name for weight is wght which we’ll use to adjust the font weight. It is important to remember that the axis names are case-sensitive, so they must be entered exactly as shown. We’ll cover how to apply this in the following section later.

2. Slider

By adjusting the slider value, we can preview changes in real-time. This also displays the minimum and maximum values, 100 and 1000 respectively, which are important to note for when we import the font.

3. Pre-defined

We can select the pre-defined font weights and view how the traditional way we used to see. Although we won’t be using these pre-defined values for variable fonts, it’s still useful to observe the font in a conventional format.

Import

To use the variable fonts, we first need to import them. On Google Fonts, begin by clicking the “Get Font” button located at the top right of the font page:

and it will take you to the Selection page, where you can either obtain the embed code or download the fonts. For the purposes of this article, we will use the embed code, so click on the “Get embed code” button.

On the Embed code page, we can get the code in the right side. If we wanted to update the styles, click the “Change styles” button and adjust the values.

When you click the “Change styles” button, you will see the options like below.

There are two options to choose from: Full Axis or One Value. When you click the Full Axis button, we’ll see the updated embed code with the full range of the specified axis. For our needs, we require both weight and YTAS, so we should select Full Axis for both. The One Value option allows us to specify only a single default value. If you keep the default value selected, it won’t appear in the embed code, but selecting a different value will make it appear.

Now let’s closer look at the code.

<link>

Here is the code we get from Google Fonts. We need to embed this code in the <head> of your HTML.

Let’s explore each <link> tag.

1. Preconnect to Google’s Font API

This tag is used to establish an early connection to Google’s font-serving domain (fonts.googleapis.com). The rel="preconnect" attribute informs the browser to set up an early connection (DNS lookup, TLS negotiation, TCP handshake) before the request for the actual font file is made. This can help speed up the font loading by doing some of the work upfront.

2. Preconnect to Google’s Static Content Serve

Similar to the first, but this connects to fonts.gstatic.com, which is where the font files themselves are hosted. The crossorigin attribute is crucial here because Google Fonts are served from a domain different from where your site is hosted. This attribute ensures that the resources fetched are done so with proper CORS settings to avoid cross-origin resource sharing issues.

3. Import the Variable Font

This is the actual request for the variable font. Let’s take a look at each parameter.

family=Roboto+Flex specifies the font family to load, in this case, “Roboto Flex”.

And we have opsz,wght,YTAS@8..144,100..1000,649..854. It defines the axes for the variable font. Here, opsz (optical size) is set to range from 8 to 144, wght (weight) from 100 to 1000 and YTAS (ascender height) from 649 to 854. Those minimum and maximum numbers are provided from the slider we saw above. These are the variations within the font that can be controlled via CSS.

Lastly, we set display=swap. This tells the browser to use a fallback font to display the text until the custom font has fully downloaded. This prevents invisible text (flash of invisible text or FOIT) during loading.

Importing Multiple Variable Fonts

You can find a range of variable fonts available on Google Fonts here. It provides a table listing the axes names for each font, which is quite handy.

Let’s now look at how to import multiple variable fonts together. As an example, we’ll import both Roboto Flex and Fraunces, specifying particular axes for each:

Roboto Flex: opsz and wght
Fraunces: ital, opsz and wght

Here’s how we imported just Roboto Flex above:

To include Fraunces as well, we will add its configuration:

so together with Roboto Flex, it would look like:

Let’s break down the configuration.

You might have noticed that unlike Roboto Flex alone, there is a semicolon in the Fraunces configuration. That’s because we are adding the italics. So the semicolon separates the specifications for non-italic and italic styles.

The first part corresponds to the regular style since ital=0 means non-italic.

and the second part corresponds to the italic style since ital=1 means italic.

So here is the illustration.

We now know how to import the variable fonts. Before diving into utilising these fonts, let’s first set up our project using Vite.

A Quick Setup with Vite

Vite is a build tool that provides a development environment for your web projects. In this section, we’ll set up a simple Vite project to demonstrate using variable fonts.

To set up, follow this Getting Started guide. The below screenshots are the configuration I chose for this demo.

Once the scaffold is created, go to your project folder, install the dependencies and run the dev environment.

cd music-variable-fonts

npm install
npm run dev

Open up the local URL given by the Vite and you should see this welcome message in the browser.

As we don’t need the initial code provided by Vite, let’s clean up the files. We will remove counter.js and javascript.svg in the root directory. And open up the main.js and remove everything except:

import './style.css';

Alright, we are now ready to add the variable fonts.

Set Up HTML & CSS

In index.html, let’s replace:

with

Let’s import the variable font by adding the below code snippet in the <head>.

And in style.css, remove all CSS code and add below CSS code:

main {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.audio {
  bottom: 100px;
  left: 50%;
  position: fixed;
  transform: translatex(-50%);
}

.title {
  --font-weight: 300;
  --font-ytas: 750;

  font-family: 'Roboto Flex', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 300px;
  font-variation-settings: 'YTAS' var(--font-ytas);
  font-weight: var(--font-weight);
  transition: all 0.1s linear;
}

And you will see:

Let’s add the music. For this demo, we will use the “Vibe On” from Pixabay where you can download royalty-free music (and other resources as well). Once downloaded the mp3 file, add it to the public folder:

And when you click the play button, the music should start playing.

Now let’s explore the HTML and CSS code.

HTML & CSS Implementation

In the HTML, we have 2 main parts, the title and the audio file. First, let’s take a look at the audio element in the HTML.

Audio element

The <audio> element in HTML is used to embed sound content in documents. It can contain multiple sources, allowing the browser to choose the best one it supports. The element supports various attributes that provide control over its behaviour and appearance.

From the code snippet, the src attribute specifies the URL of the audio file to be played. In this case, it points to vibe-on.mp3 which we have added to the public folder.

The controls attribute adds built-in audio controls, such as play, pause, and volume. When this attribute is present, the browser displays a user interface for controlling audio playback.

In CSS, .audio styles fix the position of the element vertically centred and 100 pixels above the bottom of the viewport.

Title

The title uses h1 element. Let’s take a closer look at the CSS.

The .title contains two CSS custom properties:

--font-weight: controls the font weight.
--font-ytas: controls the Y-Transparency for Ascenders.

Later, we will update these two values to create the font animation. For this article, we are only updating these two properties, but you can update other values as discussed in the previous sections.

For the --font-weight, we will update the value of font-weight property and for the --font-ytas, we will update the value of font-variation-settings property. I think most of you are familiar with the font-weight CSS property but haven’t heard of font-variation-settings yet. We will dive deeper into font-variation-settings in the following section.

We have set font-optical-sizing: auto to allow the font to automatically adjust its design to improve legibility at different sizes. This feature enables the font to scale its characteristics dynamically, ensuring optimal readability and appearance across various sizes.

For the animation, we have transition: all 0.1s linear to smoothly animate changes to the font properties. This ensures that any updates to the font’s weight or variation settings occur in a fluid and visually appealing manner, with a duration of 0.1 seconds and a linear timing function for consistent speed throughout the transition.

font-variation-settings

The font-variation-settings property in CSS allows you to fine-tune the appearance of variable fonts by specifying values for different axes of variation. This property provides a way to access and manipulate these variations directly, enabling greater flexibility and control over typography.

From our example:

font-variation-settings: 'YTAS' var(--font-ytas);

the font-variation-settings property adjusts the ‘YTAS‘ axis of the font according to the value stored in --font-ytascustom property. By changing the value of --font-ytas, we can dynamically control the appearance of the ascenders’ transparency, allowing for flexible and responsive typography adjustments.

The font-variation-settings property supports multiple values, allowing us to control various font features simultaneously. For example, instead of using the font-weight property separately, we can include it as a value within font-variation-settings. Here’s how we can do it:

font-variation-settings: 'YTAS' var(--font-ytas), 'wght' var(--font-weight);

With this setup, we are ready to animate the variable font. Before we dive into the JavaScript code, let’s see how the font animation works and compare the differences between a normal font and a variable font on animation.

Animation Comparison

To animate the font, as discussed, we will update two values for demonstration: --font-ytas and --font-weight. In this section, we will focus on updating the font weight to illustrate how the animation works.

In the below screen recording, we first set the transition duration to 1 second to clearly visualise the animation for testing. For the final code, we will change back to 0.1 seconds. We then update the font-weight between 100 and 800, and as you can see, the font weight animation is very smooth.

Now let’s compare this with a regular font (we will be using Roboto).

In the below video recording, we change the font family to Roboto and update the font-weight between 100 and 800. You’ll notice that the animation is not as smooth and appears janky. Why does this happen?

Let’s look at the illustration below.

As shown in the illustration, variable fonts allow us to animate every single step which makes the animation smooth. In contrast, regular fonts have limited font-weight points, so when animated, the value jumps directly to the next available weight, creating a janky animation.

This is a significant advantage of variable fonts, enabling us to achieve smooth and continuous animations.

Now that we understand the benefits of variable fonts, let’s move on to writing JavaScript to gather music information and animate the font based on that information.

JavaScript Walkthrough

In JavaScript, we are setting up an audio context to analyse real-time data from an audio file and dynamically update CSS custom properties based on that data.

Here is the complete JavaScript code.

import './style.css';

const SENSITIVITY = 0.2; // 0-1, with 1 being the strongest
const MAX_IN_MAX = 255; // Maximum value for inMax

const audioElement = document.querySelector('audio');

const audioContext = new AudioContext();
const track = audioContext.createMediaElementSource(audioElement);
const analyzer = audioContext.createAnalyser();

track.connect(analyzer);
analyzer.connect(audioContext.destination);

audioElement.play();

const dataArray = new Uint8Array(analyzer.frequencyBinCount);

let animationId;

function mapValue(value, inMin, inMax, outMin, outMax) {
  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
}

function animate() {
  // Aninmation logic goes here
  analyzer.getByteFrequencyData(dataArray);
  let sum = dataArray.reduce((a, b) => a + b, 0);
  let average = sum / dataArray.length;

  let dynamicInMax = Math.max(MAX_IN_MAX * (1 - SENSITIVITY), 1);

  let weight = Math.floor(mapValue(average, 0, dynamicInMax, 100, 1000));
  let ytas = Math.floor(mapValue(average, 0, dynamicInMax, 649, 854));

  document.querySelector('.title').style.setProperty('--font-weight', weight);
  document.querySelector('.title').style.setProperty('--font-ytas', ytas);

  animationId = requestAnimationFrame(animate);
}

audioElement.onplay = () => {
  audioContext.resume();
  animationId = requestAnimationFrame(animate);
};

audioElement.onpause = () => {
  cancelAnimationFrame(animationId);
};

audioElement.onended = () => {
  cancelAnimationFrame(animationId);
};

Let’s add the JavaScript code step by step to complete it.

First, we will select the audio element from the DOM. The audioElement will be used to play the audio file and provide real-time audio data for analysis.

import './style.css';

const audioElement = document.querySelector('audio');

Now let’s create an audio context to manage the audio operations, connect the audioElement as a source within this context, and set up an AnalyserNode to access and analyse the audio data in real-time.

import './style.css';

const audioElement = document.querySelector('audio');

const audioContext = new AudioContext();
const track = audioContext.createMediaElementSource(audioElement);
const analyzer = audioContext.createAnalyser();

First we create an audio context (line 5) and create a media element source from the audioElement (line 6) followed by an analyser node (line 7).

Next, we connect the track to the analyser and then to the destination such as speakers.

import './style.css';

const audioElement = document.querySelector('audio');

const audioContext = new AudioContext();
const track = audioContext.createMediaElementSource(audioElement);
const analyzer = audioContext.createAnalyser();

track.connect(analyzer);
analyzer.connect(audioContext.destination);

Let’s closer look at the two lines.

`track.connect(analyzer)`

This connects the track to the analyser.

track: This MediaElementAudioSourceNode is created from the audioElement and represents the audio source (line 9).
analyzer: This AnalyserNode processes the audio data to provide real-time frequency and time-domain analysis (line 10).

By connecting track to analyzer, we route the audio data from the audio source through the AnalyserNode.

`analyzer.connect(audioContext.destination)`

This connects the analyzer to the Audio Context Destination.

audioContext.destination: This represents the final output destination for the audio context, which is the device’s audio output, typically the speakers or headphones.

To summarise, those two lines explain the process of routing audio:

Audio data flows from the track (audio source) to the analyzer (AnalyserNode).
After analysis, the audio data flows from the analyzer to the audioContext.destination, which sends the sound to the speakers or headphones for playback.

This setup allows the application to both analyse the audio data and output the audio so that it can be heard by the user.

Next, let’s play the audio. Currently, clicking the play button on the frontend won’t start the music. To enable music playback, we need to attach the play method to the audio element.

import './style.css';

const audioElement = document.querySelector('audio');

const audioContext = new AudioContext();
const track = audioContext.createMediaElementSource(audioElement);
const analyzer = audioContext.createAnalyser();

track.connect(analyzer);
analyzer.connect(audioContext.destination);

audioElement.play();

Now, when you click the play button, the music will start playing.

Next, let’s move on to creating the animation! To create the animation, there are three key things we need to consider:

requestAnimationFrame: is used to create a smooth animation loop that updates the animation frame by frame.
getByteFrequencyData: retrieves the current frequency data from the audio source, providing real-time data for analysis and visualization.
setProperty: updates the value of the CSS custom properties, which are used to animate the font weight and stretch dynamically based on the audio data.

Let’s take a look at the requestAnimationFrame first.

requestAnimationFrame

To create a smooth and efficient animation, we use the requestAnimationFrame method. This method is essential for updating the animation frame by frame, synchronizing with the browser’s refresh rate for optimal performance.

The requestAnimationFrame ensures that animations run smoothly by synchronising with the display’s refresh rate, typically 60 frames per second. This provides a more fluid animation compared to using setInterval or setTimeout.

Also unlike setInterval or setTimeout, which can cause frame drops and jankiness, requestAnimationFrame allows the browser to optimise rendering. It automatically pauses when the tab is inactive, saving resources and improving battery life on mobile devices.

Additionally, requestAnimationFrame provides a consistent time interval between frames, making it easier to create animations that appear consistent across different devices and display refresh rates.

In our animation setup, requestAnimationFrame is used to create a continuous loop that updates the visual properties based on real-time audio data.

First, the animation loop starts when the audio begins to play (line 20 below).

import './style.css';

const audioElement = document.querySelector('audio');

const audioContext = new AudioContext();
const track = audioContext.createMediaElementSource(audioElement);
const analyzer = audioContext.createAnalyser();

track.connect(analyzer);
analyzer.connect(audioContext.destination);

audioElement.play();

function animate() {
  // Aninmation logic goes here

  requestAnimationFrame(animate);
}

audioElement.onplay = () => {
  audioContext.resume();
  requestAnimationFrame(animate);
};

The audioContext.resume() method ensures the audio context is active (line 21) and requestAnimationFrame(animate) initiates the animation by calling the `animate()` function (line 22).

The animate function is called recursively via requestAnimationFrame, creating an ongoing loop that updates the animation frame by frame (line 17). In each call to animate, we retrieve the current byte frequency data and update the custom properties, creating a smooth animation.

Now, let’s add a console.log statement in the animate() function. When you play the music, you’ll notice that console.log is logged in every frame. This continuous logging shows us how we can update the custom properties in real-time based on the audio data.

However, you might observe that the logging continues even after the music stops or ends. To prevent unnecessary processing and potential performance issues, it’s a good practice to stop the animation when the music stops. We can achieve this by keeping a reference to the requestAnimationFrame call and cancelling it when the audio stops.

import './style.css';

const audioElement = document.querySelector('audio');

const audioContext = new AudioContext();
const track = audioContext.createMediaElementSource(audioElement);
const analyzer = audioContext.createAnalyser();

track.connect(analyzer);
analyzer.connect(audioContext.destination);

audioElement.play();

let animationId;

function animate() {
  // Aninmation logic goes here
  console.log('animate function call');
  animationId = requestAnimationFrame(animate);
}

audioElement.onplay = () => {
  audioContext.resume();
  animationId = requestAnimationFrame(animate);
};

audioElement.onpause = () => {
  cancelAnimationFrame(animationId);
};

audioElement.onended = () => {
  cancelAnimationFrame(animationId);
};

The animationId is used to store the ID of the current animation frame, which is returned by requestAnimationFrame. The onplay event handler starts the animation by calling requestAnimationFrame(animate) and storing the ID in animationId. The animationId gets updated in each recursive animate() function call.

Finally, the onpause event handler stops the animation by calling cancelAnimationFrame(animationId) when the audio is paused. The onended event handler also stops the animation when the audio ends by calling cancelAnimationFrame(animationId).

Alright, let’s now get the current byte frequency data and update the custom properties.

getByteFrequencyData

To get a snapshot of the frequency data, we are going to use the getByteFrequencyData method. This data can be used to visualise the audio (e.g., creating a spectrum analyzer) or to drive animations and other effects based on the audio content. Let’s add the line first and see it in more details.

import './style.css';

const audioElement = document.querySelector('audio');

const audioContext = new AudioContext();
const track = audioContext.createMediaElementSource(audioElement);
const analyzer = audioContext.createAnalyser();

track.connect(analyzer);
analyzer.connect(audioContext.destination);

audioElement.play();

const dataArray = new Uint8Array(analyzer.frequencyBinCount);

let animationId;

function animate() {
  // Aninmation logic goes here
  analyzer.getByteFrequencyData(dataArray);

  animationId = requestAnimationFrame(animate);
}

audioElement.onplay = () => {
  audioContext.resume();
  animationId = requestAnimationFrame(animate);
};

audioElement.onpause = () => {
  cancelAnimationFrame(animationId);
};

audioElement.onended = () => {
  cancelAnimationFrame(animationId);
};

The analyzer.getByteFrequencyData(dataArray) is called within the animate() function. This allows the script to update the frequency data on every animation frame, enabling real-time analysis and dynamic visual effects based on the audio’s frequencies.

The getByteFrequencyData copies the current frequency data into the provided Uint8Array (in this case, dataArray). The data represents the amplitude of frequencies across the audible spectrum. Each element in the dataArray represents the amplitude of a specific frequency band, ranging from 0 (silence) to 255 (maximum amplitude). The length of dataArray is determined by the frequencyBinCount property of the AnalyserNode, which is typically half the value of the fftSize (Fast Fourier Transform size) property of the AnalyserNode.

When you log the dataArray, you will see something like the above screenshot in each frame.

Calculating Sum and Average

To update the animation properties in a way that reflects the overall energy or intensity of the audio at that moment, we need to calculate a single representative value (the average) from the frequency data array. To get the average value, we will first get the total sum of all the frequency amplitudes in the dataArray. And then we will calculate the average amplitude of the frequencies by dividing the total sum by the number of frequency bins.

import './style.css';

const audioElement = document.querySelector('audio');

const audioContext = new AudioContext();
const track = audioContext.createMediaElementSource(audioElement);
const analyzer = audioContext.createAnalyser();

track.connect(analyzer);
analyzer.connect(audioContext.destination);

audioElement.play();

const dataArray = new Uint8Array(analyzer.frequencyBinCount);

let animationId;

function animate() {
  // Aninmation logic goes here
  analyzer.getByteFrequencyData(dataArray);
  let sum = dataArray.reduce((a, b) => a + b, 0);
  let average = sum / dataArray.length;

  animationId = requestAnimationFrame(animate);
}

audioElement.onplay = () => {
  audioContext.resume();
  animationId = requestAnimationFrame(animate);
};

audioElement.onpause = () => {
  cancelAnimationFrame(animationId);
};

audioElement.onended = () => {
  cancelAnimationFrame(animationId);
};

To get the sum, we use the reduce method to iterate over each element in the dataArray, summing up all the values. a is the accumulator, which holds the running total of the sum and b is the current value being processed in the array.

And to calculate the average, we divide the total sum by the number of frequency bins.

Now, when we log the average value to the console, it will look similar to the screenshot below:

With this, we will get the weight and ytas value and update them in the custom properties.

Mapping average frequency

In many real-world applications, we often need to map values from one range to another.

For example, the weight value should be ranged between 100 and 1000 so we need to rearrange the range of the frequency (0 to 255) in to the weight range (100 to 1000). So when the frequency is 0 as minimum value, the font weight will be 100, and when the frequency is 255 as maximum value, the font weight should be 1000.

For that, let’s write a function, mapValue().

function mapValue(value, inMin, inMax, outMin, outMax) {
  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
}

The mapValue function takes a value within a certain range and maps it to a corresponding value in another range. Here are the details of each parameter:

value: The number we want to map from the input range to the output range. In our case, it will be average.
inMin: The minimum value of the input range.
inMax: The maximum value of the input range.
outMin: The minimum value of the output range.
outMax: The maximum value of the output range.

Let’s take a closer look at the returning value. To demonstrate, we will be using the parameter values as:

mapValue(75, 50, 100, 0, 10)

1. Subtracting `inMin` from `value`

(value - inMin)

This shifts the value so that the input range starts at 0 (for matching with the output min value). This is crucial because it normalizes the value relative to the start of the input range.

For example, if value = 75 and inMin = 50, then:

75 - 50 = 25

This means we are treating 50 as the new 0 point.

2. Multiplying by the range of the output (`outMax - outMin`)

(value - inMin) * (outMax - outMin)

This scales the normalized input value to the width of the output range.

For example, if outMax = 10 and outMin = 0, then the output range width is:

10 - 0 = 10

So if value - inMin is 25 (from the previous step), then:

25 * 10 = 250

3. Dividing by the range of the input (`inMax - inMin`)

((value - inMin) * (outMax - outMin)) / (inMax - inMin)

This step normalizes the scaled value by the width of the input range. For example, if inMax = 100 and inMin = 50, then the input range width is:

100 - 50 = 50

So if (value - inMin) * (outMax - outMin) is 250 (from the previous step), then:

250 / 50 = 5

4. Adding `outMin`

((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin

This step shifts the normalized value to the appropriate position within the output range. For example, if outMin = 0, then:

5 + 0 = 5

Thus, mapValue(75, 50, 100, 0, 10) maps 75 from the range [50, 100] to the range [0, 10], resulting in 5.

`weight` & `ytas`

Now let’s apply the mapValue function to both weight and ytas.

First let’s take a look at the weight. Let’s map the average frequency data to a font weight value, ensuring it falls within a specified range.

...

function animate() {
  // Aninmation logic goes here
  analyzer.getByteFrequencyData(dataArray);
  let sum = dataArray.reduce((a, b) => a + b, 0);
  let average = sum / dataArray.length;

  let weight = Math.floor(mapValue(average, 0, 255, 100, 1000));

  animationId = requestAnimationFrame(animate);
}

function mapValue(value, inMin, inMax, outMin, outMax) {
  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
}

...

To get the weight value, we map the average from the input range [0, 255] (representing the possible amplitudes) to the output range [100, 1000] (representing the font weights) using the mapValue function.

If we console log the weight value, we will see the value mapped by the mapValue function, as shown in the screenshot below.

We can use this value to update the weight custom property, which we will do in the next step.

Let’s map the ytas value.

...

function animate() {
  // Aninmation logic goes here
  analyzer.getByteFrequencyData(dataArray);
  let sum = dataArray.reduce((a, b) => a + b, 0);
  let average = sum / dataArray.length;

  let weight = Math.floor(mapValue(average, 0, 255, 100, 1000));
  let ytas = Math.floor(mapValue(average, 0, 255, 649, 854));

  animationId = requestAnimationFrame(animate);
}

function mapValue(value, inMin, inMax, outMin, outMax) {
  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
}

...

and we will get the value like below:

Great! Now it’s time to update the custom properties.

Updating CSS Custom Properties

Now let’s update the values of the --font-weight and --font-ytas custom properties. To learn how to update CSS custom properties in JavaScript, check out this article.

...

function animate() {
  // Aninmation logic goes here
  analyzer.getByteFrequencyData(dataArray);
  let sum = dataArray.reduce((a, b) => a + b, 0);
  let average = sum / dataArray.length;

  let weight = Math.floor(mapValue(average, 0, 255, 100, 1000));
  let ytas = Math.floor(mapValue(average, 0, 255, 649, 854));

  document.querySelector('.title').style.setProperty('--font-weight', weight);
  document.querySelector('.title').style.setProperty('--font-ytas', ytas);

  animationId = requestAnimationFrame(animate);
}

function mapValue(value, inMin, inMax, outMin, outMax) {
  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
}

...

This code updates the CSS custom properties --font-weight and --font-ytas for the element with the class .title, using the values stored in weight and ytas.

Awesome! We have now completed the typography animation based on the music frequency.

Adding Sensitivity

This step is optional, but to make the animation more dynamic, we can provide a sensitivity value to the inMax value. First, let’s change the inMax value from 255 to 100, and you will notice the animation becomes more dynamic.

This is because reducing the inMax value makes the mapped output more sensitive to changes in the average frequency. The smaller range amplifies the differences in frequency data, resulting in more dynamic animations.

Now, let’s add a sensitivity value to inMax to control the animation’s sensitivity.

First, let’s define the SENSITIVITY and MAX_IN_MAX at the top of your JavaScript code.

const SENSITIVITY = 0.2; // 0-1, with 1 being the strongest
const MAX_IN_MAX = 255; // Maximum value for inMax

Now we need to calculate the dynamic inMax based on the sensitivity, ensuring that dynamicInMax is at least 1. Then, we apply dynamicInMax in the mapValue calls.

function animate() {
  ...

  // Ensure dynamicInMax is at least 1
  let dynamicInMax = Math.max(MAX_IN_MAX * (1 - SENSITIVITY), 1);

  let weight = Math.floor(mapValue(average, 0, dynamicInMax, 100, 1000));
  let ytas = Math.floor(mapValue(average, 0, dynamicInMax, 649, 854));

  ...
}

Great, with 0.2 sensitivity, the animation is much more dynamic. Try update the sensitivity and see how the sensitivity of the animation changes.

In Conclusion

In conclusion, variable fonts are a powerful tool for creating dynamic, responsive typography that enhances user experience. By using variable fonts, we can create engaging animations that respond to music frequency, adding interactivity and visual appeal to web designs.

This article has provided a step-by-step guide on how to implement these animations, from understanding the basics of variable fonts to applying them in animating the typography.

I hope you enjoyed this article. If you want to level up your frontend skills, don’t forget to subscribe below or connect with me on LinkedIn.