読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

#7 質問: Google Fontsでフォント選んだらチェックボックスだらけなんですけど

Webフォント Google Fonts Typography TW草稿

答え: ウェブデザインで部分的なアクセントとして使いたいだけなら、使いたいスタイルだけを選べばOK。ウェブサービスを作っていたり、ブログなどのユーザー入力領域があるウェブサービスで使う場合には、標準に加えてイタリックやボールドなども追加しておく。

f:id:sthmdnss:20151010165154p:plain

タイトルで書いた質問の状況は、上の画像で示したキャプチャでなんとなくわかっていただけるはず。以下解説。手始めにこう問うてみましょう。「必要になるかもしれないから、とりあえず全部クリックしよう」という選択がなぜまずいのか、と。これは簡単で、パフォーマンスに影響するからです。

上のキャプチャはOpen Sansを使うと決めて「USE」をクリックした次に現れるページのものです。Google Fontsからこのページに行ってみて、キャプチャでは途切れている右側をデスクトップで見てみてください。そこにメーターがあります。これはクリックしたボックスが増えるにつれて右へと振れていきます。メーターの下の説明にはこうあります。「ページ読み込みへの影響」、その下は、「ヒント: たくさんフォントのスタイルを選ぶと、ページ読み込みが遅くなります。なので、実際に必要とするスタイルだけを選んでください」。このため、使用するフォントファミリーが決まっていても、その中のスタイルまで決まっていない場合は、ちょっと立ち止まって考えた方がいいでしょう。

ここまでは主に、デザイナーが見出しやナビゲーションなどでアクセントとして使用する場合について述べましたが、ウェブサービスで/を使うとなると、事情はややことなります(次の段落から、ややテクニカルな話題になるので、アクセント目的の方は、ここでサヨナラしていただいて構いません)。

いま述べた「ウェブサービス」というのはブログ、レビューサイト、他にもホームページ作製サービスなど、ユーザーにブラウザ上のエディタで文字入力をさせるサービスのことを指しています。私がいま執筆しているはてなブログを例に出すと次のような感じです。

f:id:sthmdnss:20151011132402p:plain

ミニアチュールみたいで面白いというのは置いておいて、注目して欲しいのは、上の部分です。「B」や「i」という文字のボタンが見えますね。「B」とか「i」とかいうのは、言わずもがなHTMLタグのことです。<b>タグはテキストを太字に変換し、<i>タグはイタリックに変換します。なぜ自動で変換されるかと言えば、多くの場合、ブラウザのデフォルトCSSやnormalize.cssで、b {font-style: bold;}i {font-style: italic;}が指定されているからです。実際に、reset.cssを使うと、この自動変換はなくなります(なので、reset.cssを使う場合、サイト独自のCSS定義でこれらの処理を行う必要があります)。

ではここで問題です。Google FontsでOpen Sansを使うと決めて、キャプチャで紹介したページに遷移すると、「Normal 400」しかチェックがついていません。このまま同ページ下で発行されているリソース、https://fonts.googleapis.com/css?family=Open+Sans'をHTMLから呼び出して、<b>タグや<i>タグを使ってマークアップをすると、どうなるでしょうか。

長くなったので後半に譲ります。