text-fit

Fitter, happier text. Apply text styles based on the shape of the text. Useful to apply styles based on a design system.

Usage

const textFit = require('text-fit')
const vdom = require('virtual-dom')
const hyperx = require('hyperx')

const hx = hyperx(vdom.h)

const text = 'The quick brown fox jumped over the lazy dog'

const styles = textFit(text, {
  scale: [
    { 'font-size': 24 },
    { 'font-size': 32, max: 30 },
    { 'font-size': 48, max: 15 }
  ]
})

const tree = hx`
  <h1 styles=${styles}>${text}</h1>
`

document.body.appendChild(vdom.create(tree))

API

textFit(text, opts)

Take a string, analyze the length, and determine the font size based on a scale. Takes the following options:

• opts.scale: pass in a scale of values to be set. Determines based on .max if the values should be applied on the text.

Installation

$ npm install text-fit

License

MIT