This page was set using Textblock. Adjust your viewport width – or device orientation – to see it in action.

Textblock calculates your setting based on minimum and maximum values for font size, line height, variable grades, and container width:

minimum / maximum font size

maximum font size minimum / maximum line height

maximum line height minimum / maximum container width

maximum container width minimum / maximum grades (variable fonts only)

To Initialize, add the element to be resized (required)

Textblock([{

target: ".some-element"

}]);

Parameters

target ( required ): The element that should be resized ".your ‑ class" , "#some - id p"

( ): The element that should be resized , minWidth : default 320

: default maxWidth : default 960

: default minWidthFontSize : default 1.0

: default maxWidthFontSize : default 1.8

: default minWidthLineHeight : default 1.33 ( unitless values only )

: default ( ) maxWidthLineHeight : default 1.25 ( unitless values only )

: default ( ) minWidthVariableGrade : A variable font weight for the small size, for example 450

: A variable font weight for the small size, for example maxWidthVariableGrade : A variable font weight for the large size, i.e. 400

: A variable font weight for the large size, i.e. container : The container width to measure. Defaults to "parent" and can alternately be set to "self" .

: The container width to measure. Defaults to and can alternately be set to . units : default "em"

For a better sense of context, set your root em to 10px with html { font-size: 62.5%; }. This makes your em units base 10 so 2.4em = 24px. But any number will do because once you start adjusting the min/max numbers, the experience is more visual than calculated. And if you prefer a more scientific approach, textblock gives you the control you need for setting systems like modular scales.

If you’re using variable fonts, the minWidthVariableGrade / maxWidthVariableGrade parameters provide a way to simulate grades (micro-variations in weight to set smaller sizes slightly bolder).

Example Including Extra Parameters

Textblock([{

target: ".some-class",

minWidth: 280,

maxWidth: 800,

minWidthFontSize: 1.9,

maxWidthFontSize: 2.6,

minWidthLineHeight: 1.33,

maxWidthLineHeight: 1.25,

minWidthVariableGrade: 366,

maxWidthVariableGrade: 300,

container: "self",

units: "rem"

}]);

Multiple Elements with Different Settings

Textblock([

{

target: ".some-class",

minWidthFontSize: 1.9,

maxWidthFontSize: 2.6

},

{

target: ".another-class",

minWidthFontSize: 2.4,

maxWidthFontSize: 3.6,

minWidthVariableGrade: 450,

maxWidthVariableGrade: 400,

container: "self"

}

]);