完全に自分用のメモ

by HoRizonner

最近、メモ代わりにブログを使ってます。
エバーノートとかに描いても、よくわかんなくなるほど整理が下手なもので・・・。

最近ついつい忘れがちになるCSSとかタグについてポロポロ考えたりしてます。
例えば、フォントサイズ。
いまだに職場とかでコードたたいてると、フォントサイズに絶対値とかがあるんですよね。16pxとか。
あれみると、ちょっとだけドキッとします。いや、本当は正しいんですけどこう、レスポンシブとかでスマホとかで見たら、なんか変な見え方するんじゃないか・・・って不安になるんですよね。
俺だけ？俺だけか。
というか、最近pxで設定するのがちょっと怖いんですよね。いや、細かな調整とか結局px単位でやるんですけど。（あと完全PCサイトとか）
でも、flexboxとかbox-sizingとか、flex-gridとかできてきたおかげで、最近はpx単位を使わずに生活できるのではないか？とか思ったりしてます。（svgとか）
そんなときにちょっと扱いに困るのが、フォントのサイズ。
本当のことを言えば、そこまでサイトのフォントにこだわってなかったっていうのが本音なんですが（デザイナー失格）。
ということで、ここらで、パッとまとめてしまいたくて、ちょっと描いてるわけです。

どうでもいい話ですけど、この時期になると発売されるデザイン雑誌とかで「分かる！文字組の基本！」みたいな特集組まれてるから「タイポグラフィとか、文字効果とかの特集かな！？」って思って読んだら、延々とinDesignのアキツメ設定とか書いてあるとか・・・ありません？あれ、マジで意味不明ですよね。まぁ雑誌作った時に、ことの重大さを痛いほど体感しましたが・・・。

フォントの設定で最低限しなくちゃならないこと。

とりあえず、webでフォントの設定を触るといっても、細かな文字組なんかは限界があります。（頭おかしいところは一文字々々々にツメ設定するそうですが・・・）
簡単にできることをまとめてみます。

・フォントの種類（ゴシック体とか明朝とか）
・フォントのサイズ
・フォントの字幅設定
・長体と平体
・行間の設定
・フォントカラー

フォントの種類

これは、まぁ必須ですよね。
いわゆるフォントファミリーってやつですね。
基本的に、ゴシック体でいいんじゃないでしょうか？たまに明朝でまとめてるサイトとかあるんですけど、ちょっと読みにくいんですよね・・・。
まぁ、雰囲気をゴリゴリに演出したいなら明朝でもいいんじゃないかと思いますが・・・。
最近はwebフォントもあるから、いろんな演出や設定。デザインが考えられますよね。
とりあえず、自分用にいつも使いそうなやつをのっけます。

font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

フォントのサイズ

今一番ホットなのがこいつ。
特に最近はCSSで使えるいろんな単位があるからどれで設定していいのかわからない。
しかも、このサイズによって行間とか関係してくるからなおさら。こいつが関係する領域が多いから絶対値で設定してあるとドキっとするのかもしれない。どっかで崩れたりしてないか・・・とかね。
小心者なんでしょうか。
これに関して、自分のなかでなんとなくこれが最適解なんじゃないかなぁ～って思ってるのはズバリ「vw指定」。
これだと、レスポンシブとかの画面横幅サイズに合わせて勝手にリサイズしてくれるそう。
横幅320pxの時にフォントを14pxで表示させたいときは、
14px÷320px＝0.04375(4.375%)になるので、「4.375vw」だそうです。
この計算式を書いてないと絶対忘れますよね。
あと、これだけだと時々ビッグカメラとかで売られてるアホみたいな画面サイズのPCとかでみると、文字がアホみたいに大きくなるので、結局メディアクエリとかで最大サイズを指定しなくちゃいけないっぽいです。
max-widthみたいに、max-fontsizeとか作られないんでしょうか・・・。あー、でもそれはそれで面倒くさそう。
あと、文字サイズを調整したりするときは、em単位で設定する。文字を少し大きくしたいときは1.2emとかね。

とりあえず・・・。

font-size: 16px;
-webkit-text-size-adjust: 100%;
font-size: 4.375vw;

@media(min-width:500px){
  font-size:18px;
}

とかがオススメされてました。メディアクエリの部分はなんとかならないものでしょうかね・・・？

フォントの字幅設定

字幅設定っていうか、カーニング？
こちらは悩まず、以下の魔法の言葉をとりあえず流し込みましょう。イエス。思考停止。

font-feature-settings: "palt" 1;

長体と平体

まずそこまでやらないと思うけど、念のため。
見出しとかにちょっとだけ長体かけるとかっこよく見えるかもしれないでしょ？
ぶっちゃけ、長体は結構な頻度で使うんだけど、平体って滅多に使わない・・・ていうか、使ったことない・・・。
たまにphotoshopのフォント設定が常に長体になったままデザインしてる時もありますが・・・。まぁ見出しだけとかに使うとちょっとサイトが締まるかもしれませんね。

font-stretch:95%;

行間の設定

行間に関しては、昔どこかで「とりあえずフォントサイズの1.2倍にしろ」って聞いた記憶があります。もちろん全部がそうではありませんが。
ただ、英語の小文字とかが入ると、これまたちょっとおかしくなったりするので、とりあえず1.5～2.0くらいでしょうか？
うぅむ、2.0にすると、ちょっと空きすぎでは？

line-height:1.75;

フォントカラー

まぁ、これも白地に対して黒文字（#000）だと、キツすぎるということで、ちょっとグレイにした方がいいという観点から

color:#333;

鉄板ですね。

あと細いの

説明するのめんどいからコメントアウトで残す。

text-align: justify;
/*テキストを行末揃えにする。何気に一番便利な気がする*/

まとめ

こんなもんでしょうか。知らん。わからん。眠い。
おそらくいつかのオイラが修正してくれるでしょう。
リセットcssに、とりあえずこれ追加しておけば、余計なこと考えなくて済みそうですね。
というわけで、コピペのアレ置いておきます。自分用です。わっはー

body{
  font-family: “游ゴシック Medium”, “游ゴシック体”, “Yu Gothic Medium”, YuGothic, “ヒラギノ角ゴ ProN”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  font-size: 4.375vw;
  font-feature-settings: “palt” 1;
  font-stretch:95%;
  line-height:1.75;
  color:#333;
  text-align: justify;
}
@media(min-width:500px){
  body{
    font-size:18px;
  }
}

以上。webフォントとか使うと、また設定とか変わってくるかもね。
じゃあ、おやすみ。

HoRizonnerAgrippa