フォント

RobotoはSimplonが使用できない場合に使用される。システム書体がどうしても必要、あるいは必須である場合、Robotoは予備書体として許容される。

私たちのフォントとタイポグラフィ・システムの正しい使い方と間違った使い方をご紹介します。私たちのデザイン・リズムでは、コンテンツとタイポグラフィは協調性のあるダンスのようにコラボレーションします。これらのルールは、ビジュアル・タイプとコンテンツ・デザインがどのように連携し、読みやすさ、美しさ、ブランド・アイデンティティを完璧に調和させるために、お互いを補完し合うかを導くものです。ビジュアルの課題はコンテンツの変更で解決できることもあれば、コンテンツの課題にはビジュアルのソリューションが必要なこともある。

私たちのブランドは多様でダイナミックな媒体であるため、コンセプトの指針はあっても、正確な仕様は意図的にありません。印刷物やウェブデザインのような部門は、それぞれの媒体のベストプラクティスに合わせるために、これらの指針に基づいて独自の仕様を設定します。

シンプロン・ノーム・ボールドを大きなサイズで使用することで、ヒーローのような力強いステートメントが大きなインパクトを与える。

大見出しには十分なスペースをとりましょう。余計なグラフィックや他のコンテンツとの近接によって邪魔されることなく、メッセージを語らせましょう。

大きく、太く、インパクトのある文章は、3～5語以内にまとめること。句読点はフルストップやクエスチョンを使ってドラマを作ることができる。句読点とセンテンスケーシングは常に一緒に使い、不一致にならないようにする。

時には3～5文字ではない力強い文章が必要なこともあります。レギュラーウェイトのフォントを使用するが、大きめのサイズ、間隔、句読点、大文字小文字のルールは守ること。

見出しやインパクト文はサイズが大きく、ボディコピーよりもタイトな行の高さが必要です。フォントサイズに対する相対的な行の高さは100％が推奨されるが、媒体ごとに微調整できる。ただ、インパクトのあるテキストでは、行の高さを伸ばしたり、行の高さを圧縮して、ディセンダやアセンダが接触しないようにしましょう。

見出しやインパクト文はサイズが大きく、ボディコピーよりもタイトな行の高さが必要です。フォントサイズに対する相対的な行の高さは100％が推奨されるが、媒体ごとに微調整できる。ただ、インパクトのあるテキストでは、行の高さを伸ばしたり、行の高さを圧縮して、ディセンダやアセンダが接触しないようにしましょう。

サイズが小さくなると読みやすさに問題が出るので、太字は使わないでください。コンテンツには高いレベルのコントラストと秩序を保つ必要があるので、サイズ、色、ウェイトを使って読みやすいページにしましょう。

明白なことを述べるためにインパクト・トリートメントを使わないこと。オーバーライン、小見出し、近接を使い、これらのブロックを文脈に沿ったものにする。

快適な読書体験を生み出すために活字の色を使い、行動を喚起する色を使う。見出しにアクションカラーを使わないこと。ブルーはアクションやリンクに使用し、静的なタイプには使用しないでください。以下のアクセシビリティ・ガイドラインを必ず確認し、適切なコントラストを求めましょう。

できるだけ多くのお客様に一貫した体験をしていただくために、私たちは常に可能な限りアクセシブルであり続けたいと考えています。その一つの方法として、テキストのコントラスト比に関するWCAG2.1ガイドラインを遵守しています。

下に、背景色として私たちのプライマリー・パレットの最小許容コントラスト比を示します。重ねて表示されるのは、私たちのパレットから異なる許容可能な文字色です。最小」とは、AAA基準を満たすために使用できる、明るい背景色上の最も明るいテキストを特定することを意味します。この色は、シェード・グループ内の暗い色も含めて使用できます。暗い背景でテキストを明るくする場合はその逆です。

文字色が太字で表示されている場合、それはAA基準にしか達しないので、小さくて軽いフォント・ウェイトのアプリケーションでは避けるべきであることに注意してください。

推奨される文字色のみを表示しています。パープル、オレンジ、イエロー、ティールなどのアクセントカラーはおすすめできません。