Webデザイナーブログから学ぶホームページ制作

ホームページを閲覧した時に表示されるフォントサイズ（文字サイズ）は、JavaScriptライブラリを使うことによって、文字サイズを「小」「中」「大」に変更することができます。標準の文字サイズを設定しておけば、標準サイズに応じて文字を「小」と「大」に変換してくれます。

ページ内のフォントサイズ（文字サイズ）を変更してくれるjQueryプラグイン「jQuery Text Resizer Plugin」の設定方法を解説します。

Cookieに保持されるので、次回訪問時や別ページ遷移後にも設定が引き継がれてフォントサイズ（文字サイズ）を表示してくれます。

下記からJavaScriptライブラリのダウンロードを行ってください。
jQueryライブラリダウンロード

ダウンロードしたファイルを確認してください。

※ダウンロードファイル
jquery.js
jquery.textresizer.js
jquery.cookie.js

「jQuery」ファイルへのディレクトリをメタタグに記述します。

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/js/jquery.textresizer.js"></script>
<script type="text/javascript">
$(function(){
	$(".textresizer a").textresizer({
	     target: "#fontresizu",
	     sizes:  [ "12px", "16px", "20px" ]
	});
});
</script>

<div class="textresizer">
<ul>
<li><a href="javascript:void(0)" title="Medium">小</a></li>
<li><a href="javascript:void(0)" title="Large">中</a></li>
<li><a href="javascript:void(0)" title="Larger">大</a></li>
</ul>
</div>

実装サンプルを作りましたのでこちらでも確認してみてください。
Text Resizer デモ

以上で設定完了となりますが、簡単に設定ができますね。
文章の読みやすさを左右する要素は「フォントサイズ（文字サイズ）」「行間」「スペース」なので読者が読みやすいフォントの設定するのが良いとおもいます。