Receding text demo

[ghost]

Sentence starts at left, large size, and each character "recedes" by getting smaller and smaller opsz, then the second half of the sentence returns to large/close.

[dberlow]

This has come up again, and I'd like to know if we can simulate text in a 3d environment, including a demo where an axis or axes are tagged for variations related to size of text and depth from the user?

[ghost]

It is definitely feasible to adjust the 3D angle/perspective of a plane of text. We did this as a little Easter egg (password Eyelovefonts!) for Disney. I'm not sure if it's possible to set text on a curved "surface" using only CSS… but since we'd be adjusting the parameters of each letter individually anyway, we could probably individually "perspectivize" each letter so that it gives the desired effect.

[ghost]

First draft! https://variablefonts.typenetwork.com/examples/animation/receding-baseline

[ghost]

Didn't seem XTREME enough

[dberlow]

Agreed, that the second one is closer to the Z range I was thinking about. But the larger the Z range the more distorted the foreground letters become. The stems of l.c. "o" on the left, e.g. become obviously different and the hairlines and alignments get pretty wonky.

I think there is a combination of issues here that you've well illustrated so for.

For the purposes of projecting a line of type into 3D, I recommend Sans, like the examples I tried, and the original star wars. I think the top, Star Wars example is the best Serif can do, because each line is treated equal. Once glyphs of a line start being treated unequal, a high contrast serif probably doesn't work nearly as well as Sans, or slab serif/lower contrast serif designs.

[ghost]

Here's Roboto Delta using GRAD -0.5 to +1.

I presume it might be useful to have a font selector and a couple of sliders?

[ghost]

Added a "sphericality" slider.

[dberlow]

Very cool.

So in the straight example, pre sphericalization, you have a weight change or something happening from the edges to whatever the optimal distance of the sphere.

I guess for text: A. On a line of varying distance we need i. heavier weight, larger opsz and narrower sans at the min distances,
ii.lighter weight, smaller opsz and wider sans at the max distance. we need to define three axes to change, And adjust How steep they are changing between min distance and Max distance? B. In Successive receding rows, i. It’s pretty much the same damn thing, ii. Except that you want To adjust the weight spread according to the distant the first row is from the user, and how far the last row?

, Chris Lewis notifications@github.com wrote:

Added a "sphericality" slider.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[ghost]

Yeah currently it is just applying the grade adjustment at the beginning and not modifying it with the slider. (The axis adjustments need to be done along a regular straight line before applying the visual effect, because the adjustments may change the width of the characters and hence the angular position of each letter along the cylinder.) I can add a few more sliders for adjustment ranges and then we can tweak.

[ghost]

Moar sliderz

[dberlow]

Wahoe!