Tag: フォント

フォントタグの付いた記事

RSS

『The Helvetica Book』

→ amazon:BOOK『The Helvetica Book』/大谷 秀映

amazonで注文してた『The Helvetica Book』が届く。

そして買ってから気付く、これ私の嫌いなMdN出版じゃないかorz。んーまぁ、元々内容がなくてもいいようなデザイン本だし、別にアクセシビリティがどうとかTipsがどうとかいう内容じゃないから私の嫌いなMdN臭もあんまりしなそうだしいいとするか。

いやまぁ、フォント1つでよくもこれだけ書くこと探してきたな、というのが印象。案の定紙面の半分以上はHelveticaフォントで埋め尽くされてるけど。まさに "Helvetica Fan Book" といった感じ。

フォントの基本とかHelveticaの基本的な歴史とかは知ってたから(もちろんあんな細かいことまでは知らんが)、逆にFutureとかのことがよく分かった。グロテスク/ネオグロテスク/ジオメトリック/ヒューマニストなどサンセリフ体でもカテゴリー分けがあることや、どれがどれに属しててどれを基に作ってるって辺りはよく知らなかったので読んでて面白かった。

ってことで面白い本でした。MdN出版で初めてかって後悔しなかった本かも。

装丁は日本の本っぽくなくて良い。赤もいいね。オリベッティみたい(?)

なんでこんな本買ったかって言うと、やはり私も例に漏れずHelvetica愛好家の1人だからです。特にHelvetica Neue 75 Bold(この本だと "Neue Helvetica" って紹介されてるけど、Helvetica Neueはまたちょっと版権とかが違うのだろうか??)。HelveticaよりHelvetica Neueの方が好きだなぁ。私が作るもの色々見てれば分かると思いますが、結構多用してます。ヴォルフロは……、そんなには使ってないかな。

Helveticaといえば私の崇拝するgroovisionsですが、私のHelvetica多用がgroovisionsのHelvetica多用からきているというよりも、Helveticaを使いこなすgroovisions(というか伊藤氏?)をHelvetica好きの私が溺愛しているといった赴きの方が強い。

Helvetica Neue

Wolfrosch(Helvetica Neue)
Helvetica Neue

最近の一番お気に入りフォント。字間をかなり取るのがブームです。500とか1000とか。CSSで言うと { letter-spacing : 0.5em } とか。

超有名なフォントだけどやはりかなわない。何もかもが完璧。そもそも "Helvetica" って名前の字面がキレイだもん。ズルい。"Neue" の音もカッコいいし。カタカナで書くと間抜けだけどね。ヘルベチカ ノイエ。

ウエイトの軽いファミリーがあるのも便利。UltraLightはかなり細い。デカく使うと美しい。

ちょっとヒラギノ角ゴに似てるかな?っていう気もする。本当は逆でヒラギノ角ゴが似てるんだろうけど。ヒラギノの方が癖があるね。Helveticaは限りなくニュートラル。

老舗から離れられないのは性格が保守的だからか。

Wolfrosch(ヒラギノ 角ゴ Pro W3)
ヒラギノ 角ゴ Pro W3
Wolfrosch(FARCLE)
FARCLE(大文字)
Wolfrosch(Arial)
Arial

あと、意外に良いなと思ったのはFARCLEの大文字。ちょっとクドいなと思って好きじゃなかったのだが、最近ちょっと良いなと思う。使い方によってはカッコ良くなると思う。小文字はダメ。

逆に敵のように使ってたArialは飽きてきました。どんなに良いと思っていたものでも人間飽きるから不思議だ。正に、"信じていたものがある日突然何も感じなくなる" (「DNA Odyssey」/THE ALFEE)です。

あとはヒラギノ明朝W6とか。明朝を気に入るのは久しぶり。この世代の人間としては明朝を使うとどうしてもエヴァが出てきてしまう。

日本語フォントは現在ヒラギノ角ゴを超えるものが無い。崇拝だ。単純に2バイト文字のまともなのは高くて買えたもんじゃないから持ってないってだけもあるけど。フォント1つに数万も出せない。でも、ヒラギノは良いと思う。ヒラギノ角ゴProのW1とかかなり欲しい。

OS9の時はOsakaが一番だと思っていたが、今Osakaを見ると、少々野暮ったい。使い方によっては今でも全然活きるけど。

あと最近のブームはねー、小文字の略称かな? fspとかafrとかsfaとか。ピリオドなしが好ましい。はてさてそれぞれ何の略でしょうね(たまたまだがそういえば全部 "f" が入ってるな

大文字ブームと小文字ブームって交互に来ますよね。まぁ、どっちにしろ2択なんで交互もなにも交互しかありえないんだけど。

font-sizeのブラウザ間差

最近ずっとこれから逃げてきたのだが、そろそろ本気で戦わないといけないんじゃないだろうか。ブラウザ間におけるフォントサイズの違いである。

前から良く言っているようにヴォルフロはSafariを基準にサイトデザインを行っているが、Safariはフォントサイズを相対指定すると、他のブラウザよりちょっとデカく表示される気がするのだ。なので、Safariで丁度いいな、と思ってるっていうことは、実は、他のブラウザから見るとちょっと小さいのだ。Safariは細かくサイズ調整をしてくれるからそのせいかな?とも思うんだけど、それにしても小さい気がする。なんだかよく分からん。最近ちょっとブラウザごとのフォント指定についてこんがらがってるので、考えをまとめるためにちゃんと検証してココに書いてみよう、と。

今回は、

の4つのブラウザについて比較をしてみる。一応現在のMacの主要ブラウザではないだろうか。Windowsまでは手が回らないので割愛。

現在、ヴォルフロでは、標準テキストのフォントを、

font : 80%/1.3 'Hiragino Kaku Gothic Pro','Osaka','MS Pゴシック',sans-serif

と、指定している。つまり、フォントサイズは font-size : 80% である。んで、DTDはXHTML 1.0 Strictにしてxml宣言は省いているので、どのブラウザでも標準モードで表示されているはずだ。

さらに、私は、ブラウザ側の表示設定は極力デフォルトのままにしている。この状態でサンプルテキストを各ブラウザで表示、ついでにブラウザ側の設定サイズもチェック。以下結果。ブラウザ名の右側のカッコ内がブラウザのデフォルト指定。

Safari 1.2(ヒラギノ明朝 Pro 16)
東京発信情報が日本のオピニオン
MSIE 5.2(ヒラギノ角ゴ Pro W3, 16/96dpi)
東京発信情報が日本のオピニオン
Opera 7.5(Times, 16)
東京発信情報が日本のオピニオン
Firefox 0.8(ヒラギノ角ゴ Pro W3, 14px)
東京発信情報が日本のオピニオン

改めて見てみたら意外とFirefox以外はみんなデフォルトが16px。Firefoxだけが14pxだったみたい。そこで、一時的にFirefoxの標準フォントサイズを16pxに変えてみると、MSIE、及びOperaと全く同じになった。

これだけだと分かりにくいので、"東京"部分だけを拡大して比較。ちなみにこの「東京発信情報が日本のオピニオン」ってのは昔やってたテレバイダーってTV番組のスローガンです。

「東京」比較

やっぱりSafariがデカイ。しかし、それ以外は意外とみんな同じじゃないか。てことは、単純にSafariの計算の仕方の違いらしい。

先にも書いた通り、SafariはOS Xのフォントのアンチエイリアス力を活かしてか小数点以下まで正確にフォントサイズを調整してくれる。対してMSIEなんかは小数点以下は切り捨てて考える。他のブラウザもMSIEと同じになったということは、彼らも小数点以下は切り捨てスタイルらしい(Netscapeはそうでも無かった気がするんだけどなぁ

ヴォルフロは今80%なんていう大雑把なサイズ指定をしている。もしや、と思い正確に計算すると 16px x 0.80 = 12.8px となり、ほぼ13px。で、且つ13px未満。これだ。これのおかげでSafariは普通に12.8pxのサイズで表示され、他のブラウザだと小数点以下を切り捨てて12pxで表示されていた。12.8pxなら13pxの方が近い。っつーこで、13pxで揃えよう。13pxを超えるには、 16px x 0.82 = 13.12px つまり、82%にすれば良いらしい。ってことでやってみる。

「東京」比較 2

MSIEは相変わらずだけど(MSIEは12pxの次が14px)、OperaとFirefoxは13pxにしてくれた。これでSafariとOperaとFirefoxは同じフォントサイズになった様だ。

しかし、他のブラウザに比べてSafariは明らかにフォントが細い。これもOS Xの素敵アンチエイリアス効果か? これのおかげで同じ13pxでもSafariの方が大きく見える。ムムム、こんなところにも視覚的トリックがあったとは(?。

まぁ、MSIE(特にMacの)は相手にしてないんで、それ以外の3つで同じくらいに見えるなら許容範囲。Firefoxはデフォルトが14pxっぽいから同じに見えるわけじゃないけど、他のMozilla系ブラウザの中にはデフォが16pxのもあるし。これ以上はめんどくさいし。

やたら色々やった割には、結果はすごくまっとうってか当たり前だった……。しかも汎用性に欠ける内容。まぁ、考えがまとめられたんだから良いんだけど。The 自己満足。しいていうなら、13pxくらいに見せたいならfont-size:82%にするといいよっていうくらいでしょうか? これでさえWindowsではどうなのか知らんし。ここまで律儀に文章を読み進めた人はガッカリだ。長い割に内容がない。

そもそも相対指定の%なのにpxで比較する事自体がおかしいっつー話もあるしね。

それにしてもSafariのテキスト表示はキレイです。特にボールドがかかった文字。Safariに馴れるとホント他のブラウザが使えない。Safariすごい。Safari偉い。

っつーことで、ヴォルフロは今日からフォントサイズ82%になります。4649。

Safari以外のブラウザで字が太いのは、ヒラギノじゃなくてOsakaで表示されてるからでした。分かっててやってたはずなのに忘れてた。自分がアホすぎる orz...
あまりにもダサイのでしばらく晒しときます。