「にじみ」ます。

みなさま
 
お疲れ様です。
大澤です。
 
めっきり寒くなってきました。
 
先日、何年かぶりに風邪をこじらせてしまい、一日仕事を休んでしまいました。
一週間経ちますが、いまだに鼻と喉がおかしな感じです。
みなさまもお気を付けください。
 
さて、11月8日にフォントベンダーのモリサワから2017年度の新書体の案内メールが届きました。
楽しみにしていた大日本印刷の「秀英にじみ明朝」というフォントも提供されました。
「秀英にじみ明朝」とは活版印刷のインキのにじみを再現したフォントで、圧の加わったあじわいが表現されています。
さっそくInDesignで試してみました。
 
下図をご覧ください。
 

01

▲グリッドに流し込んでみました。
せっかくなので昨年のブログで紹介した「名著復刻」の旧字体や記号を使ってみました。
 

02

▲拡大図「A P-OTF 秀英にじみ明朝 StdN L」にじみが美しい。
 

03

▲アウトライン化した状態。
制作時の苦労も「にじみ」出ているようです。
 
と、ここまでは難なくできました。
それではWebにしてみましょう。
Webフォントとして利用するには、各フォントベンダー様が提供しているCSSとJavaScriptをHTMLコードに記述する必要があります。
私が利用している3社を紹介したいと思います。
 

モリサワ TypeSquare

モリサワパスポート利用者には、モリサワの全書体をWebフォントとして使用することができます。
しかし、下図のように「この書体はWebフォント未配信のため試し書きできません」と記載がありWebフォントとして使用できません。

04

▲随時対応するのか???
 

Adobe Typekit

9月27日に大日本印刷の「秀英体」など74フォントが追加というニュースは記憶に新しいと思います。
天下のAdobe Typekitなら使用できるだろうと思い検索してみました。
ところが。。。
 

05

▲ごめ んな さい www
 

FONTPLUS

大日本印刷、凸版印刷、モリサワ、フォントワークスなど、国内主要のフォントベンダーのフォントをWebフォントとして利用することができます。
プロポーショナルメトリクスによる調整や、字間余白の一括削除という機能で文字ツメを行い、美しい文字組みを実現することができます。
しかも、1,080円/月+入会費~と、大変リーズナブルな価格になっております。
 
試してみましょう。
会員になってログインします。
6か月間の無料トライアルもあります。
 

06

▲検索をすると使用可能なフォントとして「秀英にじみ明朝 L」が表示されました。
CSSコードをコピーしHTMLコードに適用します。

 

07

▲スマート > サイト登録・PV数レポート と辿り、Webフォントを表示させたいアドレスを登録します。
 

08

▲サイトを登録したら スマート > スクリプト発行 と辿ります。
 

09

▲諸設定を行い、発行されるJavaScriptをコピーしてHTMLコードに適用します。
 
全体のHTMLコードは以下です。

 

▲iframeで別のHTMLファイルを表示してみました。
スマホ用にレスポンシブ対応にしたのですがiframeではうまく動作しないようです。
別の機会に検証しますので、今回はこのサイトでお試しください。
※2017年11月24日、iPhone6sの縦、横のみ対応いたしました。
 
なお、FONTPLUS様では『FONTPLUS DAYセミナー』と題し、ソフトバンク・テクノロジー株式会社 エバンジェリスト 関口 浩之様を中心に定期的に勉強会を行っております。
毎回、大変ためになるお話が聴けますので、みなさまも是非是非ご参加ください。
 
まとめ
Webフォント使いましょう!
FONTPLUSをお勧めします!
楽しいフォントライフを!
 
長くなりました。
最後まで読んで下さり、ありがとうございましたm( _ _ )m