2019年9月11日 | ブログ記事

知って楽しい!「タイポグラフィ」【夏のブログリレー】

WhiteFox

この記事は、traP夏のブログリレー2019年9月11日の記事です。

はじめに

どうも。「しろぎつね」こと、18のWhiteFoxといいます。
最近、デザインにはまるようになり、デザインの勉強中です。

きっかけはとあるアニメでした。

最近、「プロメア」の公開に合わせて「キルラキル」が再放送されたので、見てみました。
深夜のアニメを見る体力のない私なので、放送当時は見ていなかったのですが、再放送は夜の9時だったので、見ることができました。
そんな中、見ていて一番ヤバいと思ったのが...

...この文字ですね。
この文字、技名や決めゼリフだけでなく、普通の何気ないシーンでもバンバン使われるので、嫌でも記憶に残ります。
当時は、「キルラキルフォント」とも呼ばれて、一時期話題になるほどだったとか。

このアニメをみてから、「文字が人々に与える影響力はすごいなぁ~」と感じ、広告の中のテロップを意識してみるようになりました。
そのうち、文字自体にもデザインが凝らされていることを知り、「デザインって面白い!」と感じるようになりました。

今回は、そんな文字の影響力を最大まで高めるとっても面白い技術、「タイポグラフィ」について書こうと思います。

タイポグラフィ?何それおいしいの?

Wikipediaによると、タイポグラフィの定義は以下のようになっています。

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

分かりやすく説明すると、タイポグラフィは「文字によるデザイン」です。
身の回りの印刷物やWebサイトでは、この技術が広く用いられています。

以下では、誰でも簡単に使えるタイポグラフィのテクニック、「フォント」と「ウェイト・字間の調整」について説明します。

1.フォント

タイポグラフィに欠かせないのがフォントです。ここでは、フォントの種類やそれらが与えるイメージについて紹介します。

セリフ体とサン・セリフ体

フォントには、「セリフ(serif)体」・「サン・セリフ(san-serif)体」の2種類があります。

「セリフ(serif)」とは、文字を筆記するときにできる「とめ・はね・はらい」の部分のことです。
和文フォントに対しては「ウロコ」とも呼ばれることがあります。セリフ体のフォントには、文字の太さに強弱が付きます。
欧文フォントでは「Times New Roman」、和文フォントでは「明朝体」が代表的な例です。
これに対し、「サン・セリフ(san・serif)体」は、セリフやウロコの無いフォントのことを指します。[2]
このフォントでは、文字の太さが変化することがなく、ほぼ一定となっています。
ただし、和文フォントにおいては例外的にセリフが若干残ることがあります。欧文フォントでは「Helvetica」や「Arial」、和文フォントでは「ゴシック体」が有名です。

「セリフ体」のフォントと「サン・セリフ体」のフォントでは、太字やイタリック体にした時の変化が若干異なります。

例えば、上の図では、Sの書き始めと書き終わりの部分の太字の効果が薄くなっていることが分かります。

フォントが与えるイメージ

フォントを選ぶことによって、同じ言葉でも異なるイメージを人に与えることができます。
例えば、上の図では「Hello World!」を「セリフ体」・「サン・セリフ体」・「筆記体」・「手書き体」の4種類のフォントで表したものですが、それぞれ違った印象を持つと思います。「セリフ体」であれば「高級」、「手書き体」であれば「子供っぽい」といった感じでしょうか。[3]
一般的には、フォントが与えるイメージは下の図[4]のようになります。

また、同じ種類のフォントでも先端が丸まっていたり、線幅が一定であるなどによってイメージが異なることがあります。
これは、書体の違いによるものなのですが、このことについて書くと記事がn→∞行くらいになってしまうので、今回は言及しません。[5]

2.ウェイト・字間の調整

フォントの種類を選ぶだけでも十分なのですが、ウェイトや字間を調整することによってもイメージを変化させることができます。

ウェイトの調整

文字を見て感じる力強さを「ウェイト」といいます。これは、文字の大きさや太さを変えるだけで簡単に調整できます。

上の図は、「Hello World!」を様々な太さで表したものです。細くなればなるほど「優しい」・「女性らしい」、太くなればなるほど「力強い」・「男性らしい」感じが出てきます。[3:1]
また、大きい文字ほど迫力が出ます。

字間の調整

また、文字の間の空白(字間)を調整することによって、文章のイメージを変えることができます。
先ほどの図の「Hello World!」のうち、一番下だけを取り出してみましょう。

文字を太くしたはいいものの、その分空白が目立っています。
そこで、「Hello」と「World」の文字の間隔を、文字をつぶさない程度に埋めてみましょう。

なんということでしょう。
文字がまとまって、読みやすくなったではありませんか。[3:2]
このように、字間を変えるだけでも文章が読みやすくなったり文字の印象を容易に変えることができたりします。

3.実践

1と2の技術を生かして、実際にタイポグラフィを作ってみましょう。
今回使うのは、以下の文です。

(※上の文は、「游明朝 Light」・72ptで書かれています。なお、編集にはInkscapeを使っています。)

この文章の中で、「創作」と「場」を強調したいと考えたとしましょう。
まず、強調していることを分かりやすくするため、「創作」と「場」の字を72ptから100ptにします。

強調をさらに分かりやすくするため、「創作」と「場」の字のみ、「游明朝 Demibold」に変えます。
これは、2で話した「ウェイトの調整」にあたります。

次に、「創作」と「場」の文字だけ切り離してみましょう。
2で話した「字間の調整」によって、「創作」・「場」とそれ以外の字の間隔を空けます。

また、文章を右揃えにします。Inkscapeでは、縦書きの文に対して右揃えが対応していないので、「水平カーニング」(横向きに字間を調整すること)によって右に揃えます。

「の」がちょっと大きいですね...。
最後に、「創作」・「場」以外の文字を小さく調整して完成です。

完成!

いい感じに「創作」と「場」が強調されました!
さらに、今回の技術を応用して、さらに字の色を変えたり、改行したりすると、
より説得力のある文章が作れます。

before[6]

after

まとめ

今回は、タイポグラフィの初歩的なテクニックを書きました。
ただ文字を打つだけではパッとしなくても、ちょっとの一工夫でインパクトを残すことができる「タイポグラフィ」の技術、特殊なソフトを持っていない人でも使える知識ばかりなので、ぜひ使ってみてください。
「デザイン」って言われると、絵ばかり注目してしまいがちですが、たまには文字に着目するのもいいかもしれないですよ?

明日はNakasenくんの記事です。お楽しみに!


  1. Wikipedia-タイポグラフィ-より引用 ↩︎

  2. 「san」とは、フランス語で「~がない」という意味です。 ↩︎

  3. あくまでも個人の感想です。 ↩︎ ↩︎ ↩︎

  4. フォントの基本的な選び方|Archより引用 ↩︎

  5. 書体について知りたい方は4.のサイトを参照。また、以前spaさんがフォントについて言及しているので、こちらの記事も参照してください。 ↩︎

  6. ...はい、例のアレです。 ↩︎

この記事を書いた人
WhiteFox

通称「しろぎつね」 The world creation班所属。 デザインに転身。

この記事をシェア

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

関連する記事

2018年9月12日
絶対フォント感トレーニング【デザインフォント編】
spa
2019年9月23日
ヒダッカソンに参加しました
oribe
2019年9月22日
ベクターレイヤーを使おう
Sigma1023
2019年9月21日
5,000円の液タブ(笑)を買ってみた。
Hinaruhi
2019年9月20日
Kotlin + GradleでReactアプリを作る
RLook
2019年9月19日
定理証明で遊ぼう(しなさい)
stretchybox

活動の紹介

カテゴリ

タグ