Webデザインとタイポグラフィ

「Webデザインの95%はタイポグラフィである」¹、NHKやWikipediaなどの数多くの大手クライアントの情報デザインを手がけてきたデザインファーム iA (information Architects) のCEOかつデザイナーのオリバー・ライヒェンシュタインがデザイナーたちにそう呼びかけたメッセージをご存じでしょうか。タイポグラフィは書き手と読み手の間に介在して「読む」という体験をより向上させるための技術であり、あらゆるWebコンテンツの大部分は「言語」によって構成されています。

現代では膨大なコンテンツのなかで印刷物としての活字よりも、ディスプレイの文字に触れる機会や絶対量が増加してきています。印刷に比べて使用できるフォントが少なく、表現の範囲が限られているという理由により、これまでWebタイポグラフィが専門分野として注目される機会は多くありませんでした。昨今ではさまざまな領域でのデジタルトランスフォーメーションが加速しているように、デジタルデザインに関わるテクノロジーや理論も絶えず進化しています。本記事ではテクノロジーの進化とともに重要度が増していくデジタル時代におけるタイポグラフィの歴史とその可能性についてご紹介します。

タイポグラフィとは

無数の感覚と数値による技芸

タイポグラフィの理論には、数秘術、比例理論、コルビュジェのモデュロールなど、古来より一定の法則と数理体系が包含されています。タイポグラフィは個々のデザイン感覚から始まり、無数の事例と受け継がれてきた知恵によって後世に続くノウハウへと変わり、近年ではその整合性が数値によって説明可能になってきたことから学術的な研究が加速するようになりました。

グリッドを用いたデザインプロセスは、機能的で論理的、かつ美的にも優れた手段をデザイナーにもたらしました。数値による補助システムはデザインに秩序をもたらし、情報の信憑性を支え、読み手にとって視覚的な負担なく、テキストの内容の理解と記憶の補助に効果があると言われています²。一方、デザインでは視覚が理論や数値の正しさより優先されることもあるなかで、タイポグラフィの理論は錯視問題などを解決するきっかけになることがあります。

数値による比率システムは神格化され金科玉条になりやすいので、先人の素晴らしい知恵を借りながらも、最新の書体技術やデザイナー自身が得意な表現も考慮に入れながら、全体の統一感を作ることでその媒体に読み手にとってベストな体験を作り上げていく必要があります。

書体の影響力

デザイナーにとって、書体の選択は重要な仕事の一つです。媒体の持つ制約条件を理解し、文脈にフィットするフォントを選択できれば、テキストの内容に温度感や抑揚を与え、読み手の理解を手助けすることができます。 Webデザインをスピーチに例えてみましょう。会場がWebページ、テキストがスピーチ内容に相当するとして、その演説者の服装は観客にどのような印象を与えるでしょうか。

丁寧に仕立て上げられたスーツもあれば、体に合っていなくてみすぼらしく見えるものもあります。Tシャツとデニムだったとしても、清潔感があり演説者に似合うものであれば、現代的できちんとした印象を受ける場合もあります。

アメリカのタイポグラフィのコミュニケーターであるベアトリス・ウォードは1955年に刊行した自身のエッセイ『クリスタルゴブレット』にて以下のように語っています。

“People who love ideas must have a love of words. They will take a vivid interest in the clothes that words wear.”— Beatrice Warde
アイディアを愛する人は言葉も愛しているに違いない、彼らは言葉がまとう服に強烈な関心を持っている

服装によって受ける印象が大きく変わるように、文章もその書体によって大きく印象を変えることもできます。書体は言葉にとっての服のようなものであり、服装がその人のセンスや好み、雰囲気を表すように、書体は特定の地域や時代感などを読み手に連想させることもできます。また別の観点で、多感覚タイポグラフィのサラ・ヒンドマンの研究により、書体の選択が料理の味にも影響を及ぼすことも実証されています。同じジェリービーンズでも、その説明テキストに丸みを帯びたフォントを採用すると被験者はより甘く感じ、固く尖ったフォントを採用すると酸っぱく感じる結果が出たそうです。これは扁桃体の機能として、経験を通じて印象と感覚の関係性が脳に保持され、繰り返されるたびに強化されていくことによって起こることが知られています。書体の選択は単に情報を伝えたり感覚、感情、情緒に影響を与えるだけでなく、信頼性やトーン、コンテンツに対する先入観や記憶をも刺激することが可能になります。

文字というインターフェース

文字の出力は手書きから木版、活字、写植、そして現在のデジタルフォントと移り変わってきました。文字はあらゆるタイポグラフィの基本であり、初期の造形文字から抽象的な記号、ゴシック体やイタリアやドイツ・ルネサンス体、現代のサンセリフ体などさまざまな書体のフォルムへ変形しながら発展しています。

ギリシア語の「CALLI（美しく）」「GRAPHEIN（書くこと）」に由来するカリグラフィも表現及び技巧として、歴史や文化の変遷とともに変形・発展してきました。ローマ時代の碑文に使用されていた「ローマンキャピタル」、写本の書きやすさを突き詰めた「アンシャル体」、書体を統一する動きから作られた小文字体「カロリンジャン」、紙が高価な時代により多くの文字を書き留めるための余白の少ない「ゴシック体」「ブラックレター」、より早く書くための「イタリック体」など、多岐にわたります。15世紀には活版印刷術が発明され、手書き文字の必要性が日常生活のなかで薄れていきますが、ジョン・ホプキンス大学の最近の研究によれば、手書きでアイデアを書き留めたり、日記を書いたりすることは、現代においても私たちの創造性や心の安定性を高めることに寄与することがわかっています。

カリグラフィとテクノロジー業界

Appleの創設者であるスティーブ・ジョブズが、大学を中退後に見たカリグラフィクラスの芸術的なポスターに惹かれて授業を受けていたことは、テクノロジーの世界に新しいクリエイティビティをもたらしました。ジョブズは、2005年のConnecting the dotsで有名なスピーチの中でカリグラフィ、もとい、タイポグラフィに関してこう述べています。

I learned about serif and san serif typefaces, about varying the amount of space between different letter combinations, about what makes great typography great. It was beautiful, historical, artistically subtle in a way that science can't capture, and I found it fascinating.
セリフ体とサンセリフ体について、異なる文字の組み合わせの間のスペースの量について、何が素晴らしいタイポグラフィを作るのかについて学びました。科学では捉えられないような、美しく、歴史的で、芸術的な繊細さがあり、魅力的だと思いました。

私たちは学習する時の大部分を視覚に依存しています。時間と視覚が有限な私たちは、同じコミュニティに属する人たちから学べることも多い一方で、異業種の先人達が残した表現を見るという行為はこれまでにない自分の創造性を高めるきっかけにもなりえます。人間は誰でも創造的であり、その創造性の筋肉を鍛え、発達させることができます。タイポグラフィは最も日常的かつ頻繁に接触できる美的表現であり、最も私たちの想像性を高めてくれる美術作品になり得るのかもしれません。

「読む」をデザインする

「タイポグラフィは個人的な自己表現の一種だと誤解されることがある」と書体デザイナーのヘルマン・ツァップが主張したように、タイポグラフィは芸術や美術的価値を持つものだと考えがちですが、実際は目的と用途のある工芸デザインです。タイポグラフィが「情報を最も簡単かつ効率的な方法で広く多くの人に伝達するための手段」として認識されていることは少ないでしょう。

タイポグラフィを機能と造形の両面から独自に探求し、世界中のタイポグラファ及びグラフィックデザイナーに影響を与えたスイス・タイポグラフィの巨匠エミール・ルーダーは、1967年に著した『タイポグラフィ─タイポグラフィ的造形の手引き』³の中でタイポグラフィをこう定義しています。

タイポグラフィは文字によって情報を伝達するという明確な義務がある。いかなる議論や考察も、タイポグラフィからこの義務を解放することはできない。読むことのできない印刷物は、目的を失った制作物である。

タイポグラフィは、先人の感覚と無数の事例、受け継がれてきた知恵の上で数値化され活用されてきました。テクノロジー、精確さ、秩序に基づいた表現であり、高尚で難解なアートではなく本来は実用的なものです。読み手が興味関心の高い情報を探索・分類・解釈しやすくなるように、デザイナーは文字が組み込まれたデザインコンポーネントとページ全体のバランスを意識しながら最適な書体を選択していきます。このプロセスは印刷物のみならず、デジタルプロダクトでも同様であることを冒頭で紹介したオリバー・ライヒェンシュタインは強調しています。カスタマーレビューからレポート、メディアの記事、書籍、ソーシャルネットワークでの投稿、常に自身のスマートフォンから目に入る文字情報において読みやすさは最も重視されるべき体験です。あらゆるWebサービスにおいてユーザーが最も行うことは「読む」行為であるため、情報を効率的に人に伝達するための技術やノウハウが集約された専門分野としてタイポグラフィを学ぶことをオリバーは推奨しています。

タイポグラファが長い歴史のなかで研究し続けてきた単語の判別しやすさや文章全体の読みやすさへの知見に加え、書体の選択によるデザイン全体への印象変化に関する構成理論などは、現代のデジタルプロダクトに関わるデザイナーにとっても学ぶべき点は少なくありません。Appleが提唱するHuman Interface Guideline⁴、Googleの発表したフレームワークMaterial Design⁵など、タイポグラフィに重きを置き、全体的なグラフィックバランスを最適化しているデザインガイドラインはいくつも存在しています。ディスプレイなどのハードウェアスペックやフロントエンドエンジニアリングなど表現技術が高度化するなかで、近年ではデザイナーのみならずユーザビリティスペシャリスト、インフォメーションアーキテクトなど、Webデザインに関わる様々なプロフェッショナルの間でタイポグラフィは盛んに議論されるテーマになりました。

Webの進化による影響

読み手にコントロールを委ねるメディアへの適応

1960年代のパケット通信研究から始まったインターネット技術は現在までタイポグラフィの分野にも大きな影響を与え続けています。印刷機の発明以来、タイポグラフィに関わる用紙や書体サイズなどの規格から、美観やその用途までをデザイナーや印刷工が全体をコントロールしやすかったのに対して、Webデザインを記述するHTMLやCSSによる表現の自由度は高く、どのように表示されるかは各ユーザーが使用するブラウザやソフトウェアに一任され、最終的には読み手であるユーザーにそのコントロールを委ねることになりました。

読み手のコントロール下にあるということはネガティブにも聞こえる一方、同じメディアであってもニーズに合わせてインターフェースを調整できることは読み手にとって大きなメリットでもあります。拡大鏡が必要な方にとっては標準化された通常サイズの印刷物はベストなインターフェースとは限らないですし、また現代では見かけることも少なくなりましたが混雑した電車の中で大判サイズの新聞を広げた状況に困るシーンもあったことを鑑みると、デジタルタイポグラフィの重要性がより感じられます。

Webサイトの大部分を構成するテキストに対して書体が担う役割は、見出しを際立たせるなど書き手の主張メッセージの強弱を表現するだけでなく、その主張の非言語的な印象表現をサポートすることも含まれます。手書きの文章では書き手によってテキストのトーン、肌触りや質感が異なると読み手が感じるように、Webにおいても書体選択は読み手が受け取る印象や内容に対する受容性にまで影響を与えるものです。書体が固定化されてしまう印刷物と比べ、Webでは多くの場合読み手がブラウザやアプリケーションの設定から書体を変更することができます。書体選択に限らずダークモード設定など読み手によるユーザーインターフェースの可変性は高まる一方であり、Webでのタイポグラフィはそのような拡張性及び自由度の高いメディア環境に適応した進化を続けています。

ブラウザとWebフォント

1990年代にCSSが登場したことにより、Webタイポグラファは組版を行える環境が整い始めてきたものの、使用可能なWebフォントは少なく、更にそれ以上に対応ブラウザが少ない状態でした。また画面の解像度が低いため、読み手がフォントを見分けることも困難な環境からWebフォントの歴史はスタートしています。 Webタイポグラファにとって制約条件が多かった一方で、インターネットの登場やPC環境の普及はタイポグラフィ自体の普及に大きな影響を与えることになりました。従来の印刷環境に比べて新しい書体を制作しやすくなっただけでなく、オンラインサービスを通して多様なフォントを世界中のユーザーに販売提供することが可能になりました。

1998年にCSS2の仕様が追加され、マイクロソフトもInternet Explorer用に独自のWebフォントフォーマットを開発したものの、普及に成功したとはいえない状況でした。その後AppleのMachintoshの登場によりDTP(DeskTop Publishing)が普及し、2009年にはSafariがTTF（AppleとMicorosftが開発したWebフォント。Windowsでも標準対応しており、拡縮率に依存せずきれいな曲線で出力されるのが特徴：TrueType）とOTF（TrueTypeの拡張版として、マイクロソフト、アドビシステムズにより共同で開発された高機能のフォント形式：OpenType）をサポートしたことがきっかけとなり、他のブラウザでもWebフォント対応が拡大していきます。

2010年にWOFF（Web Open Font Format）が標準フォーマットとして登場すると多くのブラウザがすぐにサポートを開始したことで、Webフォント時代の幕開けとなりました。WOFFは、TTFとOTFのファイルを圧縮してデスクトップにインストールしなくてもブラウザ上で対象フォントがきれいに表示されるようになり、インターネット上でのタイポグラフィの表示管理が容易になりました。フォントのファイルサイズは画像やJavaScriptの複雑なコードよりは比較的軽いものの、ページのなかで複数の書体を併用していたり、Opentype機能がある書体を使用している場合などはページの読込速度にも影響します。2014年には圧縮技術を向上させた新しい標準フォーマットWOFF2が登場したことで、Webフォントの普及の勢いは更に加速していくことになりました。WOFF2ではWOFFと比べ、平均30%のデータ容量削減に成功しています⁶。

2016年には、新たなテクノロジーとして一つのフォントを複数のフォントのように表現を多様化できるOpenType Font Variations（一般的にはバリアブルフォントと呼ばれる）の対応が始まりました。Adobe、Apple、Google、Microsoftの４社が共同開発した技術であり、SafariやGoogle Chrome、Microsoft Edgeなどの主要なモダンブラウザ全てにサポートされています。CSSのfont-weight、stretch、styleなどの定義を工夫するだけで、「レギュラー」「ライトコンデンスト」「エクストラボールドエクステンデッド」を自由度が高い別々のフォントのように扱うことができるようになりました。また複数のスタイルを1フォントファイルで実現できることから、劇的にデータサイズが減少し、サーバーのリクエスト回数も一度で済むため、ページ全体の処理速度を向上させることが可能になりました。OpenType Font Variationsはファイルサイズを抑えるだけでなく、レンダリングされるフォントを高精度かつ詳細に調整できるため、今後より一層変化していく読み手のデバイスや環境に動的に対応できる可能性がある新しい技術です。エンジニアに親和性の高いGitHubからも力強く多用途なMona Sansとより幾何学的なアクセントがテクニカルで独特な雰囲気をもつHubot Sansの2つ、バリアブルフォントが提供されています。⁷

タイポグラフィとコラボレーション

Webタイポグラフィのみならず、どのような書体でもテキストや様々なデザインコンポーネントとの組み合わせによって、魅力的で非常に面白い価値を読み手に届けることが可能です。 印刷物に比べてテキスト情報量が多く含有されるWebデザインだからこそ、個性的な書体の活用がデザイン全体の独自性を高めることにも繋がります。 Webデザインを成功させるための重要なことは、テキスト自体もユーザーインターフェースとして扱うことです。以前記事で紹介したFigma やGoogle、eBay、YouTubeなどの多くのユーザーに愛されるWebサービスは、シンプルなインターフェースと強いアイデンティティを両立させることに成功しています。

WebデザインではグリッドやCSSを工夫することで、誰もがタイポグラファになることができます。CSSには、印刷物における組版に必要な寸法、値、プロポーションなどが異なるviewportにどう適用するか定義されているため、タイポグラフィックシステムを制作関係者は誰でも知ることができます。印刷物のプロトタイプにおいては一部のデザイナーに限られていたタイポグラフィの知見を、ディレクターやプロダクトマネージャー、エンジニア間での共通言語で表現できるようになったことによって、新しいコラボレーションが生まれるようになったことも、CSSがもたらした一つの功績と言えるのではないでしょうか。

脚注

1. iA / Web Design is 95% Typography ↩

2. ヨゼフ ミューラー=ブロックマン / グリッドシステム ↩

3. エミール ルーダー / タイポグラフィ─タイポグラフィ的造形の手引き ↩

4. Apple Developper / Human Interface Guidelines ↩

5. Google / Material Design ↩

6. リチャード・ラター / ウェブタイポグラフィ─美しく効果的でレスポンシブな欧文タイポグラフィの設計 ↩

7. GitHub / TWO VARIABLE, OPEN SOURCE FONTS from GITHUB ↩