0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Affinityでバリアブルフォントをいじろう

Last updated at Posted at 2025-12-22

GoogleがGoogle Sans(旧Product Sans)をバリアブル化し、Google Sans Flexとしてリリースした。

一方、Affinityは長らくバリアブルフォント(Variable Fonts)が使えなかったが、2.5でようやく対応。Affinity by Canvaにも引き継がれている。

Affinityのフォントリスト機能には特定のフォント形式をフィルタする機能があり、一番右側のOvアイコンがバリアブルフォントのみ表示となっている(ツールチップは変数と直訳されているが)。
af_vf1.png

Google Sans Flexのバリアブル要素

Google Sans Flexは単にウェイトを変化させるだけのバリアブルフォントではなく、変化可能な要素は6つにも上る。
AffinityではVアイコンをクリックすると表示されるパネルで操作する(これも一部直訳が目立つ)。
af_vf2.png

各要素を見ていこう。

OpticalSize

Google Fontsによる説明は以下の通り。

活字の頃は小さい文字サイズと大きい文字サイズでデザインを変えることがあった(特にローマン体は顕著で、例えば小さい文字サイズに比べて大きい文字サイズの方が横線を細く縦線を太くした)。それをデジタルフォントでも再現したものである。
Google Sans Flexはサンセリフ体であるため、主に文字間や文字の太さの変化という形でOpticalSize要素を表現している。
af_vf3.png

Width(幅)

幅広・幅狭の設定。

単に幅が変化するだけではなく、幅狭にするとコンデンス体やコンプレス体と呼ばれる角張った字形に変化する。
af_vf4.png

Weight(重さ)

説明するまでもないだろうか。
Google Sans Flexでは1~1000の間で値を変化させることができる。

af_vf5.png

なお、Weight(と斜体の1段階)に関してのみ、名称から選ぶことも可能である。
af_vf12.png

Grade(GRAD)

Google Fontsの説明では「文字幅、文字間隔、カーニングに影響を与えることなく、線の太さ(またはその他の形状)を変更できます(ウェイトの変更とは異なります)。つまり、改行やページレイアウトには影響しません」とある。
上記Weightのサンプルと比べればわかりやすいだろうか。
文字幅を変化させない分、線の太さを大きくは変えられない。
af_vf6.png

Roundness(ROND)

これはわかりやすいだろう。線端の丸みの度合いを変化させることができる。
いわゆる普通のサンセリフ体(角ゴシック)と、Rounded(丸ゴシック)は欧文でも別々に売られていることが多いが、これだと1つのフォントファイルで両方賄えてしまう。すぐれもの。
af_vf7.png

Slant(斜線)

af_vf8.png

いわゆる斜体ではあるが、単純に傾けているだけでなく、補正も加えられている(特に左上や右下のカーブ)。
Affinity側の斜体機能(Shear)と比較すると以下の通り。
af_vf9.png

OpenTypeの機能も合わせて使おう

最後に、バリアブルの機能ではないが、タイポグラフィパネルも見ておこう。
ここにはOpenType関連の字形が色々入っている。
af_vf10.png
af_vf11.png

合字、コンテキスト代替(12:34と入力すると時刻とみなしてコロンが上がる等)、スラッシュ付きゼロ、aやgの字形、等幅数字(表形式)、上付き・下付き、分数、スモールキャップス等の字形切り替えができる。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?