フォント関連のイベント・セミナーに参加し、文字やwebでの表現について参考になったのでおさらいの意味も込めて一部を紹介します。
フォントが登場するまで
筆で手書き(字詰めという概念はない。手のリズムで書いていく)
▼
木版に掘る
▼
活字（木活字、金属活字：四角いブロックを並べるので詰めることできない）
▼
写真植字（写植）(文字を詰めることができるようになった※当時デザイナーさんが嬉しくて詰めまくった）
▼
フォント登場
という流れでフォントが登場しました。
古典的、モダンな書体の見分け方
セミナーで紹介された内容を元にTYPOGRAPHY05から一部抜粋して紹介します。
和文書体
一般的に右から左へ移るに従って、骨格やふところの広さが大きくなります。懐が大きいほど文字は明るくみえます。
欧文書体
モダンになるにつれて“O”の縦軸や“e”の横棒が水平垂直に近づきます。
参考書籍
文字の組み方
こちらも、セミナーで紹介された内容を元にTYPOGRAPHY08から一部抜粋して紹介します。
ベタ組み（和文等幅）
和文文字の骨格である正方形が繋がるような組み方のこと。
ツメ組み（メトリクス+プロポーショナルメトリクス）
文字の見た目の幅や高さ似合わせて繋がるような組み方のこと。
プロポーショナルフォントを使用した詰め方が一般的です。
文字ウィンドウ（Photoshop）
| 1：カーニング |
|---|
| 特定の文字に対して、文字間隔を調整する時に使います。 文字の右側のアキだけが調整されるのが特徴です。 |
| メトリクス：欧文書体の「この文字とこの文字が並んだ時にどのくらい詰めるか設定されている値（ペアカーニング）」を組版するための設定。もともと、欧文書体の組版の設定なのですが、和文書体にもこの数値が設定されている場合があります。ただし、和文書体の場合は取り扱いに注意が必要です。※長くなるので後述します。 |
| オプティカル：アドビシステムズ独自の文字間調整機能です。和文で使用すると比較的マイルドな詰め具合になります。簡単に言うと見た目で空いてるスペース文字関係なく詰めてくれます。文字間隔を調整したい一部の語句（たとえばカタカナ語）などにピンポイントに使うと効果的です。 |
| 2：トラッキング |
| 選択した単語、ブロックごとに等間隔のアキをつくります。個別に設定するときには使いません。 |
| ３：字詰め |
| 文字の前後を詰めたい時に使います。 |
| 4：リガチャー（合字） |
 そのまま読むと文字同士がぶつかってしまう複数の文字を合成して一文字にしたものです。 抱き字、連字ともいう。 ※基本日本語にはないがたまにあることも。以下の「こうぜい」は合字機能を使用した仮名書体です。 こうぜい — TDC Tokyo 2014タイプデザイン賞受賞！美しい手書き仮名書体がついに発売開始 |
メトリクスを和文書体で使うときの注意点
和文のOpenType書体のペアカーニング情報は、日本語組版専用機能として「OpenType機能」の「プロポーショナル・メトリクス」として扱われるようになっています。しかし、書体によっては「メトリクス」と「プロポーショナル・メトリクス」のツメ情報が異なっている場合があります。また、「メトリクス」のみ設定した場合、手動でカーニング処理をした際にメトリクスのツメ情報が関係ないところまで外れてしまい面倒なことになります。
解決方法が以下の記事で紹介されています。
photoshopでプロポーショナルメトリクスを使う
より詳しい情報を知りたい方はTYPOGRAPHY 08のP66に詳しく記載されています。（ただし、InDesignとIllustratorでの説明になっています。）
参考書籍
参考サイト
文字組みに重要なCSS
セミナーでいつくか紹介されていたCSSを調べてみました。
| font-feature-settings |
|---|
| 自動カーニングができます。ほとんどのブラウザでサポート。 参考：日本語フォントこそ指定したい自動カーニング |
| text-rendering |
| テキストのレンダリングの指定やアンチエイリアスなどを施してくれる可読性を上げてくれるプロパティ。ブラウザによって色々なので逆に読みにくくなることも。 参考：あまり見かけないCSSのプロパティtext-rendering |
| letter-spacing |
| ひとつひとつの文字と文字の間隔を広げるプロパティ。 参考：【CSS】letter-spacingで字間を調整する方法まとめ |
| word-spacing |
| タグや単語間の間隔を調整するプロパティ。 参考：開発者による開発者のためのリソース。 |
| writing-mode |
| 書字方向（横書きや縦書き）を指定するプロパティ。※縦書きについては後述で詳しいサイトを紹介してます。 参考：CSS3で縦書きにする方法と挙動 |
| overflow-wrap/word-wrap |
| 禁則処理的なプロパティ。 参考：開発者による開発者のためのリソース。 |
縦書きを使ったWebサイトについて
参加したセミナーの登壇者が「たてよこアワード」のサイトをデザインしているカワセ タケヒロさん（審査員もされています。）「たてよこアワード」制作秘話（？）的なことも聞くことができました。
たてよこWebアワード2016
印象に残ったものを箇条書きで紹介します。
- webフォントはFONTPULSを使用
- ファーストビューで斜めに流れているロゴはHTMLテキスト。1文字1文字spanをかけて力技している。
- 文章を縦書き横書き共に45度に倒したら等しく読みやすくなった。
- 縦組みは文字数の調整が難しい（どの単語で切り返すとか）
- 文字数の調整はライター、ディレクターの理解がもらえないとちゃんとしたものができない
- 縦書きは横書きに比べて120%ほど読了時間が長い（視線垂直の動きできない。疲れる。そのため時間が遅くなる）
- どういったときに縦書きをおりまぜるのか→読み手側の時間をコントロールしたい時
縦書きをはじめとする日本語レイアウトを実現するための仕様について
縦書きWeb普及委員会のサイトに詳しいCSSなどの設定が掲載されているいます。
縦書きWeb普及委員会/技術解説
※技術解説意外にも縦書きサイトの事例もたくさんあるので必見です。
ところで「書体」と「フォント」の違いとは？
今まで“フォント”と“書体”を混在したまま使ったり聞いたりしていましたが、明確な違いがはっきり説明できないと思い調べてみました。
| 書体 |
|---|
| 統一されたデザインコンセプトを持つ文字種（またはグリフという）の集まり。 和文書体なら明朝体・ゴシック体・楷書体など、欧文書体ならローマン・イタリック・サンセリフなど |
| フォント |
| 元来欧文活字の用語で、1つの書体の文字サイズごとに作られた大文字・小文字・数字・記号類のセットのこと。 デジタルフォントはコンピュータ上で文字のウエイトの変更などを行えるため、書体も含めて文字のことを表す慣用語として使われてる。 |
参考記事
- 書体とフォントの違いは何ですか？
- フォントと書体の違いってなんだ？
- 書体とフォントの違い →弊社デザイナーSさんのサイトでした。とてもわかりやすく解説されてます。