「Webデザイナーのためのタイポグラフィと文字組版」

キャンペーンサイトやビデオ共有サイトは除きます。

今回はWeb Fontsについては言及しません。

和文フォントは正方形の仮想ボディの中にデザインされています。

出典：http://www.morisawa.co.jp/font/about/knowledge/face.html

仮想ボディをそのまま並べたものがベタ組みです。

字面を優先するのが「ツメ組み」。ほかにアケ組もあります。

コミュニティ

新ゴやAxisなどモダンスタイルのフォントは字面が大きくデザインされています。

画像化するキャッチはツメ組みにした方が可読性が上がります。

欧文フォントは文字ごとに異なる文字幅を持っています。

ベースラインから小文字のxの高さまでがエックスハイトです。

大文字の上部がキャップラインです。

小文字のhやlはキャップラインよりも飛び出すことがあります。

重要なのは、この4つのラインです。

中学生のときに使った英語のノートですね。

欧文の場合、ほぼ行間なく並べても問題ありません。

そのため、多くのブラウザではline-height: 1.2くらいがデフォルトです。

しかし、日本語では窮屈です。

150-190％くらいに設定します。

このようにフォントのメカニズムそのものが異なります。

混植するには大きさのバランスやベースラインを揃える必要があります。

このようにパーレンやブラケットが混じる場合....

半角の括弧類は、文字の中心よりもずれてしまいます。

CIDの新ゴでは1バイトと2バイトの数字では、フォントのデザインが異なります。

和文フォント付属の英数字は（主観によりますが）ちょっとな...と思ったり...

下は欧文フォント（Myriad）を組み合わせました。どちらがいい感じでしょう？

少なくてもグラフィックデザインの分野では混植が常識です。

上は中ゴのみ。中央はUnivers、下はFF DINを組み合わせています。

混植によって、紙面の印象も変わります。

ただし、英数字のサイズやベースラインの調整が不可欠です。

ご参考までにAppleのコーポレートフォントはこのように変遷しています。

アドビのコーポレートフォントの変遷。

混植を行うには「合成フォント」という機能を使います。

上記は「小塚ゴシック」、下は「りょう」をかな部分に設定しています。

合成フォントを前提に「かな」のみのフォントも多く出ています。

デジタルフォントはモリサワの2書体からスタートしました。

先の2書体と加えて基本7書体と呼びます。

「新ゴ」ファミリーはウエイトが揃っていることもあり、大ヒットしました。

リュウミンもファミリー化（「龍文堂明朝」に由来）

ゴシックMB101は、ゴシックなのに飾りがある（セリフ？サンセリフ？）

中ゴと見出しゴMB31は、ファミリー的に使うことがあります。

テクニカル系の書籍で多用されています。

ヒラギノ書体は、文字にうるさい人々に大絶賛されました。

Mac OS Xにバンドルされたときには腰を抜かしました。

AXISフォントは、新ゴとは違った表情を持ちます。

雑誌AXISのためにデザインされました（前述したようにAppleも使用）

ここ数年、キテいるのがオールド系のフォント（復刻版を含む）です。

「丸明オールド」は明朝体ですが、エレメントの端がすべて丸まっています。

広告系に大量に使われています（使われすぎて食傷気味...）

A1明朝、丸明オールド、こぶりなの共通点は...

Illustratorで処理する場合、デフォルトの機能ではムリがあります。

上：角処理なし、下：角処理あり（まろやか）

こんな感じに使われています。

A1明朝の特徴は「墨だまり」。活字での印字をシミュレーションしています。

手書きフォントは「かな」のみしかないものもあります。

グランジはかすれ／汚れ処理のことです。

最近、注目度が高いのがユニバーサルフォント。

家電などにも多く使われはじめています。

以上が最近のフォントのトレンドです。

「巴里の咏」

「巴里の咏」

文字を入力しただけの状態。

このあたり気になりませんか？

自動カーニングを行っても、拗促音や中黒、括弧のアキなどの処理が必要です。

最初の状態と比べてみてください。

少し多めの原稿はテキストをボックスの中に入れて処理します。しかし...

句読点のアキや禁則、また、ジャスティファイ設定する必要があります。

設定するポイントはこの5つ。

続けて、デバイスフォントの扱いです。

文字を流し込んだ状態では、読もうと思う気持ちは失せてしまいます。

最低限、行間（行送り）は広げる必要があります。

1文字インデントを設定すると、行頭のツラがばらけて見えます。

Webでは3-5行ごとにアキを入れるので、1文字インデントは不要です。

矢野さんの書籍で、こんな言及があります。

それぞれの環境で最適なフォントについて考えてみましょう。

Osakaは太すぎるため、見出しとのコントラストが弱いので本文には向きません。

MS Pゴシックは、MS Oﬃceをインストールすると入ってしまいます。

起こしの括弧の前後のスペーシングが不自然になることがあります。

結論として、Mac環境ではヒラギノ角ゴが最適だと考えます。

文字原稿をどう読ませるかも、デザインの領域です。

下は適切にひらいた状態。ずいぶん印象が変わります。

サイト・パーソナリティ（人格）という観点からも不可欠です。

小学校で習いますし、記者ハンドブックなどにも記載されているルールです。

ライセンスの方が安く、たくさんのフォントが使え、表現の幅が広がります。

しかし、フォントが増えるのも困りものです。

オススメは無償のFontExplorer X Proです。

まずは最小限のフォント環境を構築します。

セットとして、フォントを登録していきます。

セットごと、また、検索などを使って、使用するフォントのみを有効にします。

フォント管理は、デザイナーにとって不可欠です。

「Webデザイナーのためのタイポグラフィと文字組版」

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

More from swwwitch inc. (20)

「Webデザイナーのためのタイポグラフィと文字組版」

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.