2012-02-22

TypeSquare使ってみた

 本日から、株式会社モリサワが提供するWebFonts「TypeSquare(タイプスクウェア)」のサービスがオープンしました。

クラウドフォント・シミュレータ

 Webブラウザ上で書体や組版の表示を確認できる「クラウドフォント・シミュレータ | [TypeSquare]」なども利用できます。文字の色や大きさ行間、そして書体などのパラメータを変えていろいろな組版を試してみることが可能です。
f:id:seuzo:20120222110628p:plain
f:id:seuzo:20120222110636p:plain
 また、TypeSquareを使わなかった場合(通常のデバイスフォントのみ場合)を2ペインで比較することもできます。
f:id:seuzo:20120222110833p:plain


WebFonts

 クラウドフォント・TypeSquareはWeb上で使えるフォントです。あなたのマシンにフォントがなくても意図通りのフォントをブラウザ上に表示します。
 2012年12月31日(月)まで、TypeSquareのオープン記念としてTypeSquareのWebFontsを無料で使用できます。
 したがって、今年末まではこのブログ上でもリアルフォントが楽しめるでしょう。ビバ!

愛のあるユニークで豊かな書体:新ゴ M


愛のあるユニークで豊かな書体:ゴシックMB101 B


愛のあるユニークで豊かな書体:A-OTF リュウミン Pr6 L-KL


愛のあるユニークで豊かな書体:フォーク R


愛のあるユニークで豊かな書体:ハルクラフト


愛のあるユニークで豊かな書体:はるひ学園


愛のあるユニークで豊かな書体:新丸ゴ エンボス


愛のあるユニークで豊かな書体:角新行書 L


愛のあるユニークで豊かな書体:勘亭流

 最初に反映されるまで、10分くらいかかりましたが、概ねちゃんと表示されているようです。をを、ガゾウジャナイヨ...テキストで選択できる!


TypeSquareを使うには

 まず、会員登録をしなくちゃいけません*1。これも現在は無料です。
 会員はTypeSquareを利用するサイトを登録できます。これ、下記画面で見るとわかるんですがいくでも登録できます。
f:id:seuzo:20120222115111p:plain
 つまり将来、有料でTypeSquareを利用する際に、PVによって価格が違うわけですが、ここで管理しているドメインなりサイトのPVを合算できる。ってことらしいです(page2012でお会いしたモリサワの方に教えていただきました。)。
 実際にWebサイトやブログに使うには、左側の「導入方法」に従ってステップバイステップで設定できます。
f:id:seuzo:20120222115713j:plain
 会員に専用のscriptタグが付与されますので、使用するページに貼付けてください。
 あとはCSS上で「font-family: 'Ryumin Light KL';」などと追加すればよいかと思います。ブログなどでCSSが書けないような場合はstyle属性で直接ont-familyを指定してもよいようです。
 いろいろわかった人は教えてください!

Enjoy Happy Fonts Life!

2012-01-31

生データをそのまま使うフォントのアイデア

XMLで原稿が入る時、カウントされた数値の生データが入っていることがあります。例えば...
f:id:seuzo:20120131152500p:plain
この「<rate>4</rate>」の部分が★のレートを意味しており、実際には
f:id:seuzo:20120131152508p:plain
のようにレイアウトされるような場合です。
もちろんこの場合だったら、XMLを別途処理して「<rate>★★★★</rate>」のようにしてもかまいません。
本日、紹介するのはその別解。
f:id:seuzo:20120131153455p:plain
すいません、単に数字のコードポイントにフォントを作ってみました。それだけの話です。
この方法だと、生データを生かせるだけでなくピクトグラムなどの特殊なマークにも対応しますね。あと、同じ理屈でExcelデータからInDesignのデータ結合を利用するような場合にも流用できます。
f:id:seuzo:20120131154339p:plain
f:id:seuzo:20120131152506p:plain


生データをできるだけそのまま使うという発想

TK TYPEというフォントメーカーが開発した「CHARTWELL」というフォントがあります。

OpenTypeの合字を利用して、数字の生データをそのまま円グラフや棒グラフなどのチャートにできるというものです。
VIDEOを見ていただければ、どんなことをしてくれるか理解できるでしょう。

005 Magically building graphs with the Chartwell font
InDesign Secrets | by David Blatner and Anne-Marie Concepcion
View this entire course and more in the lynda.com Online Training Library®.

このアイデアのすごさは、単にグラフが描けるということじゃありません。生のデータをそのまま使えるということです。