@typetool/common v1.0.167

Parametric Typetool (tbd)

This is a Type Creator Tool in progress. At the moment it is in very early stages and might go through a complete rehaul. Expect weird and missing Shapes!

Setup Instructions

To install the current version in your project run

npm install @typetool/common

Import the Renderer inside your project

  import { RendererParametric } from '@typetool/common'

To make use of the Parametric Renderer create a new Instance of the Renderer

const renderer = new RendererParametric()

The renderer can then take in a string of text

const textData = renderer.rendererText({ text: 'Nerdy stuff' })

You can the iterate through textData (which is an array consisting of informations for each letter) and render each letter as an svg. To simply show the first letter for example you could do this.

HTML

<svg xmlns="http://www.w3.org/2000/svg">
  <path id="my-first-letter" d="" stroke="transparent" fill="black" />
</svg>

Javascript

// get the path element
const firstLetter = document.getElementById('my-first-letter')

// add the generated data to the "d" param
firstLetter.setAttribute('d', textData[0].svg)

Change Parameters

Now that by it self whouldn't be very fun, right?

You can animate the letters be dynamically changing the values. The way to do that my differe depending on the framework you are using. Changing the renderers parameteres is easy, but you have to make sure to rerender the letters afterwards to see the results.

You can change the configuration of the Renderer for example you change the stem or the bar of the typeface:

Changing Weights

renderer.config.stem = 100
renderer.config.bar = 200

Enable Serifs

renderer.config.serif = true