文字サイズを大きくするとCVが上がる！？

今日は文字サイズの指定です。

文字サイズとCV（成約率）には深いかかわりがあるって知っていますか？

フォントの種類を指定する

・font-family:”値”

フォントの書体を指定します。

値は、「フォント名」、または、「総称フォントファミリー名」を指定します。

特殊フォントの場合、ブラウザの環境によっては対応していない場合もあるので、

「,（カンマ）」で区切って複数のフォントを指定することが適切です。

また、フォント名の大文字小文字、半角空白は正式のフォント名と同じように正確に記述します。

フォント例）

sans-serif…あいうえお

arial black…あいうえお

Gungsuh…あいうえお

HG行書体…あいうえお

HG正楷書体-PRO…あいうえお

Webdings…あいうえお

Wingdings 2…あいうえお

下から二つは、「Wingdings」、「Wingdings 2」というフォントです。

フォントというか…絵文字です(笑)

フォント名、フォントファミリー名は調べればいくらでも出てきます！

日本語の変わったフォントなどは、対応していない場合が多いので、

必ずメジャーなフォントをサブで指定するようにしましょう！

文字サイズを指定する

ブログを書いている人にとってはなじみ深い文字サイズの変更。

文字が大きくなるボタンをポチポチすれば、

簡単に文字サイズを変更できる便利なツールもあります。

・font-size:値

文字列のサイズを指定します。

基本は「数値+単位」

または、下記の表のような「文字の大きさ名」でも指定できます。

「数値+単位」の指定には「px」「em」「ex」「%」がありますが、

「px（ピクセル）」と「%」が一般的です。

値	説明
xx-small	x-smallより一段階小さい
x-small	smallより一段階小さい
small	mediumより一段階小さい
medium	smallより一段階大きく largeより一段階小さい
large	mediumより一段階大きい
x-large	largeより一段階大きい
xx-large	x-largeより一段階大きい
larger	親要素より一段階大きい
smaller	親要素より一段階小さい

文字列の太さを指定する

・font-weight:値

文字列の太さを指定します。

値	説明
normal	太字で表示しない
bold	太字
bolder	現在指定されている太さより 一段階太く
lighter	現在指定されている太さより 一段階細く
100～900	100～900の10刻みで指定 数値が大きいほど太くなる 400はnomal、700はboldと同じ

こうしてみると、boldとbolderには差があまり感じられませんね…

ちなみに900だとこんな感じ！

boldと変わりますでしょうか…＾＾；

あくまで太字と普通（ノーマル）での使い分けで十分ではないのかなと思います！

文字列の斜体を指定する

・font-style:値

文字列の斜体を指定します。

値	説明
normal	斜体で表示しない
oblique	斜体
italic	イタリック体

「oblique」と「italic」、差がないですよね。

「oblique」は文字をただナナメにしただけ、

「italic」は筆記体風にナナメにするフォントだそうです。

差がありません。使いやすい方にしましょう！(笑)

ワードプレスもそうですが「I」が傾いたボタンがありますよね。

「italic」の頭文字です。なじみ深いのはこちらかもしれませんね！

文字サイズとCVのお話

冒頭で少し話した文字サイズとCV（成約率）の話です。

実は、文字サイズを大きくしただけで、CVが上がるという結果があるそうです。

実際に試したサイトはあるのですが、

前後で計測する余裕まではなく、結果的にどうだったかまでは把握できていません…

ただ、文字サイズを大きくする、または行間を広くすることで、

読みやすさは格段にアップします！

読みやすさのアップは必然的に成約率がアップしますので、

やはり、効果があるのだと思われます。

ただし！

あっちこっちサイズが変わってしまうと逆に読みにくくなってしまいますので、

統一感を持たせたサイズ指定を心がけましょう♪