feature image

2021年9月17日 | ブログ記事

タイポグラフィーと錯視調整の話

この記事は2021夏のブログリレー40日目の記事です。

こんにちは、20Bの@tararira です。夏休みも残り2週間ですね。(?)

タイプデザイナーから学ぶ錯視

タイプデザイナーとは、かなりざっくり言えば、フォントを作る職人です。
文字を観察してみると、タイプデザイナーが各所に散りばめた工夫やセンスが見えてきてとても面白いです。

まずは文字を観察してみる

形の話

たとえば、'X' 'Z' 'H' '8' といった文字は水平線に対して対称的に見えますが、実はどれも上側のほうが小さく設計されています。

青が正方向、赤が180度回転させたもの

これは、上部は下部よりも膨張しているようにみえてしまう錯覚を考慮しているからです。

上の円が大きく見え、縦の線が長く見えてしまうと思います

この錯視は、上方距離過大の錯視と呼ばれています。
もちろん、あえてそう設計していないフォントもあります。


また下の例では、2本の線が交わる交点部分で、線が細くなっています。

太さが一様でない

これは、こうしないと、交点部分が太くなっているように錯視してしまうことを考慮しています。
試しにすべて一様な太さに変えて見ると、なんだか交点付近でインクが滲んでふとまってしまったように見えます。

右側は、交点付近がやや太く見える

小文字の曲線混じりの交点にも同じ原理がやや考慮されています。

交点がたくさん

なぜ太くならないようにしているかというと、アルファベットは文章の濃淡をできるだけ減らすように進化してきたからです。
逆に、日本語は濃淡の激しい文字です。

左が英語、右が日本語

少し話がずれるんですが、この濃淡が日本語を読むときの認識負荷を下げてくれていると思います。
英語は、レタースペース(アルファベット間の距離)とワードスペース(単語間の距離)によって意味を区切っていますが、日本語にはそれがありません。
その代わりが濃淡になっていて、濃淡を無意識に認識することで認識に緩急リズムと区切りがついて読みやすくなります。

漢字によって濃淡がつく

スペーシングの話

フォントデータには、文字の形だけでなく、さまざまなスペース(距離)の大きさのデータも含まれています。
これらは、文字によって全て異なり、タイプデザイナーが一つ一つ設定しています。
このおかげで、適当に文字を打つだけでもいい感じに文章が見えるようになっています。

例えばこの"ADA"の文字列は、'D'が一見ちゃんと中央にあるように見えますが、実際にはやや左側のスペーシングが右側に比べて大きくなっています。

そこで、数学的に正しく配置しなおしてみます。

すると、今度は'D'がやや左側に寄って見えませんか ?

実は、'D'の外形が三角形に近いことが原因です。三角形の数学的な中心(この場合、三角形を囲うボックスの中心)と視覚的な中心は異なっているんですね。これを三角形分割錯覚といいます。フォントは、視覚的な中心で調整されています。

勘のいい東工大生は気づいたかもしれませんが、この場合の三角形に限って言えば重心が視覚的な中心にかなり近いです。
ですが同じではありません。人によって視覚的中心の捉え方にはズレがあるからです。

たとえば平仮名の「し」や、漢字の「一」(縦書き)などの視覚的中心を考えてみると、結構迷ってしまうかもしれません。
あと、traPのロゴも視覚的中心を取るのが難しいと思います。

デザインやUIにも

上方距離過大の錯視の考慮は、ボタンや検索窓のデザインに役立ったり、
三角形分割錯覚の考慮は、ロゴデザインやテキストの配置デザインに役立ったりします。
錯視はこの他にも膨張色/収縮色や進出色/後退色といった色に関わるものや、グリッド配置に関わるものなどたくさんあります。

有名な錯視調整として、Youtubeのロゴや、Googleのロゴ、Switchのロゴなどがあります。

またロゴだけでなく、Webサイトなどのオンスクリーンタイポグラフィーでは、数学的なCSSだけでは微妙に残ってしまう違和感などを取り除くために視覚調整を施していたりします。

錯視調整の難しさ

タイポグラフィーのスペーシングもそうですが、絶対的に正しい基準がなく、一番美しいと感じる見た目や錯視の見え方の度合いは人によって異なるため、もっとも多数に美しく見えるような平均点を見つけることが大切です。デザイナーのセンスに頼る部分が大きく、とても難しい作業だと思います。

タイプデザイナーのひとすごい。

あしたは anninくんです。グラフィック班から重要なお知らせがあるとか !?
楽しみ~楽しみ~

tararira icon
この記事を書いた人
tararira

SysAd班とGraphic班で活動しています。デザインが好き

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2022年4月7日
traPグラフィック班の活動紹介
annin icon annin
2021年8月12日
CPCTFを支えたWebshell
mazrean icon mazrean
2021年3月19日
traPグラフィック班の活動紹介
NABE icon NABE
2022年9月26日
競プロしかシラン人間が web アプリ QK Judge を作った話
tqk icon tqk
2022年9月16日
5日でゲームを作った #tararira
Komichi icon Komichi
2022年8月29日
ケモナー向け VRChatの始め方、歩き方。VR無くてもできる!
pikachu icon pikachu
記事一覧 タグ一覧 Google アナリティクスについて