0

スマートフォンのタイポグラフィで注意していること

小さくて読みづらいスマートフォン向けサイト。

本文の行間を広めにしてあげます。

カンバスサイズ幅640pxの場合の作例です。

フォントサイズ28pxで行間50pxにしてみました。

名称未設定-1_02_02

また、h2 ? h3のジャンプ率もPC版より意識的にくっきりとさせます。

 

 

 

また、サイトの印象のクオリティを上げたい場合は見出しのアイコンをフォントの「■」ではなく、画像にします。

上の黄色い四角以外にも例えばこんなのを作ってみました。

名称未設定-1_06

 

ちなみに、文字の背景のcss3グラデーションは、

http://css3button.net/で作成したCSSのコードをコピーしてcssファイルを別途作成し コーダーさんに「参考として」デザインpsdと共にお渡ししています。

 

 

行間を開けるとどうしてもページがタテに長くなりがちです。対策として「ページ上部に戻る」リンクをフッターにつけるようにしています。

▲PAGE TOP

Page↑Top

BACK TO TOP

TOP  …などもOK、です!