CSSのfont-familyで流行で主流の設定はコレだ!

font-family
現時点のベストfont-familyだとを色々なサイトを参考に考察してみます。
そんなに急激に変わるものではないですが、常に最新のfont-familyを模索しています。
WindowsのフォントとMACのフォントだけでなくiOSやAndroidといったマルチプラットフォームに対応したfont-familyの追求に終わりが来る日はあるのでしょうか?

SPONSORED LINK

人気のあるfont-family

人気のあるfont-familyは言い換えれば見やすくてクールなfont指定ということですよね?
fontの指定一つでサイトの印象がガラっと変わるので、流行も含めて常に最新を追っていきたい思考の方は是非。

font-family 2016

font-family: Quicksand, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif;

2015年版のfont-familyから大きな変更はありません。フォントのデザイン性も一段落している印象です。
まだまだ安定のメイリオは念の為健在しています。
先頭に指定されるQuicksandで数字などのフォントもカバーしている最新のfont-familyですね。

font-family 2015

font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif;

游ゴシック体でおしゃれさを醸しだしています。ちゃんとメイリオで受け皿を用意しています。
おしゃれな雰囲気を前面に押し出せるfont-familyとなっています。

font-family 2014

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

例年通りですが、全ての指定を日本語なしで運用しているサイトも多くなってきた印象です。
‘Hiragino Kaku Gothic Pro’,Meiryo,’MS PGothic’,sans-serif;」というように。
font-familyはブラウザの対応によってどんどん簡単に記述できるようになってきています。

font-family 2013

font-family:'Lucida Grande','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;

もはや説明は必要のないCSSフォント指定です。
Lucida Grandeについては英数字の最適化を考慮しての指定ですが、削ることもできますね。

まとめ

念のため大手サイトも拝見していますがまったく参考になりません。
数年前から変わっていない・・・。
大勢に見られるサイトなので、簡単に変更できないんでしょうね。

今日も知識欲は止まらない。

関連トピック

liquid-layout

リキッドレイアウト作成方法と簡易テンプレート

可変カラムに対応したリキッドレイアウトの作り方と超簡易テンプレートです。 「レスポンシブかリキッドで悩んでいる」という意見は半分間違い

breakpoint

レスポンシブのブレイクポイントを設定する前に知っておくべきこと

Googleも推奨するレスポンシブウェブデザインですが、最初の設計がしっかりしていれば将来性も上がってメンテナンスにも有利なサイト運営が

css-shadow

CSSの枠線は薄っすらシャドウで影を付けるボーダーデザインが素敵

CSSだけで再現できる影付きボーダーはフラットデザインでは中々表現しにくい高級感を出したり、フラットを勘違いした古臭さを除去できると

css

スマホでoverflow:auto;を手軽に実装する

スマホでoverflow:auto;を手軽に実装するには、 Android2.X系のバグとか色々あってとっても面倒です。 最近はAn

Lined

CSSでボックスを横並びでグリッドデザインしちゃう方法まとめ

CSSで横並びを実現する方法はいくつもありますが、ちょっとした挙動の違いや注意点も含めて見ていきます。利用箇所に合わせて適切なCSSを選

css

サイト全体がずれる css スクロールバー ページの高さが長い場合

ページの高さが長い場合にスクロールバーが表示され、 サイト全体がずれる現象の対処方法メモ 一画面で収まる内容のセンタリングされたペー

html

仮バナー・模擬バナーを設置してサイズ確認しながらコーディング

サイトデザインで、この部分にこのサイズの画像を置いたらどういう配置なるかな? という場面で好きな画像サイズを即配置できる便利サイト。

公開日:2013/08/15