2013年6月12日

iOS 7風フォント「Helvetica Neue UltraLight」をCSSで指定する

デザインを一新したiOS 7ですが、CSSで「Helvetica Neue UltraLight」フォントを使うと、WebサイトがiOS 7っぽい雰囲気になります。

iOS 7は、フラットなデザインに変わった事も大きいですが、細いフォントも印象的です。

iOS 6にも入っている「Helvetica Neue」というフォントの「UltraLight」というウェイトが、iOS 7で使われているフォントによく似ています。

iOS 6のSafariでは、「font-family: 'HelveticaNeue-UltraLight';」とCSSに記述すると、「Helvetica Neue UltraLight」のフォントを指定する事ができます。

サンプルはこんな↓感じです。iOSもしくはMacのSafariで見てください。

iOS 7

ちなみに、Mac版のSafariでは、「font-family: 'Helvetica Neue'; font-weight: 100;」のように指定することもできます。

あと、ついでに、「font-family: 'HelveticaNeue-CondensedBold';」と指定すると、無印良品っぽいフォントになります。

MUJI

なお、iOS 6のフォントリストは、アップルのサイトで公開されています。

関連記事

4 件のコメント:

  1. 匿名2013年10月31日 22:22

    というか、helvetica neue ultralightはまさにios7で使われているあのフォントですよ。

    返信削除
  2. Jun2013年10月31日 23:31

    匿名さん

    アップルのサイトに使われているフォントと比べると、ちょっと違うかなと思ってたんですが、実際にiOS 7デバイスのフォントと比べると、確かに同じようですね。

    返信削除
  3. 匿名2013年12月11日 12:18

    てかサイトのCSSが崩れまくってるよ？

    返信削除
  4. Jun2013年12月11日 20:55

    匿名さん

    マジですか。
    テンプレート、継ぎ接ぎしながら使ってるし、そろそろ新しくしようかなぁ。

    返信削除