株式会社スタジオザンビ

スマホメニュー

ホームページ制作・ウェブアプリ制作 株式会社STUDIOザンビ 帯広/十勝/北海道

ホームページ作成・webシステム開発からデジタルコンテンツまで、付加価値の高いデザインやWEBシステムをご提供いたします。

BLOGブログ. 業務日誌

メイリオフォントをキレイに見せる!文字のサイズ指定

メイリオフォントをキレイに見せる!文字のサイズ指定

font-family「メイリオ」をキレイに読みやすく表示させるサイズって何??
と、ウェブサイト制作業務中にフト考えてしまったのです。

さてこのfont-family「メイリオ」、「画面上で見ても印刷しても 極めて“明瞭”で読みやすい」という意味から来るらしいのですが、最近ブログなどのタイトルや見出しによく使うフォントでもあります。

それではさっそく調べていきましょう。
まずはcssのfont-family指定を以下のように設定し、font-weightはnormalとします。

font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Arial, Verdana, "MS Pゴシック", sans-serif;
font-weight:normal;

次に適当なテキストを配置し、サイズを変更して見ていきましょう。
タイトル用なのでわりと大きめのサイズ20pxから調べていきます。
※ちなみに閲覧する環境によっては「メイリオ」で表示されない場合がありますのであしからず。

20px 新発見!絶景北海道Webサイト更新中

21px 新発見!絶景北海道Webサイト更新中

22px 新発見!絶景北海道Webサイト更新中

23px 新発見!絶景北海道Webサイト更新中

24px 新発見!絶景北海道Webサイト更新中

25px 新発見!絶景北海道Webサイト更新中

26px 新発見!絶景北海道Webサイト更新中

27px 新発見!絶景北海道Webサイト更新中

28px 新発見!絶景北海道Webサイト更新中

29px 新発見!絶景北海道Webサイト更新中

30px 新発見!絶景北海道Webサイト更新中

31px 新発見!絶景北海道Webサイト更新中

32px 新発見!絶景北海道Webサイト更新中

33px 新発見!絶景北海道Webサイト更新中

34px 新発見!絶景北海道Webサイト更新中

35px 新発見!絶景北海道Webサイト更新中

36px 新発見!絶景北海道Webサイト更新中

37px 新発見!絶景北海道Webサイト更新中

38px 新発見!絶景北海道Webサイト更新中

39px 新発見!絶景北海道Webサイト更新中

40px 新発見!絶景北海道Webサイト更新中

ということで、いかがでしたでしょうか。
個人的に文字のバランス、可読性が良いと感じるお気に入りサイズは30px、35px、37px辺りでしょうか。
今回はこの辺りを採用していきたいと思います。

ちなみにスタジオザンビでは、
北海道の大自然や観光地、珍しい風景などをラジコンヘリ(ドローン)による空撮と360°パノラマ写真で紹介するサイト『新発見!絶景北海道』を運営しています。こちらも是非ご覧ください。
http://zekkei-hokkaido.jp/

  • ヒトコトどうぞ

    ※500文字以内

    ※スマートフォンなど画像認証がうまくいかない場合は、一度[変更]してからご入力ください。

    CAPTCHA Image

    英数字5桁(変更

    コメントされていません。