hetemlで本日(2012/4/25)より、モリサワフォントをWebサイトで使えるようにする「TypeSquare」のサービスが12月31日まで無料で使えるということでcdbk.net CREATIVES.で早速導入してみました。
下が使用前のサイト(Mac/Chrome)の表示。
そして、下がTypeSquare適用後。
使用しているUDフォントによって可読性があがりました。
Web fontもだいぶ普及してきたのでこういった技術を使い、よりよいサイトを作っていきたいです。
hetemlで本日(2012/4/25)より、モリサワフォントをWebサイトで使えるようにする「TypeSquare」のサービスが12月31日まで無料で使えるということでcdbk.net CREATIVES.で早速導入してみました。
下が使用前のサイト(Mac/Chrome)の表示。
そして、下がTypeSquare適用後。
使用しているUDフォントによって可読性があがりました。
Web fontもだいぶ普及してきたのでこういった技術を使い、よりよいサイトを作っていきたいです。
+81 Lab で見つけた「Type Trumps」。フォントに合わせ1枚1枚デザインされているので用途や目的に合わせてフォントを選ぶときにも参考になりそうです。
linked by blog-tools
$.browser.android = /android/.test(navigator.userAgent.toLowerCase()); $.browser.iphone = /iphone/.test(navigator.userAgent.toLowerCase()); $.browser.ipod = /ipod/.test(navigator.userAgent.toLowerCase()); function fontsizeset(){ var defaultwidth = 480;//スマートフォンのデフォルト想定幅 var fsize = 20;//デフォルトフォントサイズ var devicewidth = $(window).width(); var docwidth = $(document).width(); var deviceheight = $(window).height(); var docheight = $(document).height(); if(devicewidth>deviceheight){ var resizelength = Math.round((deviceheight / defaultwidth ) * 100)/100; }else{ var resizelength = Math.round((devicewidth / defaultwidth ) * 100)/100; } var newfsize = fsize * resizelength; if(( $.browser.android )||( $.browser.iphone )||( $.browser.ipod )){ $("body").animate({"font-size": newfsize},"slow"); } } $(document).ready(function(){ $(window).bind('resize load', function(){ fontsizeset(); }); $(window).load(function(){ fontsizeset(); }); });
タブレットでの表示は通常表示を前提に、スマートフォンで極端に小さくなってしまうフォントサイズを端末の幅に合わせて可変するスクリプト。
端末の表示幅は2011年春•夏に発売されている端末の多くが採用している480pxをベースに幅に合わせて指定しているフォントサイズが変更される仕組みにしています。また、横長にしたときは縦、横、短い方を基準にリサイズするようにしているので極端にサイズが大きくなることはないようになっています。
可変スクリプトを「ON」にした状態のサイトはこちら
今後、スマートフォンもHD対応のサイズが主流になりつつある中、端末に応じたCSSをかき分けるのも方法なのですが、こういった方法もあるということで紹介しました。
linked by blog-tools
Googleが便利なAPIをリリースしてくれました。
その名も「Google Font API」。
現状日本語には対応していないフォントのようなのですが、自分のサイトなどでGoogle Font DirectoryにあるフォントをCSSを通じて使うことができます。
これからiPadなどを通じて書籍などを見る機会が増える中、フォントの表現の幅が広がるのは非常にありがたい。
プレビューのところでフォントの選択やシャドウをつけたCSSのソースを取得できるのでブログなどでもすぐに活用出来そうです。