本日は、このブログで設定した書体と段落設定をご紹介します。
書体は游ゴシック体
このブログの書体は、游ゴシック体です。
Microsoft Windows10やOffice 2016の標準フォントに採用されたことを知り、使ってみることにしました。調べてみると、Mac OS 10.9とWindows 8.1から標準で搭載されているそうです。
流行に鈍感なわりに、新しもの好きなのです。
(*^-^*)>"
書体サイズは17px
ブラウザーの初期値は16pxが多いそうです。歳のせいか小さな文字が読みづらくて、年相応にチョットだけ大きくしてみました。
行間は1.7
このブログは間の抜けた話題が多いので、行間もゆったりさせてみました。
段落の間隔は1.2em
これは、1番悩みました。参考にさせていただいた記事では、1.4〜1.7emぐらいが良いと教えていただいたのですが、個人的に開きすぎるのは・・・。
なので、とりあえず1.2emです。
文字詰め
最近知ったのですが、和文書体でも文字詰め（カーニング）ができるそうです。今までですと、文字の幅はみな同じで原稿用紙に並べたようになっていました。ところが和文書体の中には、英文書体のように各文字に適した高さや幅の情報をもっているそうです。
実際に設定したところ確かに詰まったのですが、むしろ詰まり過ぎた印象を受けました。
なので、文字の間隔も同時に設定してみました。
設定する場所は
”ダッシュボード → デザイン → カストマイズ → デザインCSS”です。
これらの設定は、すべてCSSで行いました。
body {
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
'Segoe UI', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体",
"ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
font-size: 17px;
text-rendering: optimizeLegibility;
font-feature-settings: "palt" 1;
letter-spacing: 0.04em;
line-height: 1.7;
}
p {
margin-bottom: 1.2em;
}
| セレクタ | プロパティ | 備考 |
|---|---|---|
| body | font-family | 書体 |
| font-size | 書体サイズ | |
| font-feature-settings | 文字詰め（OpenTypeフォント） | |
| text-rendering | 文字詰め（Webフォント） | |
| letter-spacing | 文字の間隔 | |
| line-height | 行の間隔 | |
| p | margin-bottom | 段落の間隔 |
あ、そう言えば・・・。
フォントを指定するときには、"英文書体→和文書体→総称フォントファミリー"の順番が良いそうです。
Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ
私は今まで"和文書体→英文書体→総称フォントファミリー"の順で設定していました。
(*^-^*)>"
まとめ
本日は、このブログに設定した書体と段落設定をご紹介しました。機能の解説がまったくないじゃん！という声が聞こえてきそうですが・・・。私が参考にさせていただいた諸先輩方の記事が素晴らしく、それ以上のものが書けませんでした。
ごめんなさい。
m(x_x)m
🙇
おしまい
おまけ
文字詰めをしたところ、愛用のiPhone5Cでは'"『"がおかしなことになっていることに気がつきました。先日アップした"リアル鬼ごっこ"が・・・。
『のある鬼ごっこ』って、何ですか？
(･_･?)
以上です
