デザイナーのtakanaです。黒猫2匹を家に迎え、幸せな毎日を過ごしています。
先日IGNITIONをリニューアルし、Webフォント導入とタイポグラフィの再設計を行いました。IGNITIONはメディアサイトなので、その最も重要なUIはタイポグラフィであるといっても過言ではありません。
そこで今週のテックブログでは、テキストコンテンツを最適な状態でユーザーに届けるためにデザイナーが何を考えてどう意思決定をしたのか、実例を交えてご紹介します。
目次
書体を選ぶ
多くのWebフォントはウェイト別、スタイル別にファイルが細分化されており、その中から必要なものを選択するようになっています。日本語に比べてグリフ数の少ないラテンアルファベットですが、あまり多くのフォント読み込むとサーバへのリクエスト数が増えて表示速度が遅くなり、ユーザビリティが低下してしまうので注意が必要です。
現在IGNITIONでは以下8種類のフォントを指定しています。
- タイトルや見出し：
- Helvetica Neue Bold
- Helvetica Neue Bold Italic
- 本文
- ボタンやラベルなど装飾的なところ
- Helvetica Neue Regular
- Tablet Gothic Condensed Semibold
本文用書体には線の太さにあまり差がなく、小さいサイズでも字形を認識しやすいSkolar3というセリフ体を選定しました。線がしっかりしている書体なので、濃い背景色＋白抜き文字にした場合でも可読性が低下しづらいのもポイントです。後述しますが、多くのOpenType機能に対応しているところも◎！ただしSkolar3のイタリックは少し個性が強すぎるように感じたので、別書体のAdamant Proのイタリックを合わせました。
画面のアクセントに使う書体として、コンデンスト書体もひとつ使用しています。スクリプト体やエクステンデット体も検討しましたが、横幅を節約できる方が使う場所を選ばず、最も使い勝手が良いと判断しました。これは使用する場所が限定的なので、イタリックは含めていません。
文字組みを考える
書体が決まれば次は文字組みです。Web―特にレスポンシブサイト―は印刷物と異なり固定サイズの版面が無いため、様々なウインドウサイズでの見え方を検討する必要があります。
狭すぎず広すぎない行幅と行間
読んでいる行から次の行へ、目線の移動がスムーズになるよう行幅と行間を調整していきます。
まずは行幅。行幅が短すぎると、文章が切れ切れになり全体の流れを認識しづらくなります。反対に行幅が長過ぎると、行末から次の行頭の位置を把握しにくくなり、読んでいた位置を探すためのコストが増えてしまいます。今回は「読みやすい一行あたりの文字数は45〜75字」という値を参考にしつつも、本文に挿入される図表とのバランスも考慮して、1行あたり最大85文字前後という設定にしました。リキッドレイアウトであるためこの文字数は可変です。
行間については、使用する書体の字形―x-ハイト、アセンダ、ディセンダの大きさなど―や行幅とのバランスを考慮しつつ調整します。本文書体のSkolar3はx-ハイトが比較的大きく黒みが強めであること、行幅をやや長めにしたことを踏まえ、広めの行間を取るようにしました。
行幅と行間の最適なバランスは書体やフォントサイズ、そしてウインドウサイズによって変化するため、何度も微調整を重ねて検討していきました。今回のタイポグラフィ設計で最も時間がかかったのはこの調整だったと思います。
見出しは本文との調和を考えて
見出しは一般に、レベルが高いものから徐々に文字サイズを小さくするなどして本文とのコントラストを弱めていきます。IGNITIONでは3種類の見出しを用意しており、文字サイズや書体を変えてレベルの違いを表現しました。Mediumのように色を変えて差を出すのも素敵ですね。
marginと行間の設定も重要です。例えば段落の間にある見出しの上下marginが同じだと、その見出しが浮いてみえてしまうことがあります。見出しは上のmarginを大きく、下のmarginを小さくしましょう。また、見出しの行間が本文の行間と揃うよう調整しておくのも大切なポイントです。これが揃っていないと全体がガタついているような印象になってしまいます。
タイポグラフィのお作法とその実現方法
欧文タイポグラフィにはたくさんのお作法があります。全部を実現しようとすると目が回りそうになるのですが、ここではそのなかでもWebで気をつけたいポイントに絞り、実装方法と合わせてご紹介します。
前提
フォントのOpenType機能を活用するには、Webフォントが対応していること、そして表示するブラウザが対応していることの二点が必要です。Webフォント側の対応についてはフォントベンダーのサイトに記載がありますので、確認しておきましょう。
ブラウザの対応状況は以下のページをチェックしてください。
合字とカーニングを設定しよう
合字はfiやffなどの複数文字を綺麗につなげる機能、カーニングは文字と文字の間隔を適切に調整する機能です。これらを設定しないでいると、fが隣の文字とぶつかったり、文字間隔が不自然に広がったりして不格好に見えてしまうことがあります。
CSSではfont-variantとfont-kerningというプロパティで設定します。
|
1 2 |
font-variant: common-ligatures; /* リガチャの有無を指定する */ font-kerning: normal; /* カーニングのオンオフを指定する。normalでオン */ |
合字やカーニングの設定は、実は以下のCSS1行でも実現可能です。
|
1 |
text-rendering: optimizeLegibility |
しかしtext-renderingはこちらにあるようにSVG向けのプロパティなので、通常のテキストに使用するのは不適切と言えます。バグも多々あるようなので、IGNITIONでは指定しませんでした。
font-feature-settingsというプロパティもありますが、こちら現在では特別な場合（font-variantで実装されていない特殊な設定を実装したい場合など）を除いて非推奨となっています（参考）。
目線の動きを邪魔しない文字種
本文を読んでいると、上図のような数字の「2009」や「UNESCO」という大文字の部分が過度に目立って、視線が引っかかってしまうことがあります。こういう時に使用したいのがオールドスタイルフィギュアとスモールキャップです。
オールドスタイルフィギュアとは、下図・上のように高さが揃っていない数字のこと。この数字は小文字にとけこみやすく文章になじみやすいという特徴があります。これに対し下図・下のように高さが揃った数字はライニングフィギュアと呼ばれ、本文中でも数字が重要な意味を持つ場合（統計値など）に使用されます。
スモールキャップは小文字と同じサイズの大文字のことで、本文中で大文字が続くところ（略語や企業名など）に使用されていると美しく見えます。
これらのスタイルは以下のCSSで実現できます。
|
1 2 |
font-variant: small-caps; /* スモールキャップをオンオフする。small-capsでオン */ font-variant-numeric: oldstyle-nums; /* 数字の字形を選択する */ |
今回IGNITIONではオールドスタイルフィギュアのみ設定し、スモールキャップの実装は見送りました。スモールキャップは適用範囲をしっかりコントロールする必要があり、安易にこの機能を導入しても記事編集者（この機能を実際に使用する人）の負担をいたずらに増やすことになるかもしれないからです。このように運用段階での負担が大きくなりそうな機能については、本当に実装する必要があるのか、慎重に考えるようにしました。
まぬけ引用符に気をつけて
上図のような前後の区別のない引用符をまぬけ引用符といいます。まぬけ引用符はプログラミングやマークアップで使われているためとても馴染み深いものですが、これを文中の引用符として使用するのはナンセンス！欧文組版の世界では問題外の誤りです。
キー入力やHTML文書で記述する方法は、下表を参考にしてください。
強調したい時はイタリック！
和文では強調のために太字（bold）を使用することがよくありますが、欧文の場合でboldを使用すると「怒鳴り声」のような印象になってしまうためオススメできません（出典：欧文組版）。
本文中で強調したいところは基本的にイタリックを使用しましょう。ちなみにイタリックは強調以外にも、文献名や作品名、外国語、生物の学名、数学・音楽の記号などでも使います。イタリックや太字は用法用量を守って正しくお使いください。
奥深いタイポグラフィの世界
ということで、ユーザーに余計なストレスをかけず気持よく「読んでいただく」ために気をつけたことをまとめてみました。現在の設定でもまだまだ気になる部分は多くありますし、上記の内容以外にもハイフネーションやフォントレンダリングの設定、表示パフォーマンスなどなど……より良いWebタイポグラフィを実現するために考えるべきことはあります。
今はまだ国内で欧文のWebタイポグラフィを考える機会は少ないかもしれませんが、今後その必要性は確実に増していくと思います。今がチャンスです！
nanapiでは、世界を相手にしたい方を募集しています！