どうも！デザイナの王です。 2012もいよいよ12月を迎え、果てして2013年は来るのかと、わくわくしている今日この頃です。 ここ最近、AppleのRetinaを皮切りに、超高精細ディスプレイが色んなメーカーから出ているニュースが目に付く。 有名所ではシャープのIGZO（約500ppi）、ジャパンディスプレイのLTPS（約650ppi）などがありますよね、iPhoneのRetinaをぶっちぎりで凌駕してしまうという！4K時代の到来を予感させる！（その前に地球が終わらなければいいのだが！） ということで、来るRetina全盛時代に備えるべく、どんなにモンスター級の高解像度のデバイスでも綺麗に表示する「シンボルフォント」を最近使い始めました。今回はそんな素敵なシンボルフォントの導入法を紹介したいと思います。 そもそも♥「シンボルフォント」♥って何？ 読んで字の如し、「図形のフォント」です。タイ

内容：「myFontbook」は、オンラインで使えるフォントビューアだ。自分のPCにインストールされているフォントの一覧をブラウザ上で表示し、書体を確認できるほか、タグをつけるなどしてお気に入りのフォントをすばやく見つけることができる。 「myFontbook」は、オンラインで使えるフォントビューアだ。自分のPCにインストールされているフォントの一覧をブラウザ上で表示し、書体を確認できるほか、タグをつけるなどしてお気に入りのフォントをすばやく見つけることができる。 使い方は簡単で、サイトに行き、ビューアを起動するだけ。ローカルにあるフォントが読み込まれ、4ペイン形式の画面に一覧で表示される。日本語のフォントも問題なく表示でき、書体を手軽に確認できる。 4ペインウィンドウの下部にはそのフォントを使用した場合の例文が表示されるようになっており、利用イメージを手軽に確認できる。例として用意されて

アイコン形式になったWebフォントを集めてみました。これだけ色々揃うと画像を使う場面も減ってくるかもしれませんね。 @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy i

AdobeのWebフォントが手軽にプレビューできる『Adobe Edge Fonts Preview』 先日、Adobeによって公開された『Adobe Edge Web Fonts』はオープンソースのWebフォントライブラリで、Google Web Fontsとも連携し500種類以上のWebフォントが利用可能です。 この『Edge Web Fonts』は同じくAdobe製のアプリケーション『Edge Code』に統合されており、ウェブ上では一部さわり程度としてAdobeの公式ページでプレビューできるようになっています。 これに対しこちらのサイト『Adobe Edge Fonts Preview』ではウェブ上で手軽にすべてのフォントをまとめてプレビューでき、すぐに使えるように利便性に優れたサイトとして非公式で公開されています。 個別あるいはまとめて任意の文字列をタイプしてプレビューしたり・・

まずはロゴにつかいたいシンボルを選びます。 選択した後は、テキストを入力したり必要な情報を入力。 フォントを変更したり、斜めにしたりなど調整することができます。テキスト色も変更可能です。 サクッと作ったロゴがこちら。 たかだか5分で作ったとは思えない感じです。 でもサイトのロゴは超重要な要素！採用する時は慎重に。男子ハックといえば眼鏡のアイコン。と思ってもらえるようになればいいと思いますが、サイトのロゴって超重要。 男子ハックは眼鏡アイコンですが、現在のロゴは実は3回変わってます。（地味にフォントとかが変わっていたり）

Awesome Fontstacks : コーディネートされたWebフォントのバンドルを作れるサイト Awesome Fontstacksは異なるWebフォントから相性のいいものを一つのバンドルとしてパッケージング化し、それらを公開・共有しているサイト。 ダウンロード可能なWebフォントの中から見出し用・本文テキスト用・装飾用・等幅フォントの4種類のフォントを選び出し、それらがベストマッチするような組み合わせを提供するというものです。 バンドルを作るには、はじめは見出し用のフォントからチョイスしていき次に本文用と、ステップバイステップで自分の好きなフォントをチョイスしていきます。 見出しフォントを選ぶとそれに合うような本文用フォントが提示されていくという、マッチングエンジンが組み込まれているところが最大の特徴です。 また、自分で作成しなくてもすでに多くのユーザーによって作成されたバンドルが

IcoMoon : 好きなアイコンをピックアップしてWebフォントにできるサービス IcoMoon App IcoMoonは以前のエントリーでも紹介したようなアイコンフォントを配布しているサイト。 そしてこのサイトが立ち上げたサービス・IcoMoon Appは自社製のアイコンを始めIconic、Entypo、という3種類のフォントセットの中から好きなフォントをパッケージングしてオリジナルのアイコンフォントを組み立てられるサービスです。 アイコン一覧の中から気に入ったアイコンを選択したら下の『F』ボタンをクリック。 （隣の画像ボタンからそのままSVG画像としてダウンロードすることも可能） するとアイコンに文字コードが割り当てられるのでダウンロードボタンをクリックするとWebフォントとして一式（TTF, SVG,EOT, WOTF, CSS, HTML）がZIPでパッケージングされてダウンロー

Webフォントに関して調べ物をしたので 個人的なメモ。少し利用頻度があがって 来たので探しやすいようにまとめておき ます。まだちょっと使い慣れてないので もう少し勉強しないとダメですね・・ スマフォ向けのリソースもあります。 というわけでWebフォントに関するメモです。以前触りだけしか書かなかったのでもう少し深く調べておこうと思い記事にしました。ので、過去の記事と結構重複します。 最低限の知識最低限かどうか分かりませんけどｗ　少し不明瞭な点もありますので間違いがあればご指摘頂けると幸いです。 ライセンスまずライセンスですが、通常、Webフォントとして利用するには当然フォントの著作者次第になります。 Webフォントとして使うにはサーバーにフォントファイルをアップロードしてcssでファイルのパスを指定して利用するので、フォントファイルが誰でも手に入れられてしまう事になります。（アイコンなんかも

Google Web Fontsのフォント登録数も随分増えてきてチェックするのが大変になってきました。一応絞り込みとかそういう機能もありますけど、Typekitのようにかゆいところに手が届く感じではありません。そこで……というわけではないですけど、なんかの参考にでもなればと僕のお気に入りを5つだけ簡単な説明付きで紹介してみます。 Demo: Five Favorite Google Web Fonts Amaranth Amaranthはゆるやかにカーブのかかったグリフが特徴です。比較的小さなサイズからその特徴がはっきりと出るので、ロゴ以外にもナビゲーションなどでも使えると思います。斜体ではそのゆるやかなカーブがセクシーに強調され、また違った味わいがあります。 Arvo Google Web Fontsにはあまりスラブ・セリフがないですが、Arvoは唯一まともに使えそうなそれです。評価の高

小さいころから占いに興味があって、色々と勉強しているうちにどんどん好きになり、皆さんにも占いの良さを知ってほしくて記事を書いています。 知り合いに占い師や霊能力者、お寺の住職がたくさんいるので、その方たちにインタビューして記事を書いています。

WebFontsとは WebFontsを利用すると、Web上にあるフォントファイルを読み込んでフォントを表示できます。これまではクライアントPCにインストールされているフォントのみが利用できましたが、WebFontsではクライアントにインストールされていないフォントを表示できるようになります。 以下のサンプルはGoogle Web Fontsで提供されるWebFontsを利用しています。サンプルは IE 9／Firefox 6／Chrome 12／Opera 11.5／Safari 5.1 で動作確認済みです。 このようにWebFontsを利用することで、さまざまなフォントによる表示や表現ができます。 それぞれのフォントにはライセンスがあります。サーバにフォントファイルを格納する場合は、再頒布に該当するため、注意が必要です。フォント提供サービスを使う場合も、ライセンスをしっかり確認しただし

モリサワは8月10日（水）、「モリサワ書体」をWebフォントとして利用できるクラウドフォントサービス「TypeSquare（仮称）」を2011年度内に開始すると発表しました。パソコンだけでなく、スマートフォンでも利用できます。 ▽ http://www.morisawa.co.jp/corp/news/20110810_03.html Webフォントは、インターネットを介してフォントを配信する技術です。閲覧するパソコンやスマートフォンにインストールされていないフォントでも、ブラウザに表示できます。「TypeSquare（仮称）」ではモリサワフォントだけでなく、国内外のさまざまなフォントメーカーの協力で、書体ラインアップを充実させていく予定とのこと。モリサワは、「詳細に関しましては、後日お知らせいたします」としています。 フォントメーカーの新サービスに、はてなブックマークのコメント欄には、「

英文フォントしか対応していないが、便利は便利なのでご紹介。 Font-Combinatorを使えば、各種ウェブフォントがサイト上でどのように見えるかを手軽に試すことができる。 フォントの種類や大きさ、行間を変更できる他、テキスト部分をクリックすればその場で編集も可能だ。 ウェブフォントもじわじわと普及してきた感がありますな。こういうツールを積極的に活用していきたいところである。