IBM Plex Sansで英数字の見出しを作る｜可変フォントの太さを試す

今回の仕上がり

英数字の見出し「PLAY 0123456789」と得点表示を、IBM Plex Sansで組みました。太さ400と700を選んで比較できます。字形の好みや読みやすさは用途によるので、実際の大きさで見て選んでください。

入手して表示する手順

1. Google Fontsの配布フォルダで、通常体のIBMPlexSans[wdth,wght].ttfとOFL.txtを確認します。Italic版とは別です。
2. 本文下の「作例ZIPを保存」を押して展開します。元のTTFをIBMPlexSans.ttfというファイル名で同梱しています。フォント内部は変更していません。
3. example.htmlを開き、太さを400から700へ切り替えます。読込成功の表示と文字の変化を確かめます。

CSSではfont-familyに付けた名前を@font-faceと表示側で合わせます。font-weightの範囲を100 700として宣言し、表示側で400または700を選んでいます。日本語の本文にはこの英数字の作例とは別の書体が使われます。ページ全体の日本語フォントを置き換える例ではありません。

利用条件と確認範囲

出典はIBMの公式プロジェクトとGoogle Fontsの配布データ。フォントはSIL Open Font License 1.1です。著作権表記とライセンスを保って埋め込み・同梱でき、フォント単体の販売は禁止されています。改変版の予約名「Plex」の扱いなど、詳しい条件は同梱のOFL全文を確認してください。

自作HTMLはCC0、フォントはOFLのままです。今回は元のファイルを使い、サブセット化や形式変換はしていません。日本語文字の収録や全ウェイトの表示を確認したものではありません。ZIP内のフォントとHTMLを別々に移動すると読み込めなくなるので、同じフォルダに置いてください。

操作できる作例

作例を別画面で開く · 作例ZIPを保存