見出し画像

似ているけどよく見ると...? 洗練された長体な書体「エコー」と「オーブ」

今回ご紹介するのは「エコー」と「オーブ」という似て異なる特徴を持つデザイン書体です。後半で書体の特徴を活かしたおすすめの使い方も解説しますので、最後までお付き合いください!

1. フォントの特徴を言葉にしてみる

まずは「エコー」と「オーブ」の組見本をご覧ください。

note_image_一覧-atomita1127のコピー

品があって素敵な書体ですよね。ただこの2書体、どことなく似ているような...でも少し違うよな...そんな風に感じませんか?

一見、わずかに思えるデザインの工夫であっても、50音や漢字全体に、その工夫を反映させることで、その書体から受ける印象は大きく変わります。「エコー」と「オーブ」の特徴を細部の共通点と相違点からひとつずつ見ていくと、その謎が解けていきます。一緒に見ていきましょう!

・デザインの共通点

まずは「エコー」と「オーブ」の共通点から。

(1) 高い重心

note_image_一覧-atomita1127のコピー 2

重心とは文字における視覚的なバランスの中心にあたります。一般的には重心が高めであれば緊張感や品格を生み、低めなら安定感や親しみやすさを感じさせると言われています。「エコー」と「オーブ」を見てみると、重心が低い例よりも重心が高く設計されています。
この2書体から感じる品の良さは重心の設計が関係しているようですね。

 (2) 長体なデザイン

note_image_一覧-atomita1127のコピー 13

ベーシックな和文書体は「UD新ゴ」のように正体(縦横の比率が同じ)でデザインされますが、「エコー」と「オーブ」は縦長なフォルムをしていますね。このような書体は “長体書体” や コンデンス書体 と呼ばれています。

これらは主に、行の長さが限られる際などにより多くの文字情報を記載する目的で作られることが多いですが、その他にも縦長なフォルムにすることで、緊張感のあるスタイリッシュなニュアンスを表現できる、というデザイン的な特徴も持ち合わせています。


・デザインの相違点

続いて2書体のデザインの違いについて追っていきます。

(1) 骨格の違い

エレメント 2

骨格とは文字の画線の芯にあたるものです。
かなの「ふ」から2書体を比較すると、「エコー」の骨格は直線的かつ水平垂直を意識させるデザインで、左右対称な構造で図形的なフォルムになっています。それに対し「オーブ」の骨格はわずかにたわみが見られます。また、手書きに由来する脈絡(筆の流れ)がデザインに取り入れられ、有機的な表情を持ちます。

(2)  エレメントの違い

書体デザインの違いは、骨格以外にエレメントから判別することもできます。エレメントとは骨格を肉付けるパーツの形を意味し、書体を特徴付ける大きな要素のひとつです。

エレメント

実際に画像で比較して観察すると「エコー」は始筆とウロコに四角いデザインを採用しています。一方「オーブ」はどちらも丸みのあるデザインになっていますね。

骨格とエレメント、デザインをそれぞれ緻密に設計することで、共通点を持ちながらも「エコー」はスッキリと引き締まった風合い、「オーブ」は柔和で優しく流麗な風合いに仕上がり、それぞれの書体の個性となっています。

2.文字組小噺 〜長体とプロポーショナルメトリクス〜

こちらの画像は「UD新ゴ」「エコー」「オーブ」の3書体を同じ文章で字間を調整せず文章を組んだもの(ベタ組み)です。

言葉のあやとり2


「UD新ゴ」は文字同士が隙間なく組まれているのに対し、「エコー」と「オーブ」の2書体には余裕があることが分かります。

言葉のあやとり

ではこちらはどうでしょうか。「UD新ゴコンデンス70」は長体の書体ですが、先ほどの「エコー」と「オーブ」を比べて「UD新ゴコンデンス70」は隙間なく組まれています。

この違いは、書体の字幅の設計と関わりがあります。

・仮想ボディと文字の幅

note_image_一覧-atomita1127のコピー 5

一般的に和文書体をデザインするときは仮想ボディと呼ばれる正方形の枠の中に対して、同じ形を意識した比率で文字が設計されます。それが今回「エコー」と「オーブ」では正方形の仮想ボディに対して、約86%の縦長な比率で文字がデザインされています。

「UD新ゴコンデンス70」は仮想ボディも文字デザインも、縦長の形になっています。それに対し「エコー」と「オーブ」は仮想ボディが正方形のままで文字デザインは長体なのでベタ組をすると文字同士が一定の間隔をあけて並んでいます。
仮想ボディとは文字を打つときに目には見えない、透明な枠線のようなものといえますね。

「エコー」と「オーブ」の仮想ボディが正方形なのは全角でも使える長体のデザインを目指して設計されたからです。エレガントな雰囲気をもつ両書体を、ゆったりとした字間と合わせて使うことで、軽やかな空気感をプラスしています。文字間の余白も書体デザインの大切な要素なのです。


・プロポーショナルメトリクス

余白も含めて書体デザイン...というのはわかったけど、「UD新ゴコンデンス70」のように、タイトな字間で⽂章を組めたらいいのに...と思った皆さん、実は「エコー」と「オーブ」も「UD新ゴコンデンス70」のように、仮想ボディ自体を長方形にして文章を組むこともできます!
その方法は “プロポーショナルメトリクス” という OpenType機能を使うことです。(OpenType機能についての詳しい説明はぜひ前回の記事『筆のまにまに 。言葉によって形が変わるフォント「みちくさ」』をご覧ください。)

プロポーショナルメトリクスとは、フォント情報の中にあらかじめ搭載されている文字詰め機能を指しています。実際に「エコー」と「オーブ」でベタ組みとプロポーショナルメトリクスを比較してみましょう。

note_image_一覧-atomita1127のコピー 3

Adobe InDesignやAdobe Illustratorで、OpenTypeという項目の中にある「プロポーショナルメトリクス」のボタンに✔︎を入れることでこのように変えられます。
ひとつひとつの文字にモリサワ独自の文字詰め情報を搭載しているため仮想ボディが文字の形状に合わせて変化し、ベタ組みより多くの文字情報を記載することを可能にします。もっと詳しく知りたい!という方は是非エコーとオーブの使い方というサイトも合わせてご覧ください。


これから「エコー」と「オーブ」を使用する際には、OpenType機能のプロポーショナルメトリクスを文字組の一つの方法として思い出していただけたら幸いです!

3.  書体開発からリリースまでの道のり

最後に2書体の開発秘話についてお話しします。
2018年にリリースした「エコー」と「オーブ」はモリサワタイプデザインコンペティション 2012で応募作品の一つだった「なでしこ」から誕生しました。

note_image_一覧-atomita1127のコピー 8

こちらがコンペティション後に調整された「なでしこ」の文字と、最終的に製品化された「エコー」と「オーブ」の文字です。
「なでしこ」は「エコー」が持つスクエアな骨格と、「オーブ」に見られる丸い先端やウロコを併せ持つ作風になっていますね。
ここから「エコー」は骨格もエレメントも四角い書体へ、「オーブ」は骨格もエレメントも丸い書体へとデザインが派生し、2書体になりました。


さらに「エコー」にはウエイト展開も加えられました。
形状がよりシンプルな「エコー」を汎用的にお使いいただけるよう、見出しや小見出しだけでなく、キャプションなどの短い文章も組めるようにL・R・Bのウエイト展開が誕生したのです。

note_image_一覧-atomitaのコピー 5


デザインの派生からウエイト展開というように、今の「エコー」と「オーブ」に至るまで、このような変遷がありました。

これは余談ですが、街なかで「エコー」や「オーブ」がポスターや製品などで使われているのをみると、こういうテイストで親和性があるのか!といった風に意外な発見があり、大変興味深いです。これからも様々な使用事例に出会えたらいいなと思っています。

4. おわりに

今回は洗練された長体な書体「エコー」と「オーブ」について紹介してきました。フォントの個性の秘密は、デザインの工夫にありましたね。
今後気になるフォントを見つけた時、その特徴がどのようなものなのか、街中で心の虫眼鏡を構えて見てみるのはいかがでしょうか🔎

「エコー」と「オーブ」のもう一つの文字組方法、プロポーショナルメトリクスの活用もお忘れなく!

これからも書体の隠された秘密やフォントの良さについて皆さんと共有していくことができたらいいなと思います。
それではまた次回お会いしましょう!(担当:A)


みんなにも読んでほしいですか?

オススメした記事はフォロワーのタイムラインに表示されます!