【webデザイン トレンド】ニューモーフィズムとfont-size20ポイント

【webデザイン トレンド】ニューモーフィズムとfont-size20ポイント

Webデザインの流行でNeumorphismというデザイン・トレンドが注目されています。
2つのグラデーションを効果的に使って際立たせたい要素をよりシャープに見せるテクニックとしてシンプルではありますが効果的なデザイン手法になります。
そのNeumorphismと最新のUIに関係するような記事が下記アドレスで説明されています。

プロのデザイナーに学ぶ！ひと手間加えて、UIデザインの印象を改善するデザインのテクニックのまとめ

フォントサイズ推奨サイズがポイント指定

なるほど！と思いながら読み進めていくと「え？」と個人的に思う内容がありました。
font-sizeのくだりです。
みなさん、本文のフォントサイズはどの単位で指定してますか？
px、%、em、rem、vw、vhと思いつくのですが
私の場合、上記のpx、emで指定しています。ですがこの記事ではおすすめフォントサイズの単位がポイントになっていました。
グラフィックデザイナーの方は見慣れた単位ですが私の近所ではコーディングでポイントを使っているところは見かけません。
目くじらを立てるつもりはありませんがあくまでも目安としてのポイント単位ということでしょうか。
もしかしてフォントサイズのポイント指定は当たり前？モダン？私が時代に取り残されてるだけ？
人間の器が小さいですが、もと記事のサイトのフォントサイズを確認してみました。

font-sizeが21pxになっています。
ポイントではない…。
単なる単位間違い？
まぁ大きさの目安として参考にさせて頂きます。
ですが本文のフォントサイズが20ptとはどうでしょう。
グラフィックでいうところの大見出しレベルのサイズです。
ポイントからピクセルに単位換算してみます。

20ptは26.67pxになりました。
Webでも見出しレベルだと思うのですが…。

結論、権威とトレンドに弱い私としては本文のサイズを大きくしたいと思います。
実際、ブログの本文が小さいとは感じていましたのでサイズアップします。
ですが本文サイズが26.67pxはサイズ指定すると痙攣が起こりそうなので、心の折衷案で20ピクセルにします。
いや、18ピクセルにします。

まず私のブログが本文の表示をindex.phpとsingle.phpの両方に表示させています。
index.phpの本文は今まで通りのサイズでsingle.phpの本文は18ピクセルで表示させようと思います。
本文は<main>の中に入れてますのでクラス名をindex.phpとsingle.phpで振り分けてフォントサイズを別々で指定します。
index.phpの<main>を<main class=”home”>にします。
single.phpの<main>を<main class=”single”>にします。

cssは下記コードから

CSS

main p{
  font-size: 14px;
  line-height: 175%;
  padding-left:10px;
  padding-right:10px;
}

下記コードに変更。

.home p{
  font-size: 14px;
  line-height: 175%;
  padding-left:10px;
  padding-right:10px;
}
.single p{
  font-size: 18px;
  line-height: 175%;
  padding-left:10px;
  padding-right:10px;
}

そしてタブレットサイズ以上でpadding-left:10px;とpadding-right:10px;をゼロにして両端揃えにします。
@media screen and (min-width:768px){の中に

CSS

.home p{
  padding-left:0px;
  padding-right:0px;
}
.single p{
  padding-left:0px;
  padding-right:0px;
}

と記述します。

index.php

single.php