CSSで「Helvetica Neue」を指定-Webフォントも紹介

HelveticaのWebfont（ウェブフォント）はFONTPLUSで

案外しらべてもでてこないですよね、FONTPLUS

iOS7が発表されて、しばらくたちましたね。
UIがー！アイコンがー！とか言ってる人をよくみますけど、個人的にはリリースが楽しみです。

そんなiOS7のロゴ「7」が
「Helvetica Neue Ultra Light」だって事は知っている人も多いですよね！

ウェブデザイナーの中には、
「Helvetica」とは別に「Helvetica Neue」が存在している事を、
初めて認識した人も少なく無いのかなーとか思います。

Macにはデフォルトで「Helvetica」「Helvetica Neue」どちらも備わっていますが、
Windowsには無いので「Helvetica」を使うなら、買うしかないですね！

学生時代にはWindowsを使っていたのですが、「Helvetica」や「ヒラギノ」の存在を知って、
インストールされていない事を知った時のションボリ感は今でも覚えています。

「Arial」「Swiss」なんかで代用していた記憶が懐かしいです。

「Swiss」は、こんな本を買って入手していました。「Helvetica」を買えない学生のアレですね。

Macには「ヒラギノ」なんかも最初から入っています。
デザイナーがMacを選択する理由なんてこれだけで十二分ですね！

そして、ここからはMacユーザー限定です。
詳しく言うと、「Helvetica」「Helvetica Neue」がある人にしか正しく表示されないはずです。

特に変わったことでは無いのですが、CSSで「Helvetica」を表示してニンマリします。

一発目はiOS7の「7」
7

こんな感じですね。
あたりまえなんだけど、自分で表示させて、おーアイオーエスセブンだーってなりました。

Condensedだって当然あります。「Helvetica Neue Condensed Bold 」！
Condensedなフォントを見ると、こう打ちたくなりますよね？私だけですかね？
Hi-STANDARD

ハイスタ世代なもので！

ちなみに、このアルバム「ANGRY FIST」のアートワークは、話題の佐藤可士和さんが手がけているのです！
バンドもかじったりしていたので、初めて知ったときは凄く驚きました.
GUの次はセブンイレブンで騒がれていますが、私は尊敬しています！

ちなみにこれが「Helvetica」と「Helvetica Neue」の違いです。
よく見たら、細かい部分に差があります。
Helvetica

Helvetica Neue

やっぱりヘルベチカはボールドですよね！
Helvetica

Helvetica Neue

サイトのタイトルロゴ風につかっている「DesignSUKINADAKE」も
「Helvetica Neue」を使ってCSSで書いています。letter-spacingで少し文字間を詰めたりしてね！

DesignSUKINADAKE

字詰めなど細かくできないのが難点ですが、ウェブなのであえてこのままで！

標準で「Helvetica」には「Oblique」しか無く、
「Helvetica Neue」には「Italic」が存在するので「Helvetica Neue」を選択しています！

あれです。「Italic」はバランスを調整した上で、斜めになっているのに対して、
「Oblique」はそのまま斜めになっているんです。

以上、勢いでざーっと書いたので、変な部分あったら修正します。
それにしても、Windowsでヘルベチカが入っていない人がこの記事を見たらどー見えるのかな。
あえて気にしませんが！

あとは、Macでネトゲが出来るようになれば言う事なしですね！