デザイン時代は変わり、CSSまわりはIE10以下ですら考慮する必要がなくなりました。ウェブ制作者として嬉しい限りです。長年ウェブ制作者を悩ませてきたCSSでのフォント指定も、少しずつ答えが見えてきたかもしれません。今回は、CSSのフォント指定についてのお話です。フォントファミリーCSSのフォントファミリーの指定は、制作者によってパターンが非常に多いです。いい加減な記述をしているサイトもよく見かけます。基本形をまとめてみましょう。sans-serif;すべてをブラウザのデフォルトフォントに任せる、制作者にとって理想的な記述です。ユーザーがMacならこれで何の問題もないでしょう。Pゴシックを標準にしているブラウザが多いため、実際にはほとんど採用されない書き方でもあります。Pゴシックだと嫌だ!という場合は、メイリオを追加してあげましょう。Macでメイリオになるのを防ぐために、更にヒラギノを先頭に追加します。Franciscoは、MacやiOS端末のシステムフォントで「小さな文字サイズでも見やすい」先進的なフォントです。小さい文字であれば日本語のほうがつぶれやすいのは明白です。日本語中心のサイトでわざわざ指定する必要があるかは分かりません。sans-serif;通常版のメイリオを游ゴシックに置き換えたパターンです。游ゴシックは、Win、Macの両方にインストールされているフォントとして注目されています。そもそもwin7に游ゴシックはインストールされていませんし、シェアの高いモバイル端末も同様です。WinとMacではインストールされている太さが異なります。現時点では、メイリオの代替として使用するのが無難です。本当に見た目を統一したいのであれば、Webフォントを使うべきでしょう。sansを使いましょう。見た目もそう悪くありません。最近では、案外これが有力な選択肢なんじゃないかと思えるようになってきました...。早期アクセスフォント名の表記についてフォント名の表記は、日本語表記と英語表記があります。OSやブラウザによって認識できるものが違うので、両方表記することも多いです。WinとMacで表記名が異なるフォントもあります。超ざっくり言えば、Macは英語、Winは日本語で記述しておけば大体認識されます。超ざっくりですけどね。数年前に書いた記事ですが、考え方は同じなので参考にしてください。2014年版ウェブフォントウェブフォントを使用するCSSの記述は以下の通り。sans-serif;}@font-faceで、フォント名を登録して、使いたい箇所にfont-familyで登録名を指定します。フォントファイルの形式はいろいろありますが、woff、woff2を押さえておけば問題ないでしょう。前の記事ですが、こちらもどうぞ。2016年版ウェブサービスの利用ウェブフォントを提供するサービスを利用する手もあります。ライセンスも明確ですので、自前でフォントファイルを用意するよりも色々な意味で手軽なのではないでしょうか。フォントサイズCSSのフォントサイズ指定は、現在「rem」を使用することが多いです。htmlタグに基準となるサイズを絶対値で指定して、それ以外の箇所は相対値を指定するのがミソ。「rem」は、「%」や「em」に比べて、入れ子になっている箇所のサイズ計算を気にする必要がないため、CSSのモジュール化にも相性バッチリです。2.4rem;}こんな感じで、htmlタグの基準サイズだけ調整してあげれば、他の要素は相対的にサイズが変わります。行間CSSで行間を指定するときはline-heightを使用します。単位をつけないことで、子要素でも自身のfont-sizeを基準とした相対的な高さが確保されます。逆に単位を付けると、絶対値が子要素に継承されます。*/}個人的には1.5だと若干詰まった感じがするので、1.75もしくは2くらいを目安に指定することが多いです。字間の自動カーニングには、CSS3のfont-feature-settingsを使います。1;上記を指定すると、フォントの中に含まれるカーニング情報によって、適切に字詰めされます。カーニング情報がないフォント(メイリオなど)では字詰めされません。日本語では全角の「」や()などの約物がよく使用されると思います。先頭に約物がある場合、これらの余計なスペースを詰めてくれるため、キレイに揃って見せることができます。0.1em;字間を調整したい場合にはletter-spacingを使用します。個人的には、font-feature-settingsでカーニングを調整すると、字間が詰まるため目が疲れます(締まって見やすい、という人も多いですが)。その上で、letter-spacingを設定してゆったりとした字間に調整することもできますが、Windowsで主流のメイリオでは、letter-spacingだけ有効になり字間が開きすぎてしまう・・・あ、そうか、だからWinでは游ゴシックを積極的に使う意味があるのか。...ということなのですが、当サイトでは、まだカーニングは使用せずに様子見の段階です。まとめまだしばらくCSSのフォントまわりには試行錯誤の余地がありますね。デザイン会社、システム開発会社を経てセブンシックスを設立。マーケティング、デザイン、テクノロジーに精通するオールラウンダーとして、県内の中小企業に向けた戦略型ホームページ制作を開始。一方で、都内の広告代理店からの要請で大企業案件にも多数参加。企業が本当に必要とするホームページ制作とは何か、を日々探求している。