目的

  • TypeSquare」は、日本語フォントの雄「モリサワ」が提供するクラウドフォントサービス
    • 高品質な日本語フォントをWebで再現できる。2013年中は無料キャンペーンらしいので、試してその効果を実感する

キャンペーンについて

  • 少なくとも、2013年中は無料で使えるとのこと。その後は、PV等に応じて課金されるっぽい

手順

  • アカウント作成後、サイトURLを登録する

  • 「フォント一覧」から任意のフォントを選び、CSSで指定する

    # 具体的な指定は下記のような感じで
font-family: 'Shin Go ExLight';

おまけ

  • ソースコードに関しては、モリサワのフォントだと具合が悪かったので、Adobeの「Source Code Pro」を利用してみた
    • 「Source Code Pro」は、1とI、0とOなど紛らわしいフォントをわかりやすくデザインするなど、ソースコード表示に特化したフォント
    # 具体的には下記のような感じで
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);
pre, code {
  font-family: "Source Code Pro", sans-serif;
  font-size: 14px;
  }

まとめ

  • Webフォントの導入は非常に楽
  • 状況に適したWebフォントを導入することで、可読性は非常に高められる。特に、日本語表現は、モリサワのような日本語フォントを使うと特にいい
  • 見出しはゴシック体系、文章は明朝体系といったフォント割り当ての基本を踏襲すると、さらに可読性は高まる
  • 各ブラウザのサポート状況について、要調査(少なくとも、safariとChromeは問題なく表現できている)
  • 正式リリース後の課金体系がきになる


blog comments powered by Disqus

Categories

Tags

iPhone Sales

Books

Pinboard