Menu

Scale Text

scaleText automatically scales text to fit a container using different methods.
It's perfect for headlines, dynamic labels, or responsive typography.

Basic Usage

By default, it scales using font-size based on the width of the parent container:

scaleText('.headline', {
  width: 'auto',
  method: 'font-size',
  minSize: 12,
  maxSize: 80,
})

Live Example

This text automatically adjusts its size to match the container width.


Use full with

Configuration Options

Property
Description
width
'auto' (default), a pixel number, or a CSS string. Defines the container width.
method
'font-size' (default), 'letter-spacing', or 'word-spacing'.
minSize
Minimum size value in px or string (e.g. "10px", default: 12).
maxSize
Maximum size in px or string.
resize
Automatically update on resize (default: true).
onResize
Array of callbacks triggered after resize.
onRefresh
Array of callbacks triggered after any scaling update.
dev
Enable logging of scale calculation (default: false).