VariableWeightText

Options

axis wght

The variation axis to drive, spelled as the font declares it. Four lower-case letters for a registered axis: wght for weight, wdth for width, slnt for slant, opsz for optical size. A custom axis is upper case. Name one the face does not have and nothing happens, with no error anywhere.

rest 400

1 to 1000

Where the axis sits with the cursor far away, which is to say what the text looks like to everybody who never moves a mouse over it. It should be the weight you would have set anyway.

peak 700

1 to 1000

Where the axis goes directly under the cursor. Stay inside the range the face actually has: asking for 900 of a 400 to 700 font clamps to 700, so the effect quietly gets weaker as the cursor arrives rather than stronger.

reach 0.22

0.02 to 1, good: 0.12 to 0.35

How far the hand reaches, as a share of the element's width. Relative, so the same setting works on a heading and on a column. Wide reaches read as the whole line breathing; narrow ones as a finger pressing on one letter.

shoulder 2.4

0.5 to 8, good: 1.6 to 4

Shape of the falloff. 1 is linear, which reads as a triangle of bold sliding along the line and is the giveaway of every version of this. Higher keeps the peak tight and lets it fall away quickly, which is what pressure from a nib actually does.

ease 0.22

0.02 to 1

How fast the letters follow the hand, per frame. At 1 they are welded to the cursor, which looks like a bug rather than like ink. Paper takes a moment to give.

steady true

true · false

Hold each character in a box as wide as its heaviest form. On, always, unless the face has no width change across the axis: a slant axis does not need it, and a weight axis absolutely does. Turn it off once on a paragraph to see why it is here.

tracking 0.012

0 to 0.1 em

Extra tracking. A little room stops the heaviest letters touching their neighbours, since every box is as wide as its own character needs and not as wide as the pair does.

What it needs

Category

Pointer, an effect

Dependencies

None at all

Browser

No WebGL

Frame budget

~0.8 ms · 0 context

Pinned to

v0.13.0

• Needs a variable font with the axis being driven. A static face ignores font-variation-settings without complaining, which is the one way this fails silently: the effect mounts, runs, and does nothing visible
• The line does not move, and that is the whole item. A weight axis changes the advance width of every glyph it touches, so a line of individually weighted letters reflows continuously as the cursor crosses it: characters shuffle sideways, the line end breathes, and anything laid out after it moves too. That is why most versions of this only ever appear on a single centred word
• Each character is measured once at the heaviest value the axis will reach, which is the widest it can ever be, and held in a box that wide with the letter centred in it. One measuring pass, and it is the difference between an effect you can put on a paragraph and one you can put on a word
• The falloff has a shoulder rather than being linear. Pressure does not fall off in a straight line from a nib, and a linear ramp reads as a triangle of bold sliding along the line
• The axis is a setting rather than a constant. Weight is the obvious one and the default, but a face with a width or a slant axis will do this just as well and only three strings change
• The value is written to one decimal place. A weight axis quantised to a tenth is finer than any face resolves, and it stops the style being rewritten every frame for a change nothing can draw
• Like every pointer effect here it eases against its own last frame, so it is deliberately not pure in t, and the recorder drives it from the scripted path in this file
• The original string stays in the accessibility tree as one label, so a screen reader reads the sentence rather than the characters
• One rect read and at most one style write per character per frame. The rects are the cost: they are read live so that a wrapped paragraph knows where its characters actually are, which is also what lets this work on more than one line
• Keep it to a heading or a short paragraph. Three hundred characters is three hundred rects a frame, and at that length the effect is a smudge following the cursor anyway