2025年11月12日(水)

これなら超簡単！ CSSのclamp()によるレスポンシブ対応のフォントサイズを数クリックで定義できるツール -Size Matters

• 0
• 18
• 28
• 0

/* Size Matters Type Scale

* Generated on 2025-10-21

* Base: 16px, Ratio: 1.25, Steps: -2 to +5

* Viewport: 360px - 1280px

*/

:root {

  /* Base font size */

  --font-size-base: 16px;

  /* Type scale tokens */

  --font-size-xs: clamp(0.375rem, 0.179rem + 0.87vw, 0.875rem);

  --line-height-xs: 1.6;

  --font-size-s: clamp(0.5rem, 0.255rem + 1.087vw, 1.125rem);

  --line-height-s: 1.6;

  --font-size-r: clamp(0.688rem, 0.443rem + 1.087vw, 1.313rem);

  --line-height-r: 1.6;

  --font-size-m: clamp(0.75rem,...