こんにちは。アウラスタッフのコーダーの仁木です。
アウラのデザイナーさんはデザインデータをくれる時はいつもPhotoshopでくれます。それを元にコーディングを進めていきます。

当たり前ですがデザインデータにはテキストが入っています。テキストは見出しや文章など使われる箇所によって様々にデザインされていますが、これをコーディングする時に見落としたり、プロパティが正しく設定出来ていなかったりするとブラウザに映したときにデザインデータ通りの見た目に出来ず、デザイナーさんが綺麗に整えたバランスが崩れてしまう要因になったりします。

今回はPhotoshopのデザインデータとCSSのフォント関連のプロパティのことについてまとめます。

よく使うCSSプロパティ

フォントファミリ　『Font-Family』

Font-Familyを指定する時に気を付けたいのが、表示してほしいフォントがパソコンに入っていなかった時に代替として表示するためにフォントの指定は必ずいくつかのフォントを指定しましょう。
ゴシック体はゴシック体系の代替フォント、明朝体は明朝体系の代替フォントを指定してあげると良いです。
僕の場合、フォントファミリの指定にはよく下のようにしています。

ゴシック体

font-family: “Meiryo”, “Hiragino Kaku Gothic Pro”, “Yu Gothic”, Verdana, Geneva, sans-serif;

明朝体

font-family: “游明朝”, YuMincho, “Hiragino Mincho ProN”, “Hiragino Mincho Pro”, “ＭＳ 明朝”, serif;

後述してある、プロポーショナルメトリクスを使用できるのでメインのゴシック体は游ゴシック体でも良いかもしれませんね。
アウラではメイリオがメジャーなので現在はメイリオをメインで使う指定にしています。

フォントサイズ　『Font-Size』

文字サイズはPhotoshopのフォントサイズです。単位の指定には”rem”、もしくは”em”をよく使います。remはIE8は対応していないので『rem.min.js』など、ポリフィルのスクリプトを読み込んでおきましょう。

行送り　『Line-Height』

Photoshopの行送りの値からLine-Heightの値を出すための計算は

行送りの数値（px）÷ フォントサイズ（px）

CSSの値に入れる時は単位は指定しない方が良いでしょう。

トラッキング(文字間隔)　『Letter-Spacing』

Photoshopのトラッキングの値からLetter-Spacingの値を出すための計算は

トラッキングの数値（px）÷ 1000

文字の太さ　『Font-Weight』

文字の太さは100~900まで指定はできますが、ブラウザではノーマルとボールドしか設定されていないことが多いです。700以上は全てBoldの指定と同様に、以下はNormalと同様に表示されます。
なので、指定は「normal」か「bold」で良いでしょう。

斜体　『Font-Style』

斜めの文字は「italic（イタリック体）」、「oblique（斜体）」で指定します。イタリック体と斜体どちらも用意されていないフォントはobliqueを指定すると文字を斜めに倒す処理をします。

下線・打ち消し線　『Text-Decoration』

下線はリンクによく使いますね。それぞれ「underline」、「line-through」を指定します。

インデント　『Text-Indent』

１行目の文字の始まりをずらすときに使います。
応用としてリストっぽく見せたい場合には

text-indent: -Xem;
margin-left: Xem

としてあげると２行目以降がずれてくれます。

日本語フォントを自動でカーニングしてくれる『font-feature-settings』

ICSさんの記事を参照させていただきました。ここのより詳しい内容はリンク先で読むことが出来ます。

OpenTypeフォント（OTF）にはフォントの字間情報を制御する「プロポーショナルメトリクス」という機能がつけられているものがあります。

font-feature-settings : “palt” 1;

この機能を使って自動で適切な文字間にしてくれます。このプロパティはIE9以下は対応していませんが、ほとんどのメジャーなブラウザは対応しています。

使用できる日本語フォント

有名なフォントでは「ヒラギノ角ゴシック体」、「ヒラギノ明朝体」、「游ゴシック体」、「游明朝体」、「Noto Sans CJK JP」で使用できます。メイリオはプロポーショナルメトリクスの機能がつけられていないので残念ながら使えません。

一部のブラウザで不具合があるようです、

1. Microsoft Edge 14やIE 11において、text-align:justifyとtext-justify:inter-ideographとfont-feature-setting : “palt”を組み合わせて使った際に、両端揃えにならない
2. iOSとmacOSのSafari 10において、font-feature-setting : “palt”を使うと、約物やくもの（句読点・疑問符・括弧・アクセント）の直後にリンク要素があると、約物の文字の間隔が潰れる

縦書き・横書きの指定『writing-mode』

writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-webkit-writing-mode:vertical-rl;

和風なデザインでよく見かける縦書きはこのように指定すると良いようです。クロスブラウザに対応するためにプレフィックスも書いています。

だいたい僕が使うものはこんなくらいです。
フォントファミリなんかで、どうしてもこのフォントが使いたいけれど画像じゃない方がいいなぁっていうときはフォントを読み込んで使ったりしていますが、そういう時のフォントの読み込みもまた記事にしてみようかなと思います。