可変フォントへの移行

1. はじめに

最終更新日: 2022 年 4 月 4 日

269e1597309e5d7a.png

可変フォントを利用して UI の動的な可変性を実現しましょう。レイアウト、テーマ、ユーザー補助の応答性を向上させ、アプリを高速化できます。

学習内容

  • 可変フォントの概要
  • 可変フォントを使用してタイプをカスタマイズする方法
  • 可変フォントをデザインに適用する方法
  • Google Fonts API を使用して CSS 内で可変フォントを実装する方法

前提条件

このラボは、デザインに関する以下の基本的なコンセプトがベースとなっています。

  • タイプスケールに関する知識
  • Figma に関する知識
  • HTML と CSS に関する基本的な知識

必要なもの

2. 始める

セットアップ

まず、Designlab Figma ファイルにアクセスできるようにする必要があります。このラボで必要なものはすべて Figma ファイル内にあります。ファイルをダウンロードしてインポートするか、Figma コミュニティからファイルを複製してください。

まず、Figma にログインするかアカウントを作成します。

Figma コミュニティからファイルを複製する

Migrating to Variable fonts（可変フォントへの移行）ファイルにアクセスするか、Figma コミュニティで「Migrating to Variable fonts」（可変フォントへの移行）を検索します。右上の [Duplicate]（複製）をクリックして、ファイルのコピーを作成します。

2cb1a5f77aab6012.png

ファイル レイアウト

ファイル全体を確認すると、ファイルは自己完結型で、先頭に概要があることがわかります。各セクションは、相互にリンクされたアートボードの行に分かれています。セクションにはいくつかの基本コンセプトが記載されていて、その後には演習があります。セクションと演習は一体であり、順番に完了する必要があります。

この Codelab では、これらのコンセプトと演習について詳しく説明します。新しい Material You 機能について詳しく学ぶことができる Codelab も併せてご覧ください。

まず、Intro（イントロ）アートボードを使用します。アートボードを順番どおりまとめてリンクしているボタンがあります。リンクにアクセスするには、ボタンをクリックします。

289defd9d067d2f0.png

可変フォントを確認する

作業を開始する前に、可変フォントがあることを確認する必要があります。このファイルでは Roboto Flex を使用します。これは Figma 内にすでに用意されているか、fonts.google.com からダウンロードできます。

3. 可変フォントの概要

可変フォントは新しい革新的なフォント形式で、ユーザーはそのタイプとアイコンを制御できます。Roboto Serif と Roboto Flex は可変フォント テクノロジー用に新たに作成された新しいタイプフェイスで、いずれにも幅広い軸があります。64c74a7d7844423.png

美的表現と軸

デザイナーは、レギュラー、太字、イタリックなどの古い固定的なスタイルに制限されなくなります。可変フォント内の可変要素は、軸またはインスタンスによって制御されます。タイプデザイン内の可変要素は、ユーザーが制御可能な軸に割り当てることができます（タイプ デザイナーが選択した場合）。一般的な軸としては、イタリック、光学サイズ、傾き、ウェイト、幅があります。これら 5 つは CSS に登録されている軸です。

利点

可変フォントを使用すると、1 つのフォント ファイルで複数のスタイルを提供できるため、ウェブサイトをより持続可能、コンパクト、高速にすることができます。また、デザイナーはより表現力豊かな制御が可能になります。

77346d3812d79acc.png

4. デザインで可変フォントを使用する

軸を変更する

利用できるすべてのパラメータ（または軸）とその効果を見ていきましょう。右側でタイプを選択し、[Type Details]（タイプの詳細）モーダル（詳細アイコン）を開いて、軸のスライダーを開き、各パラメータを調べます。

  1. Weight（ウェイト）は文字の太さを定義します。ストロークの太さの全体的、継続的な範囲を指定します。

5f18f2f50f6dc4da.gif

  1. Width（幅）は、タイプフェイスの文字により占有される水平方向のスペースの結果的な分量です。

dddc87cccfcb47f9.gif

  1. 直立ではなく傾いたスタイルに調整できます（活版印刷では「oblique」スタイルとも呼ばれます）。まれですが、Slant（傾き）を反対方向にすることもできます。これは「逆斜体」または「reverse oblique」スタイルと呼ばれます。

1b7fbf03fcbf16dc.gif

  1. Grade（グレード）は、タイプフェイスの光学的なウェイトの第二の修飾子であり、ウェイト軸とは別のものです。ウェイトとグレードはどちらも文字の太さに影響しますが、グレードではよりきめ細かい調整が可能です。

35705cb05c8df559.gif

  1. Optical Size（光学サイズ）。特定のテキストサイズにスタイルを調整します。サイズはポイントで指定します。サイズが小さくなると、通常は読みやすくするために文字が最適化され、スペーシングやカーニングには余裕を持たせ、ストロークは太くなって細部は表現されなくなります。サイズが大きくなると、通常は見出し向けに最適化され、ストロークは細くなり、形状は細部まで表現され、ウェイトや幅の差異が際立つようになります。

ed569d469ebd40d6.gif

Figma 以外の可変フォントの軸については、可変フォントのデモをご覧ください。

5. スタイルを洗練させる

ブランドのスタイルガイドを作成する際には、タイポグラフィに関する制約を通知するためのタイプスケールを設定することがあります。可変フォントを使用する場合も、この整合性を無視してはいけません。タイプスケールの柔軟性の中でより洗練させることが可能であり（暗い背景でウェイトやグレードを大きくするなどのユースケース）、これを 1 つのファイル内で実現できます。

ecb7c0b0056fc315.png

タイプスケールは複数のフォント ファミリーで構成することができますが、ここでは 1 つのみを使用して、マテリアルのデフォルト タイプスケールの簡略版をカスタマイズします。

  1. ボディコピーを使ってタイプスケールのカスタマイズを始めてみましょう。まず、サイトのベース タイプサイズを設定し、そこから光学的に調整することできます。[Body Large]（ボディラージ）のデフォルトは 18 ポイントで、[Roboto Flex] が選択、設定されています。読みやすくするために調整するには、以前はフォントサイズとウェイトを更新していましたが、これは別のフォント ファイルを使用することでもありました。現在は、いくつかの軸を微調整するという方法があります。光学サイズ、グレード、ウェイトを調整します。
  2. 続いて Label（ラベル）を操作します。ラベルはより実用的であり、ボタンなど高さが低く小さいコンテキストで使用されます。ボタンのコンテナやチップ上でラベルを正しく表示できるように、グレードを光学的に調整します。
  3. Title（タイトル）、Headline（見出し）、Display（ディスプレイ）を洗練させる作業を続けて行います。この 3 つはすべて、ページタイトルやセクションなど、長さが短くて強調の度合いが中～高程度のテキストに使用します。Headline と Display は、サイズと強い強調により、表現力を高めることができます。ここですべての軸を色々と試してみてください。
  4. タイプを選択した状態で 4 つのドットと追加（+）をクリックして、テキスト スタイルを設定します。これにより、一貫性のある再利用可能なタイプ設定を実現します。

マテリアル テーマビルダーを使用するか、M3 デザインキットを複製することによって、デフォルトのマテリアル タイプスケールを Figma スタイルとして生成できます。

6. UI に適用する

タイプスケールをセットアップしたら、それを UI 要素に適用してコードに実装しましょう。可変フォントをどのように使用すれば表現力と読みやすさを高めることができるかを考慮してください。前回の演習で Figma スタイルをセットアップした場合は、それらを適用してスタイルの軸を更新できます。

18efaa2c7bc6ecac.png

  1. 左側の UI 要素に注目すると、最初のカードには植物の種類、説明、およびいくつかのカテゴリのタグが記載されていて、残りのカードには植物の育て方が記載されています。植物の種類は高強調にふさわしい役割があると考えられるため、「headline」スタイルを使用します。その設定の内容は、以前に「headline」として設定したものにします。「育て方」カードにもタイトルがありますが、同じように強調する必要はないため、「title」として設定します。
  2. 植物に関する詳細と育て方のコピーは「body large」に割り当てることができ、カテゴリのラベルは「label large」に割り当てることができます。
  3. さまざまな役割を試して、UI 要素とタイプスケールを調整して、適切なバランスを見つけます。

f646755b99db0161.png

7. コード内に実装する

789408aab925944f.png

CSS を使用してコード内に可変フォントを実装するのは、フォント配信サービスを使用してフォントを読み込んで CSS プロパティを使用してカスタマイズするのと似ています。

実装には基本的な HTML と CSS を使用し、MWC やフレームワークは使用しません。

Google Fonts の可変フォント

フォント配信サービスとして Google Fonts を使用すると、可変フォントを含むさまざまなフォントをウェブサイトで簡単に実装できます。

利用可能な可変フォントを探すには、fonts.google.com にアクセスします。[search] の下にある [Show only variable fonts] チェックボックスをオンにしてフィルタします。可変フォントの場合はページの下部にテスト領域があり、ファミリーで使用可能な軸ごとにスライダーを設定できます。

9ecb4721afd8faa2.png

CSS を使用してスタイルを設定する

カスタマイズできる軸の数は、すべてのフォントで同じではありません。現時点では、ウェイト、幅、傾き、イタリック、光学サイズが一般的です。

これらは、可変フォントが使用される前から存在していた基本的な CSS のフォント プロパティを使用して設定できます。これらすべてのプロパティは、2022 年 5 月現在ではまだ広くサポートされているわけではありませんが、新しいプロパティ font-variation-settings を使用すると、すべての軸を確実に設定できます。

Axes

Abbreviation

CSS property

Weight

wght

font-weight

Width

wdth

font-stretch

Slant

slnt

font-style*

Italic

ital

font-style*

Optical Size

opsz

font-optical-sizing

* font-style の傾き（slnt）とイタリック（ital）は信頼性が十分ではありません。

8. Google Fonts API を使用してインポートする

これまでは Roboto のみを使用してきましたが、fonts.google.com で利用可能なすべてのフォントをご確認ください。

この Codelab の残りの部分では Roboto のみを扱い、前の演習に基づいて以下のカードのタイプをカスタマイズします。

  1. カードサンプルの UI を含む以下のコードを、お好みのウェブ IDE にコピーしてください。
<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */

/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>
  1. 前回の演習で headline、title、body、label 向けに設定したスタイル仕様をメモします。これらに留意して、Roboto Flex のページに移動します。Figma で設定した仕様に合うようにスライダーを設定し、サイドドロワーに追加するそれぞれの要素に対してこのスタイルを選択します。
  2. ドロワー内の選択したスタイルの下で、「Use on the Web」を探します。フォントをコードに追加するには、<link> と @import の 2 つの方法があります。必要なのはいずれか 1 つだけです。ここでは @import を選択します。
  3. @import からセミコロンまでの部分をコピーし、import コメントの後のスタイルタグ内に貼り付けます。
  4. 使用するフォントは Roboto Flex のみであるため、import コードに含まれる「ファミリーを指定する CSS ルール」を追加して、font-family を呼び出すように本文を設定します。
body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

これにより、選択したフォントとスタイルセットがインポートされますが、軸の範囲を使用すると、個々のスタイルの代わりにスタイルの連続範囲を使用できます。範囲を設定するには、「..」を使用して 2 つの値を結合します（例: 100..900）。フォントのスライダーに存在する範囲のみを追加するようにしてください。このようにしないと正しく読み込まれません。

この方法は、アニメーションの遷移をスムーズにする場合や、ブラウザでテストする場合に適しています（すべての範囲が読み込まれ、ダウンロード リクエストが大きくなるからです）。

9. CSS の可変フォントのプロパティ

フォントをインポートした状態で Figma に戻って、一部の CSS プロパティをスタイルに pull し、font-variation-settings CSS プロパティを確認します。

  1. 右側のパネルで選択されている見出しの h1 から開始し、上部の [Inspect] タブを選択します。これにより、パネルがコード検査モード（デベロッパー ハンドオフ用）に切り替わります。最後のセクションがコードです。
  2. フォーマット dropdown to CSS をまだ変更していない場合は、変更します。標準の属性が使用されている場合は一覧表示され（font-weight, font-stretch, font-style, font-optical-sizing）、未登録のカスタム軸を含む下位レベルの font-variation-settings がその後に表示されます。font-variation-settings に取り掛かる前に、まず標準の属性を使用します。

Figma は、幅（wdth）には font-stretch ではなく font-variation-settings を使用します。

62fbb715711beb75.png

  1. タイプに関連するこの CSS コードをコピーし、h1 セレクタのスタイルを設定します。
h1 {
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}
  1. 「育て方」カードのタイトルのスタイルは h2 にコピーできます。ボディコピーにも同様の操作を行います（p にコピーします）。ラベルのスタイルは .label にコピーできます。

73252104c94e2053.png

10. 完了

62930ad88ed65971.png

お疲れさまでした。可変フォントを導入し、デザインでの使用法を学び、ウェブに実装しました。

ご不明な点がございましたら、Twitter の@MaterialDesign までいつでもお気軽にお問い合わせください。

その他のデザインに関するコンテンツやチュートリアルについては、youtube.com/MaterialDesign をご覧ください。