Webにおけるタイポグラフィ

はじめまして。カチップの鈴木です。
カチップではデザイナーとして働いています。
新卒で入社してから半年以上が過ぎ、時間が経つのが本当に早いです

カチップでは、毎朝10分間の勉強会を行なっているのですが、
これがとても勉強になるんです。されど10分、毎日やることによって50分の勉強できるわけですから。

先週のテーマは「タイポグラフィ」でした。
みなさん、「タイポグラフィ」と聞いて何を思い浮かべますか?
人によってそれぞれでしょうけど、大抵は
「タイポグラフィ」=「文字組み」ですよね。

今回はWebデザインにおいての「タイポグラフィ」を考えてみたいと思います。
そもそも「タイポグラフィー」とは?

タイポグラフィ(英: typography)は、活字(あるいは一定の文字の形状を複製し反復使用して印刷するための媒体)を用い、それを適切に配列することで、印刷物における文字の体裁を整える技芸である。
タイポグラフィ – Wikipedia

だそうです。
元々は印刷物における技術だったんですね。
書籍などの印刷物は、文字を読ませるためですから、読みやすく文字を整える必要があります。

それは、印刷物に限ってのことではありません。Webデザインでももちろん必要な技術でもあります。今は、Webフォントの進歩などで日本語でも多くのフォントが使えるようになりました。

Webタイポグラフィに基本的な要素は大きく分けて5つあります。

  1. フォント
  2. 行間
  3. 文字列
  4. 文字の動き
  5. 文字の強弱

どれもWebサイトを見やすくするためには、とても重要なことです。
どれか一つでも欠けていると、ユーザーにとってフレンドリーなWebサイトとは言えないのではないでしょうか。

僕は、Webの世界に入るまでそこまで「タイポグラフィ」について意識したことがありませんでした。
しかし、バナーやサイトデザインをしていくにつれて、ここはこれぐらいつめた方がいいなとか自然にわかるようになるんですよね。
勉強法としては、ギャラリーサイトなどを見て勉強するのがいいと思います。
トレースして見るのも良いかもしれませんね。

適切なタイポグラフィを選択することによって、UXの向上につながるでしょう。
しかし、不適切なタイポグラフィはユーザーにとって邪魔なものになってしまいますよね。
タイポグラフィはユーザーが読みやすく、理解しやすいWebsサイトを作るのに必要不可欠な要素です。

僕は情報を適切に伝えるのが、Webデザイナーの仕事の一つだと思っています。
「タイポグラフィ」を制するものが、Webデザインを制するって言っても過言ではないかもしれませんね。