tightset

Variable-weight text fitting engine. Fill any rectangle with kinetic typography.
Live demo →

Every line stretches to fill the width, with heavier weight on larger lines. Works with any variable-weight font. Ships with React, Svelte, Vue, Angular, vanilla Canvas, and DOM/Tailwind renderers.

Install

npm install tightset

Quick Start

import { fit } from 'tightset'
import { render } from 'tightset/canvas'

await document.fonts.ready // always wait for fonts before canvas rendering

const result = fit('Every Line Fills The Width', {
  width: 800,
  height: 500,
  fontFamily: 'Inter',
})

render(document.querySelector('canvas'), result, {
  fontFamily: 'Inter',
  color: '#ffffff',
  background: '#0d0d0d',
})

Font loading: Canvas mode measures text via the Canvas 2D API, so the font must be fully loaded before calling fit(). Wait for document.fonts.ready or use the CSS Font Loading API. The framework components (tightset/react, tightset/vue, etc.) use canvas internally — ensure your fonts are loaded before they mount, or trigger a re-render once fonts are ready.

Packages

React

import { Tightset } from 'tightset/react'

<Tightset
  text="Make It Tight"
  width={800}
  height={500}
  fontFamily="Inter"
  color="#fff"
  background="#000"
/>

Svelte

<script>
  import Tightset from 'tightset/svelte'
</script>

<Tightset
  text="Hello World"
  width={800}
  height={500}
  fontFamily="Inter"
  color="#fff"
  background="#000"
/>

Vue

<script setup>
import Tightset from 'tightset/vue'
</script>

<template>
  <Tightset
    text="Hello World"
    :width="800"
    :height="500"
    fontFamily="Inter"
    mode="html"
  />
</template>

Angular

Note: The Angular component is shipped as TypeScript source (not pre-compiled), so it cannot be consumed directly from node_modules with AOT compilation. Copy the component into your project from node_modules/tightset/dist/angular/tightset.component.ts, or use the source from src/angular.

// Copy tightset.component.ts into your project, then:
import { TightsetComponent } from './tightset.component'

@Component({
  standalone: true,
  imports: [TightsetComponent],
  template: `
    <tightset
      text="Make It Tight"
      [width]="800"
      [height]="500"
      fontFamily="Inter"
      color="#ffffff"
      background="#0d0d0d"
    />
  `,
})
export class MyComponent {}

Tailwind / DOM

import { fit } from 'tightset'
import { renderToHTML } from 'tightset/dom'

const result = fit('Style Me', { width: 800, height: 400, fontFamily: 'Inter' })
const html = renderToHTML(result, {
  fontFamily: 'Inter',
  containerClass: 'bg-black rounded-2xl',
  lineClass: 'tracking-tight drop-shadow-lg',
})

Or get style objects for JSX:

import { getLineStyles } from 'tightset/dom'

const styles = getLineStyles(result, { fontFamily: 'Inter' })
result.lines.map((line, i) => <div style={styles[i]} className="drop-shadow-lg">{line}</div>)

Options

Node.js / SSR

import { createCanvas } from 'canvas'
import { setMeasureContext, fit } from 'tightset'

setMeasureContext(createCanvas(1, 1).getContext('2d'))
const result = fit('Server Side', { width: 800, height: 400 })

Demo

Live demo → dmoptimal.github.io/tightset

Or run locally:

npx serve .
# Open http://localhost:3000/docs/

License

MIT