タグ： fontの付いた投稿

ゲーム感覚でカーニング（文字詰め）を学べるウェブサイト「KERNTYPE」

以前「これくらいは知っておきたい。テキスト画像の文字詰めの基本」という記事でカーニングについて書いた「カーニング」。英語だけですが、その「カーニング」をゲーム感覚で学べるウェブサイト「KERNTYPE」がとても良くできていて素晴らしいのでご紹介。

上の画像のように課題となる単語が出てきて、それをカーニングするとお手本と比較して点数をつけてくれます。やっていると結構真剣になってしまって、100点とれると嬉しかったりします。笑

残念ながら、日本語は出てきませんが、英語でも日本語でも基本的な考え方は同じだと思うので、カーニングが初めてという方には、このサイトでカーニングの感覚を覚えるのもありだと思います。ぜひ、一度お試しください。楽しいです。

カーニングをゲーム感覚で学べるウェブサイト「KERNTYPE」でした。

「8ptって何ピクセル？」という質問は意外に複雑だ。

1pt = 1/72 inch

なので、たとえば96dpiのスクリーン上では
8pt x 1/72inch x 96dpi ≒ 10.67px
それほど複雑な計算ではないので dpi が標準的のものだったら決行簡単に計算できる。

そこで、うちのMacBookではどうなんだ？と思って計算してみる。。。
13.3インチのサイズの画面に1280 x 800の解像度で表示をしているわけだから。。。便利な計算サイトを使って計算してみると113.49ppi となる。

で、この画面で8ptを表意させたい場合
8pt = 8 x 1/72 x 113.49 ≒ 12.61px
となるわけだ。

昔はMacが72dpiでWinは96dpiが標準だったそうですが、それはCRTの時代の話だと思います。今ではMac/Win関係なく、機種によって違う画面サイズと解像度を持っているのでかなり複雑になっているようです。

う〜む。
ではCSSで pt でフォントサイズを指定した場合はどうやって計算、表示されるんだ？ディスプレイサイズと解像度を加味して計算して表示してくれるのだろうか？

さて、今日はもう遅くなったのでこの辺で。
この疑問は次回にとっておくことにします。

ひさびさの投稿ですが、かなりマニアックになっちゃいました。笑

Google I/Oで発表されて話題の「Google Font API」
早速、ちゃちゃっと試してみた。使い方はすごくシンプルで簡単。

次の2つのステップでできてしまう。

以下のようなHTMLを入れるだけ！たったそれだけ！

以下、その方法で読み込んだ「Josefin Sans Std Light」というフォントを使って表示した文章です：

This is really great. I really look forward to more fonts being available in the near future.

Googe Font APIよりもフォントの読み込みなど、より細かいコントロールを可能にする「WebFont Loader」というJavaScriptのライブラリがあり、これを使うとGoogle Font Directory以外にもTypeKitのフォントも読み込めるとのことです。

TypeKitは月間100万PVのトラフィックで年間99.99ドルとのこと。ページを多彩なフォントでユーザにとってより魅力的なものにできるのであれば、それほど高い値段だとは思えません。

日本語のフォントも、はやく使えるようになるといいな〜。

注記：
Win7 IE8とIETesterのIE6、IE7でチェックしてみたんですが、なぜかうまく表示されませんでした。
Google Font APIのFAQページでは、以下のブラウザをサポートしていると明記してあるので問題ないと思うんですが。

The Google Font API is compatible with the following browsers:

ちなみに、チェックしたのは

もう少しテストしてみます。。。

【参照】