CSS3のWebフォントを使用して作られたWebサイトあつめました

Webフォントを使用サイトサイトも多くはないですが最近目にするようになってきました。
フォントの表現が広がると、サイトの雰囲気も変わりますね!

ライセンスの問題もありますのですべてのフォントが自由に使えるということではありませんがこれからのWEBはテキスト部分の書体も意識したレイアウトになりますかね。実際にWebfontを使用しているサイトを少し集めてみました。

前回のエントリーで勉強する前にどんなことができるかイメージするのもよいかもしれません。

前回の記事:CSS3で注目のWebフォントについて今から勉強するためのサイトあつめました

フォントグラフィック

フォントグラフィック

http://fontgraphic.jp/indexjp.html

アイコンもテキストも飾りケイも、全てオリジナルウェブフォントで表示されているサイトです。画像は一切使用していません。飾りケイフォント、アイコンフォント、ドットフォントなどいろいろなフォントが紹介されており、Webフォントの可能性を感じることができます。

Station name boards

Station name boards

http://pr.fontplus.jp/sample/01/

いつも何気なく目にしている山手線の駅名標を、日本語のWebフォントを利用して再現しています。画像は一切使用せず、HTMLだけで実装しています。

Ascii movie

Ascii movie

http://pr.fontplus.jp/sample/04/

日本語のWebフォントを用いたAscii Movie。下のフォームにvimeoのURLを打込むと・・・。漢字を利用し、従来のAscii movieに無かった色種、彩度を表現しています。(要Flash Player)

Nike Better World

Nike Better World
http://www.nikebetterworld.jp/

NIKEの特設サイト「Nike Better World」でも使用されていました。こちらは全面背景でグラフィカルになっていて動きもよいです。

eROI

eROI

http://www.eroi.com/

デジタルメディアエージェント「eROI」サイトのTOPページは、Webフォントを生かしたタイポグラフィで個性的で美しいデザインを実現させています。

Debbie Millman

Debbie Millman

http://debbiemillman.com/

デビーミルマンの個人サイトです。Webフォントでかなり個性的なフォントをセレクト。もうこれでもかというほどインパクトを感じさせます。

DAS FORK

DAS FORK

http://www.fork.de/

こちらはドイツのエージェント”DAS FORK”です!Webフォントで古めかしいフォントと近未来的なフォントをサイト内で組み合わせ、何とも神がかった雰囲気を醸しだしています。

The Potential of Web Typography / @font-face

The Potential of Web Typography / @font-face

http://craigmod.com/journal/font-face

Ian Lynam氏とCraig Mod氏によるWebフォントのデモページです。フォントは、オランダのフォントファウンダリUnderware(http://www.underware.nl/)のものです。テキストだけで、サイトの雰囲気も自由自在に!!

Shop Buza(スマートフォンサイト)

Shop Buza(スマートフォンサイト)

http://www.inbuza.com/m/home.htm

手作りリキュールなどを販売する「Buza」のスマートフォンサイト。Webフォントをさりげなく部分的に実装することにより、ヨ-ロピアンで愛らしいフォントが使われていて非常にデザインが可愛い。PC版のサイトはこちらです。(http://www.inbuza.com/

Velirium(スマートフォンサイト)

Velirium(スマートフォンサイト)

http://velirium.mobi/#accueil

Veliriumのスマートフォンサイト。メニューが斜め。全体的にグラフィックが重くなりがちである所を、上手く部分的にWebフォントを使用することで軽量化に成功しています。スマートフォンサイトを意識し、モダンテクニックを駆使したミニマムな作りに憧れてしまいます。

My Wanderlust Philippines

My Wanderlust Philippines

http://mywanderlust-ph.com/

旅のコンシェルジュ、マイワンダーラストマニラのリニューアルサイト。旅を意識して、Webフォントを使い、サイト全体の楽しい雰囲気を演出しています。

TYPOLUTION.de

TYPOLUTION.de

http://www.typolution.de/

デンマークのタイポグラフィを話題として扱っているブログです。
Webフォントだけでなく、タイポグラフィの勉強にもなります。

TellApart

TellApart

http://www.tellapart.com/

Elliot Jay Stocks.

Elliot Jay Stocks.

http://elliotjaystocks.com/

Webフォントを使用することで、サイト全体をとても知的で上品な雰囲気に変えています。
リキッドでスマートフォンにもきちっと対応しています。

CSS3でのWebfontはどういうように作るのかな?という参考には前回のエントリーもあわせてみるとよいでしょう。

前回の記事:
CSS3で注目のWebフォントについて今から勉強するためのサイトあつめました

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事