ウェブの可能性

ウェブやデザインなどに関するトピックや考察のブログ

モリサワのウェブフォント、TypeSquare [タイプスクウェア]でデザインの幅が広がる。

TypeSquareタイプスクウェア.png

モリサワのウェブフォント、TypeSquareを試してみた。
2012年12月31日まで、PVに関係なく無料で使えるので、気になっている方はお見逃しなく!
オープン記念¥0キャンペーン実施中

導入方法

  1. ユーザー登録
  2. ウェブフォントを導入したいサイトURLを登録
  3. TypeSquare専用タグを<head>内に記述
    ※専用タグは、クラウドフォントを利用するすべてのページに記述されている必要がある
  4. 使用したいフォントをfont-familyで指定
    ※書体名はログイン後、「フォント一覧」の各見本から簡単に確認できる

たったこれだけ。とても簡単に導入可能だったので早速テストをしてみる。

リュウミン L-KL 見出しテスト

新ゴ L本文テスト。以下ウィキペディアの概要より抜粋。
1990年、「新ゴシック体」の名称で写植用書体として発売。電算写植用には「新ゴシック」ファミリー、DTP用には「新ゴ」ファミリーの名称でリリースされた。ヘルベチカに代表される欧文のモダンサンセリフの持つ直線的で近代的な表情を持つ書体の完成を目標に、小塚昌彦を制作統括者に迎え、1986年より開発が開始された。かなには本来の運筆をその骨格部分で導入している[1]。同社の「ツデイ」の後継にあたる書体とされるが、写研から「ゴナの模倣である」として1993年に提訴された(ゴナの記事を参照)。

UD黎ミン B 見出しテスト

フォーク R本文テスト。以下ウィキペディアの概要より抜粋。
フォント(font)は、本来「同じサイズで、書体デザインの同じ活字の一揃い」を指す言葉だが、現在ではコンピュータ画面に表示したり、紙面に印刷(書籍など)したりするために利用できるようにした書体データを意味している。金属活字の時代から書体の世界に関わっている者からは、データとしてのフォントはデジタルフォント(digital font)として区別して呼ばれることもある。書体という言葉は、現在ではフォント(の使用ライセンス数)を数える単位としても用いられるが、ここでは分けて考えることとする。(書体参照)

ゴシックMB101 H 見出しテスト

UD新丸ゴ R本文テスト。以下ウィキペディアの概要より抜粋。
モダンゴシック体として一定のシェアを築いた新ゴをベースとし、既に写植時代からリリースされている同社の丸ゴシック体である「じゅん」ファミリーとの棲み分けとしては、可読性(読みやすさ)、軽快さを追求した点にあるとされる。また「じゅん」では4ウェイトまでしかファミリー展開がなされておらず、すでに6ウェイトが展開され、幅広い媒体で使用されていたフォントワークス社のスーラに対し、モリサワのDTP向け丸ゴシック体としては初めてLからUまでの7ウェイト展開となった。しかし、平仮名の「い」「ら」などに「クセ」に近い特徴が見られる。

カクミン R 見出しテスト

リュウミン R-KL本文テスト。以下ウィキペディアの概要より抜粋。
1982年にリュウミンL-KL・KS・KOが発売され、後にファミリー展開された。タイプフェイスは金属活字時代の森川龍文堂活版印刷所の明朝体をベースとし、復刻および再デザインをおこなっているとされる(リュウミンとはリュウブンドウ・ミンチョウを意味する)。彫刻刀の冴え(活字母型の製作時の、職人の手さばきの影響を受ける)を生かした字形となっており、直線部分を柔らかく、曲線部分に鋭さを持たせることで漢字と仮名部分の統一感を作っていると言われる。リュウミン発売時の田中一光による広告ポスターでは文字のエレメントを紙面一杯に拡大し、これらの特徴を引き出したデザインが用いられた。

使ってみての感想

見出しなど、本文とコントラストをつけたい場合には非常に有効と感じた。画像を使う必要がないため、更新作業など手間が軽減され、管理が楽になる。ただし、トラッキングはletter-spacingである程度設定可能だが、カーニングの設定はできないので、文字間がルーズになってしまうのは、やむを得ないところ。しっかりと見せたいところは、やはり画像にする必要がある。

2012/4/26追記Twitterで教えていただいたのですが、簡易的にカーニングを可能にするjsがありました。最下部にコメントを入れましたので、ご興味のある方はご確認をお願いします。

一方、本文に関しては、WindowsとMacで若干太さなどの表示の違いもみられたので、視覚的な可読性という観点から使用には注意が必要と感じた。複数環境での確認も必須。

あとは価格の問題。キャンペーン中は無料だが、終了後はPVに対しての価格になっている。

price.png

価格の詳細はこちら

常にPVが高いような規模の大きいサイトの場合は、特に要検討になるだろう。

個人的な結論としては、画像を使う必要がないため、制作・更新の手間が軽減されるので非常にうれしい。ブランドアイデンティティの観点からも、今までは難しかった通常の本文に対しても、イメージにあったフォントを選択できるので有効である。

ただし、無料ではないので、導入するための"理由"が必要になる。例えば「テキストを印象的に見せることが重要。さらに、サイトの更新頻度が高いので画像では運用コストが増えてしまう。」「ブランドイメージ最優先、特定のフォントを使用したい。」など。

英語のウェブフォントのように、無料とは言わないまでも、もう少し気軽に使える金額になってほしいところ。日本語のウェブフォント、今後も注目していきたい。

TypeSquare [タイプスクウェア]

Contact Info

RSS, Facebook, Twitter or Email

Facebook