Variable Fontsとコードで呼吸させる：実験的タイポグラフィの実践

文字に感情や動きを宿らせたい。けれど、何から着想し、どの技術を組み合わせれば有機的なタイポグラフィを作れるのかわからない。そんな戸惑いに向けて書きました。結論から言うと、確かな足がかりになるのは Variable Fonts の「軸」です。太さや幅を連続した数値として扱えば、文字はコードで呼吸させられる生きた素材になります。本記事では、着想の置き方、軸のパラメータ化、JavaScriptでの具体的な設計から参照したい先駆者たちの系譜までを順にたどります。

読む記号から、感じる造形へ：ジェネラティブ・タイポグラフィの眼差し

文字は普段、意味の通り道として扱われます。目は形を素通りして語義に届き、造形が意識に上るのは読みづらいときくらいです。ジェネラティブタイポグラフィの出発点は、この順序を少しだけ入れ替えることにあります。意味より先に、形が見えてくる状態をつくるのです。

ここで言う「ほどける」は、文字を壊すことではありません。「あ」の曲線が太くなったり細くなったりして、ある瞬間に別の字のように見える。その揺らぎを読者が知覚できる範囲に収めるのが、ジェネラティブな文字の難しさであり面白さです。判読性の境界線上を行き来するとき、文字は記号と図形の中間で震えます。

着想を得るなら、まず動詞を決めてみてください。「膨らむ」「ためらう」「ほどける」「沈む」のような言葉を先に置くと、動かすべきパラメータが見えてきます。技術から入るより、感情や身体感覚を一語で言い当てるほうが、結果として作品に一貫性が出ます。

可変フォント（Variable Fonts）がもたらした「軸」の解放とパラメータ化

Variable Fonts は、2016年に発表された OpenType 1.8 の拡張仕様です。Adobe、Apple、Google、Microsoft が共同で策定しました。1つのフォントファイルの中に、太さや幅といった複数のデザイン軸が連続的に含まれています。登録済みの軸には、太さの wght、幅の wdth、傾きの slnt、イタリックの ital、光学サイズの opsz があります。ブラウザでは CSS の font-variation-settings や font-weight の範囲指定で操作できます。

重要なのは、文字の見た目が「Regular か Bold か」という離散的な選択から、連続した数値へ変わったことです。数値になれば、あとは時間、座標、音量、乱数など何とでも結びつけられます。クリエイティブコーディングにとって、これは文字がようやく変数になったことを意味します。

軸の効き方はフォントごとに違います。使えるフォントの軸を事前に確かめるには、Axis-Praxis や v-fonts.com のような、ブラウザ上で軸を動かして試せるサイトが便利です。作品の方向性は、スライダーを触っているうちに固まることも多いでしょう。

注意点が2つあります。日本語の可変フォントは選択肢が限られ、軸も wght のみのものが中心です。ファイルサイズも大きくなりがちです。表現の核を日本語にするなら、軸の自由度よりも、字面そのものの動かし方に重心を移す発想が必要になります。欧文の可変軸と日本語の字を重ねる構成も選択肢のひとつです。

マウス、音、時間と同期する：JavaScriptで設計する文字の有機的な振る舞い

Canvas に文字を描く方法もありますが、軸の操作にはDOM要素のほうが素直です。1文字ずつ span に分け、それぞれに font-variation-settings を与えます。p5.js はDOM補助関数を持っているので、入口として使いやすい構成です。

let letters = [];

function setup() {
  noCanvas();
  const box = createDiv().style('font-family', 'MyVF').style('font-size', '10vw');
  for (const ch of 'ほどけるlettersの海') {
    letters.push(createSpan(ch).parent(box));
  }
}

function draw() {
  const base = map(mouseX, 0, windowWidth, 100, 900, true);
  letters.forEach((el, i) => {
    const wave = sin(frameCount * 0.03 + i * 0.6) * 200;
    const w = constrain(base + wave, 100, 900);
    el.style('font-variation-settings', `"wght" ${w}`);
  });
}

MyVF は @font-face で読み込んだ可変フォントの名前です。軸の範囲は、使うフォントの実際の値に合わせてください。ここでは、マウスのX座標が全体の太さを決め、各文字が位相をずらしながら波打ちます。位相のずれが「有機的」に感じられる最小の仕掛けです。同じ値で一斉に動くと機械的に見え、少しずらすだけで群れや呼吸のように見えてきます。

入力は他にも広げられます。p5.sound の AudioIn と getLevel() で音量を取得し、太さに写せば、声に反応する文字になります。時間なら、noise() でゆるやかな揺らぎを作ると、周期性の目立つ sin より生き物らしくなります。複数の軸を同時に動かすときは、軸ごとに速度を変えるのがコツです。揃えすぎると単なるアニメーションに見えます。

ブラウザの描画負荷には注意してください。多数の文字で軸を毎フレーム更新すると、レイアウト再計算が重くなる場合があります。文字数を絞る、更新頻度を落とす、あるいは WebGL 側へ移してアウトラインを扱うといった判断が必要です。p5.js の textToPoints は輪郭を点列にできますが、可変軸の補間とは別の工夫が要るので、方法を選ぶ段階で試作して確かめてください。また、prefers-reduced-motion を尊重し、動きを抑える選択肢を用意しておくと、インタラクティブアートとして多くの人に開かれた作品になります。

参照したい先駆者たちの実験：ジョン・マエダから現代のWebエクスペリメントまで

動く文字をコードで扱う系譜をたどるなら、ジョン・マエダの仕事は外せません。MITメディアラボで、数値を使ったデザインを探究しました。1990年代の Reactive Books のシリーズでは、マウスの動きに反応して図形や文字が変化します。また、プログラミング入門として Design By Numbers を生み出しました。彼のもとで学んだ Ben Fry と Casey Reas が2001年に Processing を始めたことは、p5.js へつながる大きな流れです。

声と文字の関係を探った作品には、Golan Levin と Zach Lieberman による Messa di Voce (2003) があります。声の特徴が視覚的な形へ変わるインタラクティブな作品です。文字そのものを動かす作品ではありませんが、発話と造形の間にある感情の通り道を見せてくれます。Zach Lieberman はその後も、コードによる動きの小さなスケッチを継続的に公開してきました。

現代のWebでは、可変フォントを使った実験が個人のポートフォリオやフォントファウンドリの特設ページに数多く見られます。スクロールや視線の位置で文字の太さが変わる、といった表現です。具体的な作品名を挙げる前に、気になるサイトのソースを開き、font-variation-settings がどう使われているか確かめてみてください。制作者の意図は、コードの書き方にも出るものです。

言葉の意味と形態のあいだで：静かに息づく文字の詩学

文字を動かすときに最後に残る問いは、動きが意味に寄り添うのか、意味に逆らうのかです。「沈む」という文字が細く沈んでいけば、意味と形は重なります。逆に「静寂」が激しく膨張すれば、読者の中に小さな違和感が生まれます。どちらも正解になりえますが、選んだ理由が作品の主題になります。

作品の速度も重要です。速く激しい動きは目を引きますが、読む時間を奪います。ゆっくり揺れる文字は、読み終えたあとも視界の端に残り、少し遅れて意味が染みてきます。可変フォントの連続性は、この遅さと相性がいいのです。太さが1フレームごとに数値で微かに変わっていくだけで、文字はそこにとどまりながら息をしているように見えます。

最初の一歩は、短い一語と1つの軸から始めてください。そこにマウスか時間を1つだけ結びつけ、動かしながら、自分の言葉がどう感じられるかを観察します。技術はそのあとで追いつきます。文字がほどけていくのを見つめる時間そのものが、制作の核になるはずです。