200519学習記録：文字のデザイン基本設定

Mana本

フォント

まとめ

html{
  font-size: 100%;
}

body{
  font-family: ;"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
  line-height: 1.7;
}

〇サイズ　
おすすめは、14～18px

p{
 font-size:14px;
}

スタイルシートでfont-size:100%を指定すると。ブラウザでユーザーが指定したサイズで表示される。
その上で文字の一部分のサイズを変えたい場合は「rem」を使う。1remが100%指定のサイズと同じ。それを基準に変える。

html{
 font-size:100%;
}

.midashi{
 font-sizu:1.5rem;
}

〇フォントの種類
下は「游ゴシック」を基本としたフォントファミリー。

・「游ゴシック」を基本としたフォント設定の解説
https://blog.yoshinonaco.com/font-family-2020/
・フォント設定全般に関しての解説
https://saruwakakun.com/html-css/basic/font-family-how-to

font-family: ;"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;

〇行間設定
おすすめは、1.5～1.9の間

p{
 line-height:1.7;
}

〇文章の揃え
justifyで設定すると右端がきれいに揃う

p{
 text-align:justify;
}

〇枠と文字の間の余白
最低でも文字サイズの1～1.5倍程度のpaddingをつくる

.tekitou{
 padding:16px;
}