今更ながら【font-family】の話

クリエイティブ事業部の與世山(よせやま)です。
前回、Google アナリティクスのログを分かりやすくグラフ化してくれる便利なツール「データポータル」紹介しました。今回その続きを記事にしようとがんばったのですが、挫折してしまいました。。。。すいません。「データポータル」の良さをうまく説明するには、まだまだ経験が浅かったなと痛感しています。もう少し経験と情報がたまったら【その2】を記事にしようと思います。
気を取り直して今回は「今更ながら【font-family】の話」をします。日頃、楽天カスタマイズなどのPC環境用のサイトを作る業務を重ねて、ふと!ブラウザが表示する「font-family」の現状をまとめてみました。

環境依存のFONT設定

今ではWeb フォント使い、どの環境でも同じ書体を表示することができます。しかし、Web フォントは通信環境に依存したものですから盤石なものではありません。ここで改めて【font-family】は何を指定していたらいいのか?どの環境にどのFONTを指定したら問題はないのか、情報を集ました。
CSSで設定するfont-familyプロパティは、値に記述した書体をの順番から優先的に表示していきます。とはいえ、ブラウザを閲覧する環境を優先するため、絶対に指定したFONTを表示させることはできません。(それならWeb フォントをつかってくださいね!)なのでサイト制作者側のささやかな願望のFONT指定でしかないのです。それでも大概の閲覧環境ではsans-serif書体(日本語ではゴシック体)とserif書体(日本語では明朝体)のFONTは用意されているのでテキスト部分の書体をコントロールすることは可能なのです。それぞれの環境の書体を見てみましょう。
●WindowsのFONT環境
・MS Pゴシック(MS PGothic)※Windows95
・MS P明朝(MS PMincho)※Windows95
・メイリオ(Meiryo)※Windoes Vista以降
・Meiryo UI(Meiryo UI)※Windows7
●MacのFONT環境
・Osaka Osaka ※MacOS X
・Osaka-等幅(Osaka-Mono)※MacOS X
・ヒラギノ角ゴ Pro W3(Hiragino Kaku Gothic Pro)※MacOS X
・ヒラギノ明朝 Pro W3(Hiragino Mincho Pro)※MacOS X
・ヒラギノ角ゴ(ProN W3 Hiragino Kaku Gothic ProN)※MacOS X(10.5)
・ヒラギノ丸ゴ(ProN W4 Hiragino Maru Gothic ProN)※MacOS X(10.5)
・ヒラギノ明朝(ProN W3 Hiragino Mincho ProN)※MacOS X(10.5)
●UNIX系のFONT環境
・sans-serif
・serif
実際は、もっと多くの書体がパソコンのシステムにありますが、指定を厳格にしたとしても閲覧者の環境に指定したFONTがないと代替えフォントが適用されます。しかしながら制作側は、どんな環境でも違いが少ないのが望ましいので試行錯誤をしています。

今どきのFONT設定とは?!

ではどのような指定方法がいいのか下記にまとめました。
スタンダードなゴシック体指定
font-family: ‘Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, Osaka, ‘MS PGothic’, arial, helvetica, sans-serif;
今どきのゴシック体指定
font-family: “Hiragino Sans W3”, “Hiragino Kaku Gothic ProN”, “ヒラギノ角ゴ ProN W3”, “メイリオ”, Meiryo, “MS Pゴシック”, “MS PGothic”, sans-serif;
明朝体
font-family: “游明朝”, YuMincho, “Hiragino Mincho ProN W3”, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “HG明朝E”, “MS P明朝”, “MS 明朝”, serif;
まとめとして最後に、font-familyの今後の動向は、Webフォントの指定が主流になっていくことでしょう。それでも古いサイト、古い閲覧環境が残ることも考えられます。(公共施設や自治体などのリニューアルがされないサイトなど)どんな状況でも、読みやすい分かりやすいタイポグラフィーをととのえるのはデザイナーの務めだと思います。
参考にしたサイト
もう迷わない、「@font-familyはこれでOK!」を色々考えてみた
【2021年版】font-familyの正しい指定方法とおすすめフォント設定まとめ

ファイブスターコーポレーションでは、ホテル・宿泊施設の集客や運営に
お困りの事業主様・オーナー様をサポートする様々なサービスを提供しています。
まずはお気軽にご相談ください。

ファイブスターコーポレーションの紹介動画はこちら⇓

関連記事

カテゴリー

最近の記事

  1. 【Agoda】「どうしてこんなに割引されているの?」に対するお答え!

  2. 販促のすゝめ!Photoshopを用いた画像編集のご紹介

  3. 日本の観光産業を追うおすすめ必読サイト

  4. 楽天トラベル新機能「ニュース&トピックス」活用出来ていますか?

  5. 宿泊業界で活かすChatGPTの運用例をご紹介

お問い合わせINQUIRY

お気軽にご相談をください。

宿泊施設の運営にお困りの事業主様、これから宿泊施設を運営したいとお考えの方
ご質問・ご相談などお気軽にご相談ください。

お問い合わせはこちら

採用情報RECRUITMENT INFO.

私たちと一緒に働きませんか

明るく、人と接することが好きな人で向上心がある人をお待ちしております。
(ホテル業・観光業・旅行業・営業職の経験者を優遇)

採用情報はこちら

TOP