Fluid typography on one click with Headspin Copilot

With Headspin Copilot plugin you can add fluid typography easily to your project. Why do you need fluid typography you ask? Read this article.

For me, it’s because I am too lazy to go through all the breakpoints and set different values there, then go back to each one when changes are needed.

Step 1

Install and activate the Headspin Copilot plugin. Go to its Dashboard and hit Save. Now, all CSS variables will be generated and applied by default to all heading levels and text paragraphs. You can start building right away.

Fine tuning

For more precise calculations, you need to set your maximum viewport so the system knows to set the maximum value for that; the default value is 1366.

Step 2

Under the Theme tab, click on the Settings icon for typography. There, you can set the maximum and minimum base sizes. The default minimum is 16px, and the default maximum is 18px.

This means that at the maximum viewport, a normal paragraph will have a font size of 18px and will scale down to 16px at the minimum viewport.

You can select a scale ratio which is used to multiply the base number, and then it is applied to the headings.

Note that by default, we have selected the option to start from H4. This means the H4 value will be: base * ratio number, H3 = base * ratio number squared, and so forth. H5 and H6 will be equal to the base number. If you need the scaling to start at a different heading level, simply select it.

Using variables in Breakdance editor

You can use them however you like it.

Directly

Directly apply it to the typography input of each element. Right-click on the font size input and select the desired value from the Headspin panel.

Presets

Apply headspin values to presets with other styles alongside and reuse them

Classes

Same case as presets.

Custom values

Need bigger values for special text elements? Use calc function.

calc(var(--hfs-h1) * 1.5)

this will mutiply value of h1 variable 1.5 times.