Blog

Information from Wisteria Design

リニューアルで使用したもの #font

今回のホームページリニューアルでは、
WordPressとBootstrap3を利用しています。

前回はペライチだったのでWordPressは利用せず、Bootstrap3でhtmlを書いていました。

fontはGoogle Web Fontを使用しており、日本語フォントには”Noto Sans Japanese”で、
英字には”Raleway”を使用しています。

見出しなどの筆記体調のfontは”Pcifico”によるものです。

日本語のWeb Fontは収録文字数がアルファベットに比べ多くなってしまうので、
どうしても重くなってしまうのが弱点ですが、
今回は閲覧環境によっての表示誤差を少なくしたかったためWeb Fontを導入しています。

見出し部分は画像処理してしまってもよかったのですが、せっかくWeb Fontを使用しているので、
基本的にテキスト処理で対応しています。

Fontの設定では、文字の読みやすさを考慮して基本的には以下の設定にしています。


p {
letter-spacing: .15em;
line-height: 1.75;
}

行間・文字間にゆとりをもたせることで文字が詰まった印象を和らげ、
読みやすくなっているかと思います。

またグローバルナビゲーションは、
PC・SPともにドロワーメニューを採用して上部固定にし、メニューを開くと上から降りてくるパターンです。

こちらのFontサイズは”px”や”em””rem”を使用せず、”vw”を使用しております。
“vw”とは簡単に言うと閲覧画面に合わせたサイズ指定方法になります。(超雑説明)

PCで表示させると、かなり大きくインパクトのあるメニュー展開

しかし、SPで表示させると普通のサイズに

これを”px”指定とかでやると設定がちょっと面倒なのですが、”vw”指定でやると簡単です。

“vw”の使い方などは別の機会にtipsとして掲載できればと思います。

今回はリニューアルにおけるFont設定をお伝えいたしました。

Connect with Us

見積もりが必要な場合や質問がある場合は、お気軽にお問い合わせください。
また、無料の相談も受け付けております。

Need to takl us ?

FREE QUOTE