タイポグラフィ

Typography

目的・詳細

Myセブン銀行アプリを構成する基本要素であるタイポグラフィを定義しています。 フォントはアプリ内で使用する実装・リリース用とバナー等で使用するクリエイティブ用があり、コンポーネントや使用シーンによって文字間、行間等を設定しています。

フォント

可読性や視認性を高めるためにサンセリフ体とします。 実装用はアプリ内での使用、クリエイティブ用はバナーやポップアップでの使用を想定しています。 フォント フォント フォント フォント フォント フォント フォント フォント

Primitive token

Myセブン銀行アプリ内で使用可能なフォントトークンです。 line-heightは基本1.7を使用しますが、レイアウトの都合に合わせて1.5に変更することも可能です。 ※文章内にリンクが含まれる際はline-heightが必ず1.7になります。
また、コンポーネント内のラベルであればline-height1.0~1.5、letter-spacing0.25~4を許容します。 ※テキストのみの場合を除く
プリミティブトークン プリミティブトークン プリミティブトークン プリミティブトークン

Semantic token

特定のコンテキストに関連したフォントトークンです。トークンの意図した目的を伝えるのに役立ちます。テキストリンクのweightは、使用される文言の都合に合わせてRegularにすることを許容します。 セマンティックトークン セマンティックトークン