Web サイトのフォント表示を綺麗にできる「TypeSquare」を導入しました。

hetemlで本日(2012/4/25)より、モリサワフォントをWebサイトで使えるようにする「TypeSquare」のサービスが12月31日まで無料で使えるということでcdbk.net CREATIVES.で早速導入してみました。

下が使用前のサイト(Mac/Chrome)の表示。

Web before

 そして、下がTypeSquare適用後。

使用しているUDフォントによって可読性があがりました。

Web after

Web fontもだいぶ普及してきたのでこういった技術を使い、よりよいサイトを作っていきたいです。

 

jQueryを使ってスマートフォン向けにフォントサイズをリサイズ

cdbk.net CREATIVES のサイトをスマートフォンでも文字が読めるよう、フォントサイズを可変できるようなjQueryのスクリプトを入れたので紹介。
JavaScriptのソースをべた書きするとこんな感じ

$.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をかき分けるのも方法なのですが、こういった方法もあるということで紹介しました。
 
 

  • jQuery+Mobile+スマートフォンサイト+デザイン入門+(WEB+PROFESSIONAL)
  • Web制作の現場で使う+jQueryデザイン入門+(WEB+PROFESSIONAL)
  • JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで
  • Webデザイナーのための+jQuery入門 魅力的なユーザーインターフェースを手軽に作る+(Books+for+Web+Creative)
  • jQueryデザインブック 仕事で絶対に使うプロのテクニック
  • JavaScript+%26+jQueryレッスンブック―最新jQuery対応
  • 10日でおぼえる+jQuery入門教室
  • jQuery+Mobile
  • jQueryクックブック

linked by blog-tools

ユーザーの持っていないフォントを使える?API Google Font API


Googleが便利なAPIをリリースしてくれました。
その名も「Google Font API」。
現状日本語には対応していないフォントのようなのですが、自分のサイトなどでGoogle Font DirectoryにあるフォントをCSSを通じて使うことができます。
これからiPadなどを通じて書籍などを見る機会が増える中、フォントの表現の幅が広がるのは非常にありがたい。
プレビューのところでフォントの選択やシャドウをつけたCSSのソースを取得できるのでブログなどでもすぐに活用出来そうです。