制作お役立ち便利帳
タグ：フォント
Webフォントは印刷にも使えるのか？
Webフォントについては、記事「Webフォントにするメリットは何か？」に説明がありますが、CSS3.0 fonts moduleでサーバー側から提供されるフォントデータでクライアントが文字表示を行えるようになったものです。
Webフォントが使えると、ページ制作をしたオリジナルの姿で表示されるだけでなく、文字を画像にすることがなくなるので、文字検索、SEO対応、文字編集、自動翻訳、音声読み上げに対応できます。ただしWebブラウザがダウンロードして使うものなので、各ブラウザの機能や仕様に依存し、プリントやPDF化については、ブラウザが異なると出力結果は同じになりません。
つまりWebページやWeb制作とは関係なくWebフォントを使うのは難しいといえますが、PDF化したものを印刷物制作に取り込むようなことは工夫次第でできます。そもそも多くの場合にWebフォントを使う理由は、印刷用フォントをWEBでも使いたいことですので、日本語のフォントメーカーのものなら印刷用フォントを入手すればいいわけです。しかし上の図のように、欧文など日本で手に入らないフォントがWEBで使われていて、それを印刷したい場合もあります。
その場合、まずPDF保存してちゃんとWEBフォントが使えているかどうかを確認します。しかしそれを他の印刷物に転用できるかどうかは、フォント各社のライセンス条項によりますので、その確認が必要になります。日本のフォントベンダーはそれそれのサイトに注意書きがありますので確認してください。海外で一番有名なWEBフォント fonts.com では日本語フォントも取り扱っており、AXISフォントやDynaFont（ダイナフォント）がありますが、ライセンスや利用料金もかかるWebフォントもあります。
日本でポピュラーな欧文WEBフォントには、Google Fonts、Adobeフォントライブラリがあります。Google FontsはGoogleが提供している無料のフォントで、種類も豊富といった点が特徴です。Adobeフォントライブラリには幅広くデザイン性に富んだフォントが揃っていて、全体が全てのCreative Cloudのサブスクリプションプランで利用できます。
ロゴや商品名など短い文字列で使う場合、フォントとして再利用できなければ文字を画像化して使うしか方法がありません。利用できる場合はAdobeイラストレータに取り込んでアウトライン化することで使うという方法もあります。
どうして類似フォントが数多くあるのか？（特に英文）
文書を作成する際にフォント指定をしようとすると、選択肢として類似フォントが多数表示され、どれを使ってよいかわからなくなる場合があります。また以前の文書作成でどれを使ったのかも覚えていられないこともあります。しかし一人の人、あるいは一つの会社でそれほど多くのフォントを使うことはあまりなく、文書作成の指針として代表的なフォントを決めておいた方がよいでしょう。
フォントの数が増えたのは、時代とともに過去の印刷用フォントの多くのものがパソコンでも使えるようになってきたからです。しかしそれは過去の印刷フォントを使っていた人、使いたい人には意味があることでも、今日の文書作成で必ずしも必要とはいえないでしょうが、一応なぜ増えたのかの説明はしておきます。その前に、フォントは見出し用（Display Type）と本文用（Body Type）に大別でき、ここでは本文用を取り上げます。
活字のフォント
特に欧文では同じ活字のフォントが異なるベンダーから提供され、しかもよく見るとデザインが微妙に異なっていることがあります。これは元の活字では同じ文字でも、活字サイズごとに源字を彫っていたので、同一文字のサイズ違いが同じデザインにはならなかったことがあります。そのために活字デザインをデジタルフォントにする際に、どのサイズの活字をベースにしたかでデザインの微差が出ます。実は文字の形は使用するサイズによって異なる非線形にデザインされた方が目で見て自然なので、こういうことが起こりました。例えば「はっぴょう」のちいさい「つ」「よ」などの促音は、小さい文字サイズで使う場合では少し大きめにデザインされました。デジタルフォントにした際にこういう配慮がどうなったかはベンダーによって異なります。どのベンダーのものを選ぶかは好みの問題でしょう。なるべく一般的なものを使うのが無難な線です。
写植のフォント
写真植字の時代にはネガの種字をレンズで工学的に変倍していました。この種字自体が太さ（weight）のバリエーションを多く持つようになっていました。
こうなった理由は、本文文字の紙面の「黒さ」を自由に選べるようにしたからです。同じ文字デザインでありながら、短い文は太く濃く、また注釈のようなところは細く薄く、というような使い分けがありました。写植では8～10段階のWeightがありましたが、パソコンでの文書作成では4段階くらいが多いと思います。
また一つの紙面で複数の異なるデザインのフォントを混ぜて使う場合には、文字部分の黒味が均一になるようにするためにWeightの選択をしたので、多くの太さの段階が求められたともいえます。
PANOSEシステム
似たフォントを探すための仕組みとしてPANOSEシステムというフォント分類法が考えられ、パソコンで使うTrueTypeフォントはそれを使うことができます。これはWebでも扱えるようになっていて、元の文書の欧文フォントが手元のパソコンになくても、すでにインストールされているもので最も近いものに置き換えて表示・出力できるはずです。日本語に関しては実際にどの程度使われているかは不明です。
和文中に欧文が入る場合の注意点とは
日本語の文章（和文）と、英語ヨーロッパ各言語の文章（欧文）では、文字組版の処理の仕方が根本的に異なるために、和文中に欧文の単語やセンテンスが入る場合は、和文と欧文の境界に少し隙間を入れます。これはパソコンのメモ帳やmailでは行わないのですが、それらのテキストデータをMicrosoftWordなどに貼りこむと、自動的に隙間が入り、例えば「2022年」などの場合も2022と年の間が空いてしまってキモチ悪いと思う方もおられます。
和文と欧文では1行の行末をどう決めるかの処理が異なります。欧文は文字と文字の間に隙間は入れずに、単語と単語の間のスペースを増減して、行末を揃えます。
一方、和文は単語間はないので、第1に句読点のまわりで調整し、第2に欧文との隙間、括弧類、など、そして第3に文字間に少し隙を入れるなどして（このルールはシステムごとに違いがあります）、行末を合わせます。しかし1行に和文と欧文が混ざっていると、以下のようにうまく処理できない部分が生じることがあります。
無理やり行末を揃える処理をさせると、『ェア（主に』の行を行頭行末揃えにしてしまい、スカスカの行が出来上がります。つまり和欧混植をする場合には、段の設定で行末処理の余裕がない文字数の少ないことはしない方がよいのです。この例は3段組か4段組でしょうから、段数を減らせば『ェア（主に』の後ろに『Publisher』は入ります。
また和文と欧文では文字の揃え方の考えが異なり、縦組も横組もある和文は正方形のセンター基準でフォントデザインをしていたので、組み方もセンター揃えであったのが、欧文はベースラインを基準に文字を置いていくような活字の作りになっていました。その考え方は受け継がれている中で、現状では以下のような位置関係で和文と欧文の文字を混在させています。
実は和文フォントの中にも英数字が含まれていて、それらは和文中で記号などとして使うには揃いやすくデザインされています。例えば g ｊ y などのディセンダ部分を短くするとか、 g h などはなるべく半角に近づける、大文字は全角に近づけるなどをしているために、 それらで欧文の文章を組むとダサい、キタナい、といわれることがあります。
逆に欧文の文字を和文中で使いすぎても、ところどころディセンダが行の下にはみ出すようなことがおき、目障りになることがあります。以下は括弧に全角和文のものと、欧文のものを使った例です。
また、同じ文字サイズでも和文フォントに対して欧文フォントは少し小さめなので、フォントサイズを変えなければバランスしないことがあります。和文フォント中に使用する欧文フォントをその都度指定するのも面倒なので、ＤＴＰでは「合成フォント」という機能があって、和文フォントと欧文フォントその他の組み合わせセットを作れるほか、組み合わせるフォントのサイズやベースライン・比率も個別に設定することができます。これを使えばデザインを崩さずに統一したフォント使いや、そのための設定が容易にできます。
Webフォントにするメリットは何か？
Webの表示は利用者のPCなどにあるフォントを使うようにしていましたが、Webサイト側からすると紙面のデザインがどうなるか予想できないものでした。例えばwindowsの場合にOSの進化とともに標準搭載フォントが追加・変化してきました。
初期標準搭載 MSゴシック・MS明朝／MSPゴシック・MSP明朝／MS UI Gothic
Vistaから標準搭載 メイリオ
7から標準搭載 Meiryo UI
8.1から標準搭載 游ゴシック・游明朝
10から標準搭載 UDデジタル教科書体・Yu Gothic UI
さらに、Webはスマホやタブレットでも見られていて、Web表現のデザイン性を維持するためには、環境に依存しないフォント利用が必要になり、フォントデータをサーバーからダウンロードして表示するWebフォントが生まれました。特に欧文は非常に多くのデザインされたフォントが供給されています。
これらは日本のデザインにも多用されていますが、以前は文字列を画像化してGIFやJPGにして貼り付けていました。しかし文字を画像で表現すると、文章検索できないとか、検索エンジンにひっかからずSEO的に不利、また文字修正がやりにくい、スマホ用は別に対応しなければならない、などの難点がありました。
WebではCSS3.0 fonts moduleでサーバー側から提供されるフォントデータでクライアントが文字表示を行う機能の標準が提供されました。具体的にはWebブラウザの機能としてWebフォントがつかえるようになったのです。これによって、文字検索ができ、SEOに対応し、文字修正が簡単で、輪郭がはっきりしている文字表示ができるようになりました。またテキスト化されているので自動翻訳や音声読み上げソフトに対応できます。
CSS3.0では日本語縦組みもできるので、https://www.suzunoya.com/kinu/ のような縦組み混在のWebサイトも作られています。
キヤノングローバルサイトは、本文も含めてWebフォントを使っています。またレンタルサーバで有名なサクラインターネットではモリサワのWebフォントサービス「TypeSquare」から33書体がWebサイトに無料で利用できます。 https://www.sakura.ne.jp/function/webfont/
Webフォントは、文字数が少なくローディングの負荷が少ない欧文フォントで利用が広がったものの、文字数の多い日本語においてページごとにフォントをロードするのに若干時間がかかりましたが、最近ではネットの高速化と使用する文字だけをサブセット化して表示することで、利用面はかなり改善されています。Google Fontsも2014年から日本語フォントの無料提供をスタートしています。
Webフォントはブラウザの機能で表示するので、プリントやPDF化については、各ブラウザの機能や仕様に依存します。つまりブラウザが異なると出力結果は同じになりません。調整するにはブラウザで初期設定を変えるなどの手間がかかります。Webページを保存してプリントする場合には、CSSを書き換え、Webフォントをttfに変換する必要があり、そのようなサポートをするWebサイトもあります。また手持ちのフォントをWebフォントに変換してWebで使うためのコンバータなどもWeb上にあり、利用環境は整いつつあります。
Web制作会社の場合にはクライアントから依頼を受けて制作して納品するわけですが、その場合でもWebフォントは組み込めます。具体的には各フォント提供者の示す条件を見る必要があります。