Variable fonts axis demo

Hover the headlines for an animated demo of the axis transforms. (I couldn't fin a font to craft a working demo for the ones on a dark red background, and the ones showing a GIF were too hard to demo live)

SLNT - SLANT (same as ital)

Adjust the style from upright to slanted, also known to typographers as an 'oblique' style. Rarely, slant can work in the other direction, called a 'backslanted' or 'reverse oblique' style.

The pope typically juggles pretty well

opsz - Optical size

Adapt the style to specific text sizes. At smaller sizes, letters typically become optimized for more legibility. At larger sizes, optimized for headlines, with more extreme weights and widths. In CSS this axis is activated automatically when it is available.

The pope typically juggles pretty well

wght - Weight

Adjust the style from lighter to bolder in typographic color, by varying stroke weights, spacing and kerning, and other aspects of the type. This typically changes overall width, and so may be used in conjunction with Width and Grade axes.

The pope typically juggles pretty well

wdth - Width

Adjust the style from narrower to wider, by varying the proportions of counters, strokes, spacing and kerning, and other aspects of the type. This typically changes the typographic color in a subtle way, and so may be used in conjunction with Width and Grade axes.

The pope typically juggles pretty well

YTAS - Ascender Height

Adjust the style from narrower to wider, by varying the proportions of counters, strokes, spacing and kerning, and other aspects of the type. This typically changes the typographic color in a subtle way, and so may be used in conjunction with Width and Grade axes.

The pope typically juggles pretty well

CASL - Casual

Adjust stroke curvature, contrast, and terminals from a sturdy, rational Linear style to a friendly, energetic Casual style.

XTRA - Counter Width

A parametric axis for varying counter widths in the X dimension.

The pope typically juggles pretty well

CRSV - Cursive

Control the substitution of cursive forms along the Slant axis. 'Off' (0) maintains Roman letterforms such as a double-storey a and g, 'Auto' (0.5) allows for Cursive substitution, and 'On' (1) asserts cursive forms even in upright text with a Slant of 0.

YTDE - Descender Depth

A parametric axis for varying the depth of lowercase descenders.

The pope typically juggles pretty well

YTDE + Ytas

Animating lowercase descenders and ascenders

The pope typically juggles pretty well

EHLT - Edge Highlight

Controls thickness of edge highlight details.

Yeah!

ELGR - Element Grid

In modular fonts, where glyphs are composed using multiple copies of the same element, this axis controls how many elements are used per one grid unit.

ELSH - Element Shape

In modular fonts, where glyphs are composed using multiple copies of the same element, this axis controls the shape of the element

Handjet

EDPT - Extrusion Depth

Controls the 3D depth on contours.

Oh Yeah!
Oh Yeah!

YTFI - Figure Height

A parametric axis for varying the height of figures.

The pope typically juggles pretty well with 197 balls

FILL - Fill

Fill in transparent forms with opaque ones. Sometimes interior opaque forms become transparent, to maintain contrasting shapes. This can be useful in animation or interaction to convey a state transition. Ranges from 0 (no treatment) to 1 (completely filled).

FLAR - Flair

As the flair axis grows, the straight sans serif terminals develop a swelling, and joints become more idiosyncratic. Originally referring to the flaring of the stems, Flair stands for style and panache.

The pope typically juggles pretty well

GRAD - Grade

Finesse the style from lighter to bolder in typographic color, without any changes overall width, line breaks or page layout. Negative grade makes the style lighter, while positive grade makes it bolder. The units are the same as in the Weight axis.

The pope typically juggles pretty well

HEXP - Hyper Expansion

Expansion of inner and outer space of glyphs.

The pope typically juggles pretty well

YTLC - Lowercase Height

A parametric axis for varying the height of the lowercase.

The pope typically juggles pretty well

MONO - Monospace

Adjust the style from Proportional (natural widths, default) to Monospace (fixed width). With proportional spacing, each glyph takes up a unique amount of space on a line, while monospace is when all glyphs have the same total character width.

XROT - Rotation in X

Letters rotate around the X axis.

The pope typically juggles pretty well

YROT - Rotation in Y

Letters rotate around the Y axis.

The pope typically juggles pretty well

ROND - Roundness

Adjust shapes from angular defaults (0%) to become increasingly rounded (up to 100%).

The pope typically juggles pretty well

SOFT - Softness

Adjust letterforms to become more and more soft and rounded.

The pope typically juggles pretty well

WONK - Wonky

Toggle the subsitution of wonky forms. 'Off' (0) maintains more conventional letterforms, while 'On' (1) maintains wonky letterforms, such as leaning stems in roman, or flagged ascenders in italic. These forms are also controlled by Optical Size.

XOPQ - Thick Stroke

A parametric axis for varying thick stroke weights, such as stems.

The pope typically juggles pretty well
The pope typically juggles pretty well

YOPQ - Thin Stroke

A parametric axis for varying thin stroke weights, such as bars and hairlines.

The pope typically juggles pretty well
The pope typically juggles pretty well

YTUC - Uppercase Height

A parametric axis for varying the heights of uppercase letterforms.

The pope typically juggles pretty well

YEAR - Year

Axis that shows in a metaphoric way the effect of time on a chosen topic.

The pope typically juggles pretty well

EXPOSURE

https://www.205.tf/look/exposure/

The pope typically juggles pretty well
The pope
The pope
Positive or Negative?
Zoom
INLINE AXIS
SLABED!

🎉

Vincent Bidaux @vinchubang

December 16th 2022

Welcome to Flow Party!

Fonts & Unicorns

Clone this website (soon)

→ Join us on the FigJam

Typographic vertical rhythmColor fontsLayered fontsFont featuresVariable fonts axis demoVariable font IX demo