CSS Nite LP, Disk 21に行って組版の大切さを勉強してきました。 #cssnitelp21

勉強三昧2日目は、CSS Nite LP, Disk 21でタイポグラフィのお話が聞けるというので参加してきました。フォントは一度フォント名と対応させて見たことがある・ないというだけでも表現が増やせるものだと思うので初めて聞くようなフォント名も知ることができてとても勉強になりました。

目次

僕がおどろいたこと

サントリーのロゴタイプ

サントリーのロゴタイプの文字は「SUNTORY」。では実際のロゴタイプはというと、「U」の字が小文字の「u」っぽく最後ににょろんと尻尾がついていて、「N」の字が小文字の「n」のように見えてしまっています。

しかし、これは小文字ではなく大文字で、やわらかさを表現するための手書きのタッチをかたどったものだったとのことです。

文字の形は、絶え間なく動き、止まらず、育ち、成長していく水をイメージ、また色は、みずみずしい「ウォーターブルー」で、“常にフレッシュで自由で柔軟なサントリー”でありたいという思いを込めました。

Suntory News Release No.8729

言われてみると納得。中学の頃の英語の授業の「U」だとそこで筆が止めてしまう感じになって、次の「N」だと筆順通りに書くと3画になってさらに止まってしまいますね。これを連なっているようにするには小文字と習っていた「u」や「n」のほうがピンときます。

SUNTORYのロゴが発表された当時はまだ学生で、ちょうどIllustratorのパスの練習にとロゴをなぞっていて、そのときから「この大文字みたいな『u』の字と『n』の字は一体何者なんだろう?」と疑問に感じていたのですが、ついに解決できました!

オールドスタイルスタイルはなぜ存在するのか?

おそらく一度は使ったことのあるセリフ体Georgiaの数字はオールドスタイル数字と呼ばれているものです。ベースラインからはみ出ている数字はこういった言い方をしますね。

オールドスタイルの数字は、小文字と組み合わせられるように調整された形だったのです。つまり本文の途中に数字が出たときにきれいに見えるフォントだったということです。こう考えると、MovableTypeのデフォルトで作られたブログのフォントがGeorgiaだったという理由もわかりますね。

初めて触ったMovableType 3.X系でパブリッシュしたときのブログのデフォルトのCSSでもたしか「font-family:Georgia」が使われていて、下にはみ出ている数字がかっこよく見えたものでした。しかし、このオールドスタイル文字がなぜ利用されていたのかということまでは知りませんでした。

欧文の組版ルールを守らないとどうなるか?

2つ目のコントヨコさんのセッションでなるほど!とうなずいてしまいました。
組版のルールを守らないとどうなるかっていうことを、日本語組版で再現されたスライドがとても印象に残っています。たしかこういうイメージのものです。

これだと、ネイティブではない人が校正の時間がなくて、適当にそれっぽ~く作ってあれる感じがして、信頼を謳うようなサイトでは大損してしまいますね。
欧文組版のルールを知らないと、僕達もこれと同じようなことをやってしまうと思うと…ちょっと怖くなりました><

セッション中では欧文組版のルールを10個紹介されていました。どのルールもネイティブの人からすると「ん?」と感じてしまうレベルのものだということ。作る機会があったら、このセッション内容を思い出して取り組んでいきたいと思います。

日本語従属欧文書体を単独で使うときは気をつけよう

3つめのセッションで、PETITBOYSフォントブログを運営しているのヤマダコウスケさんがお話されてたことですが、これには僕も「ですよねですよね」と激しく同意してしまいました。

日本語従属欧文フォントとは、和文フォントの英数字のフォントです。僕が強く訴えたいのは、日本語従属欧文フォントを単独で使うのを控えましょうということです。好みの問題かもですが、特に新ゴでドカンと価格を打たれたときにはちょっと涙目になるかもです><

日本語従属欧文書体は、日本語の仮想ボディが正方形という特徴に合わせて作られていて、通常の欧文書体に比べるとエックスハイトが高くなるようにディセンダが小さくなっているものもあります。

日本語には馴染むのですが、サイトやバナー内で価格や特徴で数字を強調するようなときには馴染んでしまっていて、今ひとつメリハリが欲しいところです。こういうときには、和文は和文フォント、英数字は欧文フォントを使っていくのがおすすめです。

ただ同じフォントサイズでも欧文フォントは小さく見えるので、文字サイズは少し大きくします。大きくすると、今度は和文の文字列と欧文の文字列だいたい凸凹になってしまうので、和文のベースラインに合うように調整をしています。

まとめ

改めてですが、欧文フォントは気になれば気になるほど楽しいです。今回の4セッションで初めて聞いたフォントも何個かありました。

Emigreのフォントはおそらく自分のパソコンには入っていないけど、「新ゴとこの組み合わせはどうだろう?」「リュウミンとこのフォントの組み合わせはどうだろう?」とフォントで妄想するタネが増えたような気がします。

発表された方、どうもありがとうございました!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Webデザイナー→Webディレクター→エンジニア。Web制作会社でWebデザイナーの採用に少し関わっています。

コメント

コメントする

目次