The Typesetter turns any block of text into a font probe. Sliders adjust the size and available axes of variable fonts. And the text in the block can be edited like a regular input field.

The sliders support scrolling and keystrokes if you shift the focus tabwise.

Installation

To make the Typetester work, you need to install a script and a file with styles. The easiest way is to connect files via cdn unpkg.

// Styles
<link rel="stylesheet" href='https://unpkg.com/typetestr/dist/typetestr.css '></link>
// And the script
itself import TypeTestr from 'https://unpkg.com/typetestr/dist/typetestr.js '

After connection, you can initialize an instance of the class, for example, after the page is fully loaded. To use with turbo, use the turbo:load event.

document.addEventListener("DOMContentLoaded", function() {
  new Typetestr();
});

Add the typetestr class to the text blocks, and specify the settings in the date attribute, for example:

<p class="typetestr"
data-typetestr="size:16:100:40, wght:200:1000:300, wdth:75:125:100, YTLC:440:540">
Two hardy boxing kangaroos jet from Sydney to Zanzibar on quicksilver pinions.</p>

You can also install typetestr via the npm i command or download typetestr from the dist directory from the github.

Customization

By default, the script finds all elements with the typetestr class, specifies the contenteditable=true property for this block, and adds a slider to change the font size. You can change the name of the class by passing a parameter in the constructor:

new Typetestr("custom-classname");

For cases when you need to add variable axes, add the data-typetestr date attribute in the property format:minimum:maximum:the original and list them separated by commas, for example:

data-typetestr="wght:200:1000:300, wdth:75:125:100"

The size property is used for the font size, the other registered axes will change to human names in English.