モリサワのWebフォントサービス「TypeSquareタイプスクウェア」や、「Adobe Creative Cloud」のフォントサービス「Adobe Typekit」などでも数多くの日本語フォントが提供されています。本来どちらも有償のサービスですが、MORISAWA PASSPORT製品を契約している場合は「MORISAWA PASSPORTプラン」が、Adobe TypekitもAdobe Creative Cloudメンバーであれば「ポートフォリオプラン」が追加料金なしで利用できます(※)。 どちらもWeb制作に携わっていれば多くの方がお持ちかと思いますので、特に有名なフォントをピックアップして紹介します。

またTypeSquareとAdobe Typekitの特徴として、「ダイナミック・キット」という仕組みがあります。これはページ中で使われている文字を検出して必要となる文字のみを読み込むことで、読み込み時間を飛躍的に短縮できる技術です。またページが更新された場合も、新たに追加された文字だけが読み込まれます。こういった仕組みが用意されているのも、有償サービスならではの強みだと思います。

※ 使用している製品によってはプランが適用されない場合や使用制限がありますので、利用の際は必ずそれぞれのプランページをご覧ください。

見出しゴMB31

フォントベンダーのモリサワが提供しているフォントの1つで、モリサワのWebフォントサービス「TypeSquare」か、「Adobe Creative Cloud」のフォントサービス「Adobe Typekit」から使用できます。

始筆などに「打ち込み」と呼ばれるアクセントがあり、また若干小ぶりな字形となっており、落ち着いた印象の伝統的なゴシック体です。ゴシック体で軽い印象を与えず、かつ存在感を出したいといった場合などによく使用されます。

リュウミン

こちらもTypeSquareとAdobe Typekitで利用できる、明朝体のフォントです。

明朝体でありながら線の先端の「ハライ」や「ハネ」、「ウロコ」が丸く抑えられており、やわらかく親しみやすい雰囲気となっています。見出しから本文組まで幅広く活用でき、DTPにおいては基本書体として、多くの場面で利用されている万能フォントです。

A1明朝

こちらはTypeSquareでのみ利用できる、明朝体のフォントです。

「墨だまり」としなやかな曲線が特徴的な、味わいのある書体です。独特なニュアンスを持ちつつ可読性にも優れているため、こちらも見出しから本文まで幅広く利用できます。

またTypeSquare独自の機能として、「デフォルトフォントを非表示」や「フェードインあり」のオプション設定ができます。従来はWebフォントが適用される前にデフォルトのフォントで表示されてしまい、適用される際に画面がちらついて見えてしまうことがありますが、このオプションを設定すると適用されるまでテキストを非表示にできます。フェードインのアニメーション時間まで指定できるため、非常に実用的です。


▲オプションの設定はGUIが用意されており、自動的に必要なコードが生成されます

まとめ

様々な環境でもフォントの見映えを統一するため、従来はテキストも画像としてウェブページに配置してました。その場合、文言などの修正の度に画像を作り直さなければならず、手間がかかっていました。Webフォントであればそのような手間がなくなるため、画像文字と比べてメンテナンス性があり、多解像度への対応がしやすいなど多くのメリットがあります。表示速度の問題などデメリットもありますが、フォントサービスの向上などにより恩恵を受けやすく導入もしやすい環境が整ってきています。是非トライしてみてはいかがでしょうか。

また今回紹介したWebフォントのデモとソースコードも公開していますので、参考にしてみてください。