みりみりきゅうは、というのを聞いたことのあるWEBデザイナーさんはどれくらいいるでしょうか……。
たまーに「どのくらいの文字の大きさなら読めるの？」と聞かれることがあるので、WEB上と紙媒体のフォントの違いをメモメモ。

WEBデザインにおけるフォントの基礎知識

主にはCSS3でよく使う、あるいはたまに使うプロパティをチョイスしています。

 

フォントファミリー（font-family）

フォントの種類です。いろいろあります。

英文のGooglefont＞https://fonts.google.com/

和文のGooglefont＞https://googlefonts.github.io/japanese/

デフォルトでのゴシック指定

デフォルトでの明朝指定

非常にありがたいことに使いたいフォントをドラッグアンドドロップするだけで設定してくれるジェネレーターがこちら

Font-familyメーカー　https://saruwakakun.com/font-family

でも基本GooglefontのNoto500が一番読みやすいと思っています。早く明朝こないかな……。

 

フォントウェイト（font-weight）

フォントの太さです。ボクシングのウェイトと一緒ですね。
フォントファミリーによって指定の仕方が異なりますが。100単位の数値で区切るものもあれば、「lighter」「normal」などで指定することも可能な場合があります。

 

テキストアライン（text-align）

テキストの揃え方。右：right　左：left　中央：center　そして均等：justifyの四つは抑えておくべきではなかろうかと。
justifyとは直訳すると「正当」となりますが、編集用語で「そろえる」という意味を持ちます。グラフィックデザインでも良く使われる単語で、カラム形式のテキストボックスで使うと、きれいに端がそろうようになります。テキストが多い時にはこちらを利用すると可読性があがるかも。

 

ラインハイト（line-height）

「行間」と言い表せます。「フォントのサイズ＋上下の余白」で表現されるため、フォントサイズよりもラインハイトが小さい場合は当然文字がかぶります。

• ピクセル指定をした場合
  指定したピクセル数-文字サイズ/2　が上下に均等に割り振り
• 数字のみの指定
  指定した数字×文字サイズ-文字サイズ/2　が上下に均等に割り振り
• パーセント指定
  指定したパーセント×文字サイズ-文字サイズ/2　が上下均等に割り振り

 

レタースペーシング（letter-spacing）

「字間」と言い表せます。一つ一つの文字の間を指定することはできません。単語のあとに指定した余白を作ります。
最後の文字にletter-spacingがかかってセンタリングが奇妙にずれることがありますが、これはネガティブmarginで処理するほか思いつきませんでした……。

・ワードブレイク（word-break）
URLの文字列が長くて指定したdivの中におさまらないときに役立ちます。

 

WEBにおけるフォントサイズ

シチュエーションによって適切なフォントサイズは異なりますが、おおむねこんな感じ。

• ニュース・メディア系　16px
• ブログなど　14px

テキストが多い場合は14pxあるいは13pxが妥当なのですが、これだと年配の方だとツライ、という場合もあるので、そういった場合はline-heightを十分にとるなどといった対応が必要になります。

WEBで見れる最小の文字サイズは10px。実はそれ以下はいくらフォントを指定しても、ブラウザが可読性を維持しようとして、それ以下にはなりません。
「transform:scale（縮小サイズ値）」を利用するとそれ以下の表示も可能ですが、読めない文字となればクローラーがどう判断するかわかったものではありません。（transform:scaleはdisplay:inlineでは効かないようです）

ブラウザのデフォルトフォントサイズは16pxで、指定がない以上はデフォルトがこのサイズになります。自分のサイトのユーザーの年齢層やデバイスの種類なども検討の材料にしましょう。

 

WEBにおけるフォントサイズの「単位」

pxが基本単位である事には違いないのですが、最近だと様々な単位が使われています。

 

パーセント（%)

親要素に対して相対的なサイズとなります。
が、フォントサイズで使われることはさほど多くなくなりました。widthとかによく利用されるため、混乱しないようになんとなく使い分けている人が多い印象です。

 

em

親要素に対して相対的なサイズとなります。
親要素が16pxの時、0.9emにすると14.4pxになります。0.95といった細かい単位でも設定可能です。親要素のフォントサイズが変化したときに、連携して変化していくので、レスポンシブでフォントサイズが変化する場合に重宝します。

 

rem

html（=root)のフォントサイズをもとに計算されるサイズ単位です。
指定がなければこちらもブラウザのデフォルトサイズになるので16pxが基準となります。このブラウザのデフォルトサイズ16pxに対して、htmlにパーセントでデフォルトフォントを再度設定することが多いようです。

emと違って親要素に依存しないため、ページ全体でわかりやすい単位でフォントサイズを指定することができます。

 

グラフィックデザインにおけるフォントの単位

mm級歯+pt

全てフォントの単位となります。個人的にはptが一番新しいのでは……？　と思っています。

みりみりきゅうは、とはIllustratorの環境設定で文字や線の単位を決めるときに、上から順番にこの「mm、mm、級、歯」にすると印刷媒体のデフォルトになるよ、という魔法の呪文、と大学時代に恩師から教わりました。最近ではなかなか級も歯も使われなくなりましたが、まだまだエディトリアル方面では現役なのでしょうか？

 

級（Q）

1mmを基準にQuarterした0.25mmが1級とされます。略語はQ。
文庫本などで利用されるサイズが12Q前後で、これはポイント数で表すと8から9ptくらいの大きさになります。
級数の最低印刷可能サイズは4～6Qが限界といわれています。文庫のルビのサイズにあたります。ポイントにすると4とか5ptのサイズで、分かりやすく言うと1mm×1mmの四角の中に入っている文字のサイズですね。

 

歯（H）

フォントのサイズではなく、字間や行間を指定するときに使う単位です。サイズ的には級と同じで0.25mm。
写真植字機が文字盤を歯車で機械的に操作していた時の移動量に由来しているそうです。

 

pt

世界でよく使われる文字のサイズ。1ptは約0.35mm。

グラフィックデザインをやっていると「相対的なサイズ」の概念はありません。物理的に存在するのですから当たり前ですが、これが非常に難しい問題で、「これくらいの大きさで」と紙面を出されてWEBで実装すると「全然違うじゃん」となることがたくさんあります。

グラフィックデザインの文字組

カーニング

1文字と1文字の間のアキを調整するためのツールです。IllustratorやPhotoshop、InDesignなどに搭載されています。

トラッキング

指定した複数の文字のアキを調整するためのツールです。IllustratorやPhotoshop、InDesignなどに搭載されています。字送り、とも言われます。

字詰め

文字の前後を詰めるためのツールです。IllustratorやPhotoshop、InDesignなどに搭載されています。

デザイン初心者さんはこういうとこで練習すると楽しい。

http://type.method.ac/

 

グラフィックデザインの段組

カラム方式で雑誌やチラシなどにテキストやセンテンスを打ち込む際の設定となります。見出しやキャプションは別。あくまで長文をハコの中に収めるときの設定になります。雑誌5段組、とか、冊子3段組、とか、小説2段組、とかですね

禁則処理

日本語の文書作成、組版において、「約物（やくもの）」などが行頭や行末にあってはいけない、というルールがあります。縦書き文化ですからね。約物とは基本的には記号、かっこやエクスクラメーション、クエスチョンマークなどのことを示します。
禁則処理の対象となる文字には種類があり、「行頭禁則文字」「行末禁則文字」「分離禁止文字」などがあります。
全般的には句読点やかっこ、小さな「ィ」「っ」いった吃音、ハイフンなどの記号、連番数字や英語も禁則処理に該当する文字にあたります。

 

ぶら下げ、ぶら下がり

句読点が次の行の頭に行ってしまうとき、前の行の最後に組み入れる処理。カラムの枠の外に出ます。

 

追い出し

行頭禁則文字が次の行の頭に行ってしまうとき、前の行の字間を広げて、次の行に文字を送り出して、行頭禁則文字の前に置く。あるいは、行末禁則文字が行末になってしまう場合、字間を広げて次の行に文字を送り出して、行末禁則を回避する処理。

 

追い込み

追い出しの逆。字間を詰めることによって、行内に約物を収めてしまう処理。

 

分離禁則

分離されてはいけない文字列（連数字や英語）の場合、まとめて次の行にする、前の行に無理やり詰める、の処理を行う。

禁則処理は日本特有の機能といっても過言ではないので、WEBデザインでは具体的に実装することが結構難しい場面が多いです。

段落

左揃え、右揃え、センタリングはワードやエクセルにもありますが、やはりグラフィックデザインでよく利用されるのは「justyfy＝均等配置」なんですよね。

均等配置にも「最終行左/上揃え」「最終行中央揃え」「最終行右/左揃え」「両端揃え」と種類があります。
更にこれはカラムや箱に対してであり、小口やノドに対しても行うことが可能です。

段組に関してはインデザインがやはり最強です。

InDesignの話をした方がよい気がしてきた……。
これを全部わかる方はおともだちになっていただきたい……。