フォントはウェイトを使いこなすと更に面白くなる!ウェイトが軽いフォントの効果的な使い方

ウェイトが軽いフォントを使うと、デザインに明瞭で美しく洗練された印象を与えることができます。しかし使い方を間違えると、読みにくいだけでユーザーが内容を理解することができなくなってしまいます。

軽いウェイトのフォントを効果的に使う方法、気をつけたい注意点をUX Movementから紹介します。

サイトのキャプチャ

Do's and Don'ts of Using Light Typefaces

下記はUX MovementのAnthonyの記事を意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。海外のブロガーから無断翻訳、まとめ記事の無断転載・少しだけ加えて盗用の声を聞くのでご注意ください。

見出しとボディテキストでの効果的な使い方

見出しとボディテキストはそれぞれ十分なコントラストをもっている必要があります。下の画像の一つ目はサイズで見出しとボディテキストをコントラストを調整したものですが、読みやすくするためには十分ではありません。見出しとテキストが一つにまとまってしまっています。

二つ目はカラーで調整したもので、一つ目より分かりやすくなりましたが、見出しが手前に主張しすぎてしまい、テキストが奥に入ってしまいました。また、こうした色によるコントラストは色弱の人は気がつかないかもしれません。

サイトのキャプチャ

三つ目はフォントのウェイトで調整し、これらの問題を解決したものです。上の二例よりもずっとよく見え、見出しとボディテキストがそれぞれバランスよくデザインされています。

下のように小見出しがある場合は、見出しのウェイトを少し軽くするか、小見出しのカラーを明るくして調整をします。どのスタイルがもっとも良く見えるかいろいろなコントラストを使ってみるのも楽しいです。

サイトのキャプチャ

見出しのデザインを派手すぎないようにする方法

見出しに目立つカラーを適用すると、派手になってしまい、強烈な印象を与えてしまうことがあります。これを少し押さえた感じにデザインしたい時は、フォントのウェイトを軽くすることで調整できます。
下の例は、非常にカラフルな見出しですが、強烈な印象は少なくなっていませんか?

サイトのキャプチャ

デザインにより洗練された印象を与える方法

ウェブサイトのデザインを現代風な感じにする方法の一つは、ウェイトの軽いフォントを使うことです。軽いフォントを使うことで、あなたのブランドがより洗練された印象を得るでしょう。軽いフォントを使う時は、常に読みやすさに気を配るようにデザインしてください。

サイトのキャプチャ

軽いフォントは見た目だけではありません

ウェイトの軽いフォントを使うことはテキストが読みやすくなるという見た目の効果だけではありません。ウェブページを印刷する時、契約書やチケット・クーポンなどに軽いフォントを使うとインクの量を節約することにもなります。仕事用の書類をつくる時などは軽いフォントを使うことをおすすめします。

サイトのキャプチャ

小さいテキストに軽いフォントは使わない

小さいサイズのテキストに軽いフォントを使うと、非常に読みにくくなります。もしボディテキストに軽いフォントを使うのであれば、サイズを少し大きくし、背景と強いコントラストを持つカラーを使ってください。

サイトのキャプチャ

明るい背景に軽いカラーは使わない

軽いフォントはそのままで既に軽いです。軽い背景に明るいカラーで軽いフォントを使うと非常に読みにくくなります。テキストと背景では高いカラーのコントラストがあることを確認して使用してください。
軽いフォントを使うとき、カラーのコントラストは非常に重要です。

サイトのキャプチャ

Lightより軽いThinはどのように使うべきか

フォントによっては「Light」より更にかるい、「Thin」や「Extra Light」など更に細く軽いウェイトをもっています。これらの細いフォントは普通サイズのボディテキストで使うべきではありません。可読性を考慮し、より大きいサイズで使用してください。

サイトのキャプチャ

軽いフォントを使いすぎない

軽いフォントはスパイスのようなもので、コンテンツのテキストを強める「ここぞという箇所で」使ってください。軽いフォントがよいからといって使いすぎると、その効果は失われてしまいます。全体のバランスを見て、最もよい結果を得るよう書体のスタイルを選択してください。

サイトのキャプチャ

おわりに

ウェイトが軽いフォントは正しく使うと、あなたのデザインに美しさと洗練さを与えることができます。フォントはどんな書体を使うかにかかわらず、常にテキストの可読性を確保するのが重要です。リーダビリティはデザイナーが軽く受け止めるべきではないウェブにおける非常に大きな問題です。
あなたが軽いフォントを使う時、これらの方法を念頭においてデザインしてください。

sponsors

top of page

©2024 coliss