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

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

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:

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

 target: ".some-element"


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

 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

  target: ".some-class",
  minWidthFontSize: 1.9,
  maxWidthFontSize: 2.6
  target: ".another-class",
  minWidthFontSize: 2.4,
  maxWidthFontSize: 3.6,
  minWidthVariableGrade: 450,
  maxWidthVariableGrade: 400,
  container: "self"

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.


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