eye-catch-scss
前置き

本当は明朝体の他、ゴシック体、等幅書体、アイコンフォント用のmixinをまとめたmixinファイルを使って各案件につかいましています。正直な話、日本語のfont-familyの指定方法について「これがベストプラクティス!」というものは存在しません。諸条件を確認し、ロジックで詰め、そして、新しいデバイスやOSが発表される毎に崩壊する。それがfont-familyの宿命だと思います。

現在利用しているフォントファミリーはこちらを利用しています。というのも、DTP Transit様のCSSでのフォント指定について考える(2014年)で書かれている、考え方とそれに纏わる話に共感ができるからです。

明朝体は2種類のfont-familyを用意した。

実は言うと、実案件ではほとんど明朝体のフォントを利用したことがありません。アミテンサイトを制作するにあたり、いつもの通りなんとなく進められている明朝体のfont-familyを利用したところ…確かにフォントはカッコイイんだけど、全体的になにか格好悪い。

普段、フォント関係にはフォント無頓着なので、気づくのに時間がかかりました。

嘘です。オヤジギャクを言ってみたかっただけです、速攻で気が付きました。
英文字の高さと日本語の高さがちぐはぐでコンテンツや見出しの文章が非常に読みづらいため、全体的に格好悪い印象を与えていました。

つまり、コンテンツ内では英字が強い書体は省いたほうが良さそうとうことです。

2つのmixinを用意して使い分けることに。

それほど難しくない結果となりましたので、まとめたscssは最後に記載することとして、先に簡単に説明を入れておきます。

コンテンツ用に強すぎる英字のフォントを外す。

だいたいの設定に「Times New Roman」か「Georgia」のどちらかが入っているかと思います。これらはコンテンツ内で日本語明朝体と並ぶと違和感がでるので除外します。
また、winとmac両方で使えるということで記憶に新しい?フォント「游明朝(YuMincho)」ですが、これも英字が尖っていて好みでないので外したい…ところですが、winでは標準でこれ以上に綺麗なフォントが入っていないので、優先順位だけ入れ替えます。

結果
  • コンテンツ用は、ヒラギノ明朝 → 游明朝 → メイリオとか。
  • 英字タイトル用は、Times New Roman か Georgia → 游明朝 → ヒラギノ明朝 あとメイリオとか。

の順番になりました。

これらは完全なる独断と偏見です。(たんなる好みの問題です。)

最近はウェブフォントのサービス向上がすさまじいものがあるので、来年には今考えている事自体が無駄になるかもしれませんが、今年いっぱいはこんな感じで言ってみようかと思います。

page
1 / 1