Two hardy boxing kangaroos jet from Sydney to Zanzibar on quicksilver pinions.
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.
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.
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.
Hi! My name is Evgeniy Agasyants. I am a designer of interfaces, logos, and everything that can be shown on the screen or printed on paper. Produced photo shoots.
In my free time I create fonts and develop a web font editing service typlr.app