Flexflex: Typeface responds to spatial requirements rather than imposing them

3 months ago 1

Flexflex was designed to be as flexible as possible: each letter can fit inside any given rectangle and continuously transform when its aspect ratio changes. In theory, it's infinitely variable. It's a sans-serif typeface, can be monospaced and follows a few constraints:

monolined (consistent thickness) and continuous,
keep it minimal, maximize symmetry and mathematical alignment,
only use quarter, half or whole circles (no diagonal lines), and only circular arcs,
no descenders nor ascenders, nothing gets out of the bounding rectangle,
each letter is independent, there is no kerning.

See website for more information and demos. This repository contains both the website and the library, flexflex.js.

The library consists of a single function, drawLetter.

Syntax: drawLetter(el, ch, x, y, w, h, col, sw, [skewAngle], [linecap], [linejoin])

Parameters:

el: The target element or context on which the letter will be drawn. Either a DOM element (<svg> or <canvas>) or a CanvasRenderingContext2D object (when working with p5.js, you can use drawingContext).
ch: The character (letter) to be drawn, case-insensitive. If the character is not a single letter, nothing is drawn, but no error message is thrown. String.
x, y: Coordinates of the top-left corner of the letter's bounding rectangle. Numbers.
w, h: Width and height of the letter's bounding rectangle. Numbers.
col: Color of the letter's stroke. Any valid CSS color value.
sw: Stroke width of the letter. The stroke is drawn on the inner side, so that all the letter stays inside the bounding rectangle, regardless of stroke width. Number.
skewAngle (optional): Skew angle applied to the letter, to slant the letter, in degrees. 0 (default) doesn't change anything. Number.
linecap (optional): Style of the end caps for the letter's strokes. Either "square" (default) or "round".
linejoin (optional): Style of the corners for the letter's strokes. Either "miter" (default) or "round".