【バリアブルフォント】Roboto Flex で使えるパラメーターまとめ

Google Fontsにあるバリアブルフォント Roboto Flex について、利用可能なパラメーターとその意味を調べてまとめました。

デモ

※このデモでは、基本的に font-optical-sizing はauto にしてあります。

バリアブルフォントをCSSで操る基本

バリアブル（可変）フォントは、CSSで文字の形を柔軟に変化させることができるフォントです。

CSSでは主にfont-variation-settigs を使って文字の形を制御します。

font-variation-settigs

パラメーター名とその値を指定することで、文字の見た目を調整します。

利用可能なパラメーターはフォントによって異なります。

指定の例

        font-variation-settings:
                "slnt" ＜数値＞,
                "wdth" ＜数値＞,
                "XTRA" ＜数値＞,
                "YTAS" ＜数値＞,
                "YTDE" ＜数値＞,
                "YTFI" ＜数値＞,
                "YTUC" ＜数値＞,
                "YTLC" ＜数値＞,
                "YOPQ" ＜数値＞,
                "XOPQ" ＜数値＞,
                "GRAD" ＜数値＞,
                "wght" ＜数値＞;

※Roboto Flexの場合、下記以外 “opsz” を指定可能ですが、Google Fontsでは font-optical-sizing で none または auto を設定することをおすすめしているようなのでこの記事では省略します。

特徴

パラメーターのうち1つでもパラメーター名を4文字以上にしたり、値に数字以外を入力したりしてしまうと、font-variation-settingsの行全体が機能しなくなります。

その他

font-weight

少なくともGoogleFonts系のバリアブルフォントでは font-weightでも太さを柔軟に変化できます。

font-variation-settingsで指定する場合は “wght” を使います。

font-optical-sizing

文字のサイズに合わせて文字の形を変えるか、切り替えずに標準字形のままにするかを制御できます。

デフォルトは auto （文字のサイズに合わせて文字の形を変える）です。

Roboto Flexの場合、font-optical-sizing を none にした状態と、font-variation-settingsで “opsz” 14 にした状態とでは、見た目が同じになります。

font-stretch

condensed などの字形を持っているフォントに対して使うと、フォントの字幅を変えることができます。

バリアブルフォントに対して使うと、文字幅を柔軟に変化できます。

font-variation-settingsで指定する場合は “wdth” を使います。

※CSSの仕様上は font-width にプロパティ名が変わっていますが 2025年2月時点のブラウザの実装が font-stretch なので font-stretchのまま記載します。

Roboto Flex で使える font-variation-settigs のパラメーター名

パラメーター名は4文字のアルファベットで対応する値の部分には数字が入ります。

ここでは、Roboto Flexで利用可能なパラメーターを紹介します。

slnt ：傾斜

デモ

数値を小さくすると、文字に傾斜が付きます。

font-style:italic に似ていますが、角度の付き方は必ずしも一致しません。

wdth ：文字の幅

デモ

数値を大きくすると文字の幅が広くなります。

font-stretch（CSS仕様上はfont-width）と同じような働きです。

XTRA：文字の中の空間の幅

デモ

数値を大きくすると、文字の内側の空間（いわゆる「ふところ」）の幅が変わります。

同等の文字幅になるようにwdthを調整したものと比較すると、xtraで設定したものの方が文字の中の空間を中心に変化していることが分かります。（デモの「比較用：”wdth” 42」をご参照ください）

YTAS：アセンダの高さ

デモ

数値を大きくすると、アセンダ（小文字のエックスハイトの上に飛び出す部分）が高く（長く）なります。

YTDE：ディセンダの深さ

デモ

数値を小さくすると、ディセンダ（小文字のベースラインより下に飛び出す部分）が深く（長く）なります。

YTFI：数字の高さ

デモ

数値を大きくすると、数字の高さが高くなります。

YTUC：大文字の高さ

デモ

数値を大きくすると、大文字の高さが高くなります。

YTLC：小文字の高さ

デモ

数値を大きくすると、小文字の高さが高くなります。

前述の「YTFI（数字）」「YTUC（大文字）」とこの「YTLC」を同じ数値にそろえると、大文字・小文字・数字のすべての高さを一定することもできます。（デモの「比較用：”YTLC” 570, “YTUC” 570, “YTFI” 570」をご参照ください）

YOPQ：文字の線の細い部分（主に横線）の太さ

デモ

数値を大きくすると、文字の線の細い部分（主に横向きの線）が太くなります。

XOPQ：文字の線の太い部分（主に縦線）の太さ

デモ

数値を大きくすると、文字の線の太い部分（主に縦線）が太くなります。

GRAD：線の太さ

デモ

数値を大きくすると、文字の線が太くなります。

“wght”（font-weight）とは異なり、文字の字幅は広がりません。

※Roboto の 場合は font-weight を変更しても字幅は変わりませんが、Roboto Flex では “wght”（font-weight）によって字幅が変わります。

wght：文字の太さ

デモ

数値を大きくすると文字が太くなります。

少なくとも Google Fonts の場合は font-weight と同じ働きをします。

補足：Google Fonts から読み込んだフォントが変化しない？

Google Fonts からフォントを読み込む場合、そのままでは意図通りに動作しない可能性があります。

font-variation-settings を使って変化させたいパラメーターについては「Full axis」を選んでから、Embed codeをコピーするようにしてください。

※ 変化させる予定がないパラメーターは「One value」にしておく方が、読み込むファイルサイズとしては小さくなるでしょう

今回のデモでは以下のコードでRoboto Flex を読み込んでいます。

<link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,slnt,wdth,wght,GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC@8..144,-10..0,25..151,100..1000,-200..150,27..175,323..603,25..135,649..854,-305..-98,560..788,416..570,528..760&display=swap" rel="stylesheet">

まとめ

• バリアブル（可変）フォントは、CSSで文字の形を柔軟に変化させることができるフォント
• CSSでは主にfont-variation-settigs を使って文字の形を制御する
• 使えるパラメーターはフォントによって異なる
  • Roboto Flexは使えるパラメーターがたくさんある

デモを見たり、実際に触ったりして遊んでみてください！

デモ