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

/* 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, 0.359rem + 1.739vw, 1.75rem);

  —line–height–m: 1.55;

  —font–size–l: clamp(0.938rem, 0.448rem + 2.174vw, 2.188rem);

  —line–height–l: 1.49;

  —font–size–xl: clamp(1.188rem, 0.576rem + 2.717vw, 2.75rem);

  —line–height–xl: 1.41;

  —font–size–2xl: clamp(1.438rem, 0.655rem + 3.478vw, 3.438rem);

  —line–height–2xl: 1.36;

  —font–size–3xl: clamp(1.813rem, 0.859rem + 4.239vw, 4.25rem);

  —line–height–3xl: 1.29;

}

 

/* Utility classes */

.text–xs {

  font–size: var(—font–size–xs);

  line–height: var(—line–height–xs);

}

 

.text–s {

  font–size: var(—font–size–s);

  line–height: var(—line–height–s);

}

 

.text–r {

  font–size: var(—font–size–r);

  line–height: var(—line–height–r);

}

 

.text–m {

  font–size: var(—font–size–m);

  line–height: var(—line–height–m);

}

 

.text–l {

  font–size: var(—font–size–l);

  line–height: var(—line–height–l);

}

 

.text–xl {

  font–size: var(—font–size–xl);

  line–height: var(—line–height–xl);

}

 

.text–2xl {

  font–size: var(—font–size–2xl);

  line–height: var(—line–height–2xl);

}

 

.text–3xl {

  font–size: var(—font–size–3xl);

  line–height: var(—line–height–3xl);

}