Textblock

A javascript tool for adjusting size, leading, and grades to cast continuously responsive typography. It works over your current CSS as a progressive enhancement.


1
Add textblock.min.js to the foot of your document
2
Target elements in a Textblock( ) script using js notation
3
Adjust font size and line heights across viewport widths

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

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

Textblock([{
 target: ".some-element"
}]);

Parameters

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 minVariableGrade / maxVariableGrade 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,
 minFontSize: 1.9,
 maxFontSize: 2.6,
 minLineHeight: 1.33,
 maxLineHeight: 1.25,
 container: "self",
 units: "rem",
 minVariableGrade: 366,
 maxVariableGrade: 300
}]);

Multiple Elements with Different Settings

Textblock([
 {
  target: ".some-class",
  minFontSize: 1.9,
  maxFontSize: 2.6
 },
 {
  target: ".another-class",
  minFontSize: 2.4,
  maxFontSize: 3.6,
  container: "self",
  minVariableGrade: 450,
  maxVariableGrade: 400
 }
]);

Sign up for Email Updates

Get type news from Glyphic. Your info will be safe and we’ll never spam.

Open Source

Textblock is released open source and licensed under MIT.


The Typographic Desk Reference, 2nd Ed.

The Typographic Desk Reference (TDR) is an encyclopedia, listing countless entries on the typographic arts.
 

 

The Type Anatomy Letterpress Print, Limited Run

A handmade print of the anatomy diagram from the Typographic Desk Reference, printed four colors, offset & letterpress, in a limited edition of 333.
 

 


Textblock
Copyright © 1999 Glyphic
 
Concept by and made usable by Travis Kochel
 
Made with plain/vanilla JavaScript meaning there are no dependencies.
 
textblock.min.js <= 2 kilobytes.
 
Website designed by Glyphic
 
www v0.13.15