見出し等の文字サイズを Snow Monkey v18 と同じものにする CSS

Snow Monkey v19 から、メディアクエリで文字サイズを拡大縮小していたのを廃止したのですが、今日 Twitter を眺めていたら、その変更の影響でタイトルや見出しが画面ピッタリに収まっていたのが数文字落ちてしまうようになった、というつぶやきを見つけました。

そこをあまり意識していないアップデートだったので大変申し訳なかったのですが、確かに v18 のデフォルトでぴったり収まっていたものが収まらなくなったら困るよなということで、v18 のときと同じ文字サイズを再現する CSS を書きました。

適当な CSS ファイルやカスタマイザー→追加CSSに貼り付けてみてください。

見出し用

h2,
h3 {
  font-size: 1.2rem; // 19.2px
}

@media (min-width: 1024px) {
  h2,
  h3 {
    font-size: 1.5rem; // 24px
  }
}

セクションタイトル用

.smb-section__title {
  font-size: 1.5rem; // 24px
}

@media (min-width: 1024px) {
  .smb-section__title {
    font-size: 2rem; // 32px
  }
}

ページタイトル用

.c-entry__title {
  font-size: 1.66667rem; // 26.66672px
}

@media (min-width: 640px) {
  .c-entry__title {
    font-size: 2rem; // 32px
  }
}

@media (min-width: 1024px) {
  .c-entry__title {
    font-size: 2.5rem; // 40px
  }
}

clamp() の導入

v19 でも、大きい文字サイズの場合は clamp() を使って画面サイズが小さいときには少し小さくなるようにしていたつもりだったのですが、実は完全に勘違いしていて、clamp() で調整していたのは余白サイズだけでした…。

なので文字サイズについても clamp() を導入して小さな画面サイズのときは文字が少し小さくなるようにしようと思います。

開発は下記の issue で進めますので、リリース前に試してみたいという方、開発に参加してみたい、覗いてみたいという方はぜひ見てみてください。

文字サイズを clamp で縮小拡大しているが、縮小率が少なめなのでもっと縮小率を上げたほうが良いか検討 · Issue #1319 · inc2734/snow-monkey

↑タイトルは勘違いで、現状 clamp が使われているのは余白まわり（と line-height）のみ。文字サイズは clamp になっていないので、まずは clamp を導入するところからは…

github.com