Continuous Typography Tester

Screenshot of user interface with a large paragraph of dummy text on the left, and a series of function graphs on the left

awe­somephant.github.io/​con­tin­u­ous-ty­pog­ra­phy

I fi­nally got around to writ­ing a demo of what a de­sign tool for con­tin­u­ous ty­pog­ra­phy might look like. Change the width of the view­port on the right, ma­nip­u­late the graphs on the right, and ob­serve how the para­graph changes.

The tool lets shape a sam­ple para­graph by defin­ing its ty­po­graphic prop­er­ties as lin­ear func­tions of the view­port width. This is a broad sim­pli­fi­ca­tion of the ideas I talk about above - ide­ally, you would­n’t be con­strained to a sin­gle func­tion type and a sin­gle in­put vari­able. But I think it’s enough to prove the point that a con­tin­u­ous ap­proach makes it pos­si­ble to pro­duce ty­pog­ra­phy that is cor­rect (whatever that might mean in a given ap­pli­ca­tion) across the whole range of whichever in­put pareme­ters you’re con­sid­er­ing.

I de­cided not to have the tool out­put CSS in its first it­er­a­tion, though it would tech­ni­cally be pos­si­ble to repli­cate the func­tions it uses with a com­bi­na­tion of me­dia queries, calc() de­c­la­ra­tions and vw units. But I’m more in­ter­ested in con­tin­u­ous ty­pog­ra­phy as a de­sign ap­proach than its tech­ni­cal im­ple­men­ta­tion, so I just cal­cu­late each func­tion’s cur­rent value in Javascript and ap­ply the re­sult as an in­line style. I might change that if a more el­e­gant im­ple­men­ta­tion lands in CSS.

The tool uses the freshly-re­leased Source Serif 4 by Frank Grießhammer as a test font, mostly be­cause it has an axis for op­ti­cal size that’s use­ful here.

Play with the tool here, or read more about its mo­ti­va­tions.