フォントしたい(font-family)
html {
font-size: 16px;
}
body {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
line-height: 1.7;
}
文字の見た目は、書体・大きさ・太さ・行間などのプロパティで決まります。
bodyにまとめて指定しておくと、ページ全体の文字にその設定が継承されます。
一部だけ変えたいときは、その要素にプロパティを指定し直します。
フォント書体したい(font-family)
body {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
font-familyプロパティで、文字の書体を変更できます。
スペースを含む書体名は"Hiragino Kaku Gothic ProN"のように引用符で囲みます。
書体はカンマで区切って複数指定できます。 ただし、利用者の環境にない書体はスキップされます。
注釈
sans-serif(ゴシック体)やserif(明朝体)は総称ファミリーです。
どの環境でも必ず何かの書体に割り当てられるため、最後に指定しておくと安全です。
フォントサイズしたい(font-size)
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* 16px の 2倍 = 32px */
}
font-sizeプロパティで、文字の大きさを変更できます。
単位はpxやremなどで指定します。
pxは絶対単位で、remはルート要素(html)のfont-sizeを基準にした相対単位です。
注釈
emという相対単位もあります。
これは親要素のfont-sizeを基準にした倍率で指定します。
フォントウェイトしたい(font-weight)
strong {
font-weight: bold;
}
.thin-heading {
font-weight: 300;
}
font-weightプロパティで、文字の太さを変更できます。
normal(標準)とbold(太字)のキーワードのほか、
100から900までの数値でも指定できます。normalが400、boldが700に相当します。
行間を広げたい(line-height)
body {
line-height: 1.7;
}
line-heightプロパティで、行と行の間隔を変更できます。
単位なしの数値を指定すると、その要素のfont-sizeに対する倍率になります。
1.7なら文字の高さの1.7倍が1行の高さです。
本文は1.5〜1.8くらいにすると読みやすくなります。
見出しは行が詰まっていてよいので、1.2前後にすることが多いです。