タイポグラフィは、活字やフォントのスタイルや外観をカバーする。フォントの重さ、フォントの傾き、文字の間隔、その他テキストの視覚的な側面を指定する。
全てのフォントが同じように作られるわけではありません。
フォントスタイルは、最低限、RobotoやNotoなどの同じ書体ファミリーのフォントを記述する共通の文字ルールのセットを表す書体、フォントの太さ（例えば、レギュラー、ボールド、または数値）、およびスタイル（レギュラー、イタリックなど）によって定義されます。これら全てと、更に予め設定された属性が組み合わさって、静的フォントと呼ばれるものが構成されます。
可変フォントは、これらの属性のいくつかを実行時に変更することを可能にし、通常は複数の静的フォントを1つのファイルに保存します。
１．書体スケール(Typographic Scale)
書体スケール(Typographic Scale)とは、アプリ内のバランス、まとまり、視覚的な多様性を提供するための、関連するテキストスタイルのセットです。
TextThemeが提供するFlutterの共通タイプスケールには、機能を示す５つのカテゴリーのテキストが含まれています。
- Display
- Headline
- Title
- Label
- Body
また、それぞれ３種類のサイズバリエーションがあります。
- Small
- Medium
- Large
上記１５種類のカテゴリーとテキストサイズの組合せは、各々１つのTextStyleで表現されます。
例（ カテゴリー × サイズ ）：
Display Small、･･･Body Medium、Body Large
上記プラットフォーム固有の文書スケールセットは、Typographyクラスに含まれています。
２．可変フォント
可変フォントで、事前定義された文書体裁（幅、太さ、傾き等の特定の軸）を制御できます。
（１）Googleフォント｢タイプテスター｣の利用
Google Fontsでは、可変フォント機能を提供するフォントが増えています。タイプテスターを使ってオプションの範囲を確認し、１つのフォントをどのように変化させるかを見ることができます。
リアルタイムで、どの軸のスライダーを動かしても、それがフォントにどのように影響するかを見ることができます。可変フォントをプログラミングする場合、FontVariationクラスを使ってフォントのデザイン軸を変更します。FontVariationクラスは OpenType フォント変数仕様に準拠しています。
３．静的フォント
Google Fontsには静的フォントも含まれている。可変フォントと同様、どのようなオプションが利用できるかを知るためには、そのフォントがどのようにデザインされているかを知る必要があります。 ここでもGoogle Fontsのサイトが役に立ちます。
（１）Googleフォント｢パッケージ｣の利用
サイトからフォントをダウンロードしてアプリに手動でインストールすることもできますが、pub.devのgoogle_fontsパッケージから直接テーマを使用することもできます。
Text(
'This is Google Fonts',
style: GoogleFonts.lato(),
),Text(
'This is Google Fonts',
style: GoogleFonts.lato(
textStyle: Theme.of(context).textTheme.displayLarge,
fontSize: 48,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.italic,
),
),（２）フォントの変更
静的フォントをプログラムで変更するには、以下のAPIを使います。
（但し、フォントがその機能に対応するように設計されている場合にのみ機能します）
- FontFeature to select glyphs
- FontWeight to modify weight
- FontStyle to italicize
- FontVariation to specify a range of values for a specific property.
FontFeature は OpenType 機能タグに対応し、指定されたフォントの機能を有効または無効にするブーリアン・フラグと考えることができます。
４．その他のリソース
参照ビデオ（https://www.youtube.com/watch/sA5MRFFUuOU）
このビデオでは、Flutterのタイポグラフィの機能の一部を紹介し、それをMaterialやCupertinoのルック＆フィール（アプリが動作するプラットフォームによって異なる）、アニメーション、カスタムフラグメントシェーダーと組み合わせています。
可変フォントをカスタマイズし、変形しながらアニメーションさせたあるエンジニアの体験談（上の動画の元となった）は、Mediumの無料記事「Playful typography with Flutter」をご覧ください。
関連する例では、カスタムシェーダーも使用しています。