Blog

ブログ

FONTPLUSやTypeSquareをCMSサイトに使うとき、予測しておくべきこと

, ,

最近はウェブフォント導入を前提とした案件が増えました。デザイナーやクライアントが画像を想定していた場合でも、私から「この文字はFONTPLUSに登録されているので、利用すると後々便利ですよ」と提案して採用されることが多くなりました。

今回の話題はCMSに限らず、改修に強い柔軟なウェブサイトを制作するうえで必要な知識なのですが、CMSベースのサイトは、より様々な事態を想定しておく必要がある、ということで書いておきます。

@font-faceによる詳細指定ができないことによる影響

私が公開しているa-blog cmsのテーマ「echo_zero」では、メインフォントに遊ゴシック・遊明朝を使用しています。

遊フォントはOSにより挙動が不安定なため、@font-face規則で名称を統一しています。

このTIPSについては、山田敬美さんによる下記の公開スライドを参照ください。

https://speakerdeck.com/tacamy/modanri-ben-yu-huontozhi-ding

@font-face {
  font-family: 'PGYuGothic';
  font-weight: normal;
  src: local('YuGothic-Medium'),
       local('Yu Gothic Medium'),
       local('YuGothic-Regular');
}
@font-face {
  font-family: 'PGYuGothic';
  font-weight: bold;
  src: local('YuGothic-Bold'),
       local('Yu Gothic');
}

このような、スタイルやウェイトに応じた詳細指定は、FONTPLUSやTypeSquareではできません。通常の、CSSのfont-familyプロパティによる指定のみとなっています。

フォントの指定は「@font-face」を利用せず、「font-family」を使って指定してください。

FONTPLUSのシステムが自動で判別し、必要なcssファイルを生成します。

https://webfont.fontplus.jp/faq/883

書体は font-family を使って指定してください。(@font-faceを使った指定ではありません)。

https://typesquare.com/help/index/4

これはどういうことかというと、FONTPLUSやTypeSquareのフォントを、以下のようにCMSの本文内でクラスとして使用できるようにしていて…

<p class="chikushi">「chikushi」クラスを付けると「FOT-筑紫明朝 Pr6N RB」になります</p>

後々、更新担当者が「この見出しの一部を太くしよう」と思ってstrongでマークアップしても、文字が太くならない、ということです。

サービスとしての高速化を考えるとこれは仕方のないことと思います。

<p class="chikushi">一部を<strong>強調</strong>しましたが文字は太くなりません</p>

なので、本文全体にウェブフォントを採用した場合などは、制作会社側が、以下のいずれかの対応を考えておく必要があります。

  • strongを使用しても何も起きない前提とする

  • 同時にstrongを使用した場合に、font-familyも変化するよう定義しておく

  • ボールド体のフォントを反映できる装飾クラスを用意しておく

自動文字詰めによる影響

FONTPLUS、TypeSquareでは「自動文字詰め機能（プロポーショナルメトリクス）」を利用できます。

ウェブマガジンの記事タイトルなどの、複雑な文章を美しく表示できる、ありがたい機能です。

「文字詰め」の使い方 – TypeSquare Blog

FONTPLUSでは一部のフォントのみが対応しています。TypeSquareはすべてのフォントに対応しているのかもしれませんが、私は契約していないためちょっとわかりません。ただ、TypeSquareでリュウミンのサンプルを見ると、プロポーショナルメトリクスが行われているようにも見えます。

この機能を使った場合、通常のデバイスフォントよりも、一行に収まる文字数が多くなります。

このため、ウェブフォントの文字幅を前提にガチガチにコーディングしてしまうと、以下のようなケースでは体裁が崩れる可能性があります。

  1. モバイル環境などで、ウェブフォントの読み込みに時間がかかった場合

  2. 利用者側がブラウザ側でフォントを固定した場合

２番目はあまり想定しなくて良いと思いますが、１番目のケースは、インラインで見出しの右側に別のテキストやボタンを置いている場合、フォームのラベル、文字列を自由に変更できるボタンなどで起こる可能性があります。

自動文字詰め非対応フォント

「リュウミン」はよく採用されるフォントのひとつですが、FONTPLUSのリュウミンは文字詰めに対応していない（先述の補足を参照）ため、長文に使用した場合に「ファ」「ティ」などの小文字を含む文字が間延びして見えます。

筑紫・マティスなどの対応フォントに変更し、自動文字詰めを有効にすると解消されます。

つまり、カンプを受け取った段階で、長文にウェブフォントの指定があった場合は、以下の対応をするのが望ましいということになります。

  • 自動文字詰めに対応しているか確認する

  • 対応していない場合は想定される文字を流し込んでプレビューしてみる

  • 見栄えが良くない場合はスクリーンショットを撮影し、デザイナーに対応を検討してもらう

エントリーのタイトルなどの場合は、だいたいは「見た目が近ければ他のフォントでも構いません」という回答になると思います。

まとめ

ランディングページなどの、静的なウェブページであれば、span要素によるクラス付与などで、フォント指定やカーニングを細かく行うことができます。

それができないCMSの場合は、どこまでこだわるか、またはこだわらないのか、エンジニア・デザイナー間で相談しておいた方が、よりよいコンテンツづくりにつながると思います。

デザイナーと連絡が取れない場合、エンジニアにおまかせとなった場合に、この記事が参考になれば幸いです。