On Web Typography

Jason Santa Maria氏の集大成のような作品「On Web Typography」を去年の11月頃に読んだ。この本は2014年の自分にとって大きな作品で、右も左も分からないデザイナー駆け出しの頃に読めたらよかったと、読み終わって心から思った。

フォントサイズや、文字間の高さ、メインコンテンツの幅、グリッドのガターなど。「なんとなく気持ちいい」はPhotoshopが使えればある程度つくれるし、Bootstrapを使えば簡単にそれっぽいものを組むことができる時代。でもそれだけでは、そこに一貫性が失われる。書体や、カラー、1pxに対しても。それぞれの要素にちゃんと秩序のあるリズムを与えてやって初めて、個々の要素が機能し始めるのだと思ってる。この辺りを理解するのに長い間苦心したし、今もよく頭を悩ませる。

この本は、それらに対して直接の答えは用意してくれはしないのだけど、探るための材料をふんだんに与えてくれる最高の一冊だと思いました。凝縮版である2011年のBuildでの彼のKeynoteを見ながら読むと、一層理解が進むかも。(動くJason Santa Mariaが見れるしね。)

振り返りも含めて、ハイライトした部分をちょこっと列挙。


To paraphrase Stephen Coles, the term readability doesn’t ask simply, “Can you read it?” but “Do you want to read it?” http://bkaprt.com/owt/2/

Redabilityに関しての流れで、かの有名なFonts In Useの作者の一文をさらっと引用するあたりが玄人。

It’s shaped by our surroundings (am I in a loud coffee shop or otherwise distracted?), our availability (am I busy with something else?), our needs (am I skimming for something specific), and more. Reading is not only informed by what’s going on with us at that moment, but also governed by how our eyes and brains work to process information. What you see and what you’re experiencing as you read these words is quite different.

どういう文脈でデザインされた情報を処理されるのか、という視点が大事。

The best solution to unknown unknowns is to make our typography perform as well as it can in all situations, regardless of screen size, connection, or potential lunar eclipse.

どのような状況下でも、用意された情報を正確に伝えることの大切さを教えてくれる。そのためには、文字サイズ、コントラスト、余白など、考慮すべき項目はたくさん。

Nick Sherman gave us a great analogy to remember the distinction: a typeface is to a font as a song is to an mp3 http://bkapt.com/owt/5

この一文を読んだ時、小膝叩いてニッコリ笑ってしまった。書体とフォントの違い、言い得て妙だなーと思った。

On the surface, this is a far more resonant choice, one that marries a typeface’s origins to a project’s meaning.

ワールドトレードセンターの石碑に、NYCで生まれたTobias Frere-JonesのGothamが使われたという文脈からの一文。こういうことができると男前だと思う。GothamってGQ Magazineからの依頼で生まれたのだと、まとめてて知った。オバマキャンペーンの時に生まれたものとばかり思ってたら違ってた。

As I said, there are no right answers, just different degrees of appropriateness.

書体を選ぶのはむつかしい。NYの地下鉄にHelveticaを使ったのは間違ってる、というJasonの主張からの一文。自分の主張は曲げずに、just different degrees of appropriatenessというあたりがめちゃくちゃしびれる。

A bit of research under your belt and attention to a typeface’s connotations help make your design more coheisive.

ベストな書体を選ぶための一工夫。これはどちらかと言うと当たり前というか、普通の一文。たしかunder your beltという言い回しが好きでハイライトした気がする。

People like Jan Tshichold and his wonderful work at Penguin Books, Fred Woodward and his eclectic editorial design for Rolling Stone in the late ’80s and ’90s, and, of course, Paul Rand and his amazing branding and identity systems.

こういう人の本を読んでいると思わぬ収穫に出くわす。大好きなPenguin BooksのJan Tshicholdの本はThe New Typography: A Handbook for Modern Designersを読みたいし、他二人についても深掘りしたい。

The most important things don’t always have to be the largest; they just need to be more distinguished than other elements. In other words, they need more contrast.

コントラストが大切なのを教えてくれる。Appleの見出しがUltra Lightになっているのも、他の要素とのコントラストを意識してのこと。

The best way to approach sizing is to consider the reader and the reading distance.

そのコンテンツが誰に・どういう状態・環境で読まれるのかを考えると、基本的なフォントサイズが自ずと決まります。

Conventional wisdom is to aim for a 45–75 character measure (the length of a line of text) on average in your running text, depending on the particular font, size, and setting.

これは、どこでも言われていること。ただ、調べても数値に明確な理由がないため、まだ心から納得できていない。Emil RuderのTypographyで明記されているらしいので、現在精読中。

Claude Debussy once said that music is the space between notes.

余白に対する話の流れでの一文。こういうオサレなことを言っちゃうあたりが、僕みたいなにわかファンを引き付ける魅力。


一度読んだ本をハイライト部分のみ読み返すのは結構いいかもしれない。時間ができたらたまにこうやって振り返ってみようと思う。今年は一層kindleが手放せなくなりそうな予感。