モリサワのWeb Fonts「TypeSquare」がサービス開始

この記事は鷹野雅弘によって執筆されました。
公開日:2012年2月22日、更新日:2012年2月24日
 

モリサワのWeb Fonts「TypeSquare」が本日からサービス開始しています。Web Fontsと呼ばず、クラウドフォントと呼ばれています。

DTP Transitでも、見出し部分に適用してみました。雑感として、気づいたことをメモ。

  • 一旦デバイスフォントで表示された後に、ぱっと切り替わる。予想していたよりずっと早いけど、あれ?と思うかも。
  • 現在、自動カーニングはできません。なので「新ゴ」とか、パラパラしない文字が適しているかも
  • Web Fontsが表示されている状態でテキストを選択できます。つまり、画像が減ります。
  • デスクトップだと本文に適用するのは、ちょっとつらい。明朝などを使った場合には逆に読みにくい。一方、iPhone 4/4SのRetinaディスプレイだと解像度が高い(326ppi)ため、いい感じ。

サービスの開始を記念して、TypeSquareを無料でお好きなだけお使いいただける「オープン記念¥0キャンペーン」を行います。ぜひこの機会にTypeSquareをご利用ください。

クラウドフォント・シミュレータ | [TypeSquare]を使って、お試し的に使うことができます。

ご参考:

実装方法

実装は非常に簡単で、次の2ステップで完了です。

header要素内に次のようにJavaScriptを挿入する

<script type="text/javascript" src="https://typesquare.com/accessor/script/typesquare.js?oCDPlT8xxxxxxxxxx" charset="utf-8"></script>

クラウドフォントを適用させたい対象に対して、フォント名を指定する。

h2.asset-name, h1.asset-name {
    line-height: 1.4;
    font-family: "Soft Gothic Bold";
    font-weight: normal;
}

デフォルトでは見出しには「font-weight: bold;」が適用されているため、「font-weight: normal;」を指定しないと太ってしまいます。逆に、クラウドフォントが適用されない環境では太らなくなってしまいます。

YouTube

DTP TransitのYouTubeチャンネルです。1分前後のクイックTipsを投稿しています。

チャンネル登録

Twitter

本サイトの記事以外に、小ネタやタイムリーな話題などをツイートしています。

マンスリーでまとめています。

このページの上部に戻る