fbpx

メニュー

Webフォントのモリサワ TypeSquareに申し込んでシャレオツ和欧混植

高橋文樹 高橋文樹

この投稿は 10年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

特に誰からも聞かれなかったので自分から書きますが、先日このサイトのデザインをリニューアルしました。で、ついでといってはなんですが、以前から興味のあった日本語Webフォントを導入しました。

モリサワ TypeSquare 2013年1月31日まで無料!
モリサワ TypeSquare 2013年1月31日まで無料!

今回採用したのは、モリサワのTypeSquareというサービス。PVに応じて課金されるサービスですが、来年の1/31までは無料です。もう一つ有名どころとしてはソフトバンク系のFontPlusというのがあって、違いは以下の通りです。

TypeSquare FontPlus
費用(月額) 2,100円〜 1,050円〜
フォント数 約330 約700

おめあてのフォント(オールド明朝系)はFontPlusにしかなかったのですが、なぜか実装が上手くいかなかったのでモリサワにしました。大変後ろ向きな選択であります。

使ってみた感想

Webフォントをアイコン以外で使ったのははじめてだったんですが、なかなかいいですね。自分のブログに対するナルシスティックな思いをかき立ててくれます。

小説を書き始めた頃、自分の書いたものを印刷すると、それだけで高級ななにかができあがったような気分になったものですが、その頃の気持ちを思い出しました。以下、感想です。

1. 速度面

日本語のまともなフォントは字数が多い(15,000字〜)ので、5MBぐらいあります。これを読み込ませるのは無茶だろうということで、どのWebフォントサービスも次のような流れでフォントの読み込みを処理します。

  1. まず、JSを読み込み。必要なフォントの種類をCSS解析で決定。
  2. 続いて、対象となる文字を重複なくリスト化
  3. サーバに問い合わせて、必要なグリフだけが含まれたフォントをダウンロード

この速度自体はそんなに遅いとは感じませんでした。今後、向上していくことでしょう。

ただし、Webフォントにつきものの現象なのですが、フォントがダウンロードされるまでの数秒間、デバイスフォントがそのまま表示されます。あと、適用される瞬間に僅かな間ですが文字が消えます。

僕みたいにだらしない人間は「別にいいじゃんそんぐらい、カッケーだろ?」となりますが、クリエイティブにこだわる方は許せないと思いますので、フォント読み込み完了までローディング画面を出したりフェードインエフェクト入れたりすることになるでしょう。

ちなみに、TypeSquare自体にフォント読み込み完了を示すイベントのようなものがあるのかどうかは調べてないのでわかりません。

2. ブラウザ対応

まず、Windowsだと汚いですね。特にXPだと字がかすれちゃってよく読めません。まあ、これはOSの問題なんで、しょうがないんじゃないでしょうか。昔見た『Helvetica』というドキュメンタリーでもタイプデザイナーがビル・ゲイツをめちゃくちゃDISってましたからね。

ヘルベチカ ~世界を魅了する書 [DVD]

価格¥6,276

順位85,298位

出演マイケル・ビェルート, ネヴィル・ブロディ, デヴィッド・カーソン, ほか

監督ゲイリー・ハストウィット

発行アスミック

発売日2008 年 10 月 24 日

“Helvetica! Period! Helvetica! Period!” って叫ぶシーンが印象的です。

Amazonを開く

Supported by amazon Product Advertising API

このサイトの場合は、それ以前にIE8で盛大に崩れているので、今後暇ができたら対応します。

iOSはたぶん大丈夫です。iOS7しか見てないけど。Androidは怖くて見てません

自分のブログだったらいいですが、お客さんのサイトとかだったらどうですかねー。う〜ん。勧めるかどうか微妙なところです。「IE8でも綺麗に見せられるようにしてくれ!」とか言われたら超めんどくさそう。

3. 技術的な制限

存在するフォントを解析してダウンロードするという仕様上、コンテンツがボンボコ追加されるようなサイトには向いてないですね。

たとえば、FacebookのタイムラインみたいなものはNGです。フォントをダウンロードした後に文字が追加されますから。やってないんでわかりませんが。

FontPlusにはそこら辺をどうにかするAPIもあるみたいなんですが、タイムライン作るだけでもめんどくさいのに、フォントのケアまでしろとか言われた日には「誰がやんの?」ってなりますよね。UIデザイナー? そんなスペシャルな人材はうちにはおらんぞ! とかなるんじゃないですか。

こんなことできるよ!

さて、ネガティブなことを書いてしまったので、嬉しかった点など。

憧れの和欧混植

和欧混植というのは、英語のフォントと日本語のフォントを混ぜて使うことです(多分)。InDesignとかだとわりとよく使われてるはずです。

このサイトではこんな設定にしてあります。

/* SASS使用 */
$body-font: 'Garamond', 'A1 Mincho', 'ヒラギノ明朝 ProN W3', 'IPA P明朝', serif;
$title-font: Georgia, 'Akashi', sans-serif;

ちょっと前のSafariとかは一つ目のフォント以外全部無視してたような気がするのですが、いまではしっかり和欧混植できてます。

このサイトの見出し。かっこいい...よね?
このサイトの見出し。かっこいい…よね?

まあ、この組み合わせがそんなにいいのかというと、ちょっとモニョるところはありますが、僕がいいっていってるんだからいいじゃないですか。なんなんですか。

欧文書体 2 定番書体と演出法 (タイポグラフィの基本BOOK)

価格¥2,750

順位111,243位

小林 章, 監修=嘉瑞工房

監修嘉瑞工房

読み手嘉瑞工房

発行美術出版社

発売日2008 年 8 月 22 日

ライノタイプでタイプデザイナーしていた方の本。

Amazonを開く

Supported by amazon Product Advertising API

CSS3でぼかしとか

リニューアル時に実装して、まだ使っていないこのサイトの機能に「ネタバレ」というものがあります。要するに、こんな感じですね。ポートピア殺人事件の犯人を書きたいときとかに使えます。

ポートピア殺人事件というのはファミコン初期のアドベンチャーゲームなのですが、真犯人はなんと助手のヤスです。ついでに書いてしまいますが、アガサ・クリスティーの『アクロイド殺し』の真犯人はなんと語り手です。

この表示はCSS3のblurフィルターを使ってます。

TinyMCEを調教済みのこのブログでは、管理画面で段落を選んでポチッとボタンを押すだけなので、大変お手軽。こういうのもWebフォントだからこそできる芸当ですね。

@import 'compass/css3/filter';
.netabare{
    position: relative;
    @include filter(blur(7px));
}

2008年頃はFlashのTextLayoutFrameworkと組み合せて一生懸命フォントを組み込んだりしてましたが、いまとなってはこんなにお手軽。月日が経つのは本当に早いですね。

というわけで、TypeSquare使ってみた雑感でした。たぶん、無料期間が終了しても使い続けると思います。このブログ、大してPVがないのにCloudFlareも有料版、有料SSLも導入済みなど、かなり富豪ブログなので、がんばってPVを延ばしたい所存であります。

アクロイド殺し (ハヤカワ文庫 クリスティー文庫 3)

価格¥1,056

順位8,402位

アガサ クリスティー

原名Christie,Agatha

翻訳詩津子, 羽田

発行早川書房

発売日2003 年 12 月 15 日

犯人はネタバレのところに書いてあるので注意。筒井康隆『ロートレック荘殺人事件』はこれのパロディで、併せてオススメ。

Amazonを開く

Supported by amazon Product Advertising API

すべての投稿を見る

高橋文樹ニュースレター

高橋文樹が最近の活動報告、サイトでパブリックにできない情報などをお伝えするメーリングリストです。 滅多に送りませんので、ぜひご登録お願いいたします。 お得なダウンロードコンテンツなども計画中です。