CSS clamp() フォントサイズサンプル

【A-1-1】最小viewport 320px - 768px Minor Second - Major Second 丸めver.

https://type-scale.com

見出し1 あかさたな日本の春夏秋冬

見出し2 あかさたな日本の春夏秋冬

見出し3 あかさたな日本の春夏秋冬

見出し4 あかさたな日本の春夏秋冬

見出し5 あかさたな日本の春夏秋冬

見出し6 あかさたな日本の春夏秋冬

段落。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。

h1 1.38rem/22.08px - 1.8rem/28.8px
h2 1.3rem/20.8px - 1.6rem/25.6px
h3 1.22rem/19.52px - 1.42rem/22.72px
h4 1.14rem/18.24px - 1.27rem/20.32px
h5 1.07rem/17.12px - 1.13rem/18.08px
h6 1rem/16px

【A-1-2】最小viewport 320px - 1200px Minor Second - Major Second 丸めver.

https://type-scale.com

見出し1 あかさたな日本の春夏秋冬

見出し2 あかさたな日本の春夏秋冬

見出し3 あかさたな日本の春夏秋冬

見出し4 あかさたな日本の春夏秋冬

見出し5 あかさたな日本の春夏秋冬

見出し6 あかさたな日本の春夏秋冬

段落。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。

h1 1.38rem/22.08px - 1.8rem/28.8px
h2 1.3rem/20.8px - 1.6rem/25.6px
h3 1.22rem/19.52px - 1.42rem/22.72px
h4 1.14rem/18.24px - 1.27rem/20.32px
h5 1.07rem/17.12px - 1.13rem/18.08px
h6 1rem/16px

20220628追加 【A-1-4】最小viewport 375px - 1200px Minor Second - Major Second 丸めver.

https://type-scale.com

https://min-max-calculator.9elements.com/

見出し1 あかさたな日本の春夏秋冬

見出し2 あかさたな日本の春夏秋冬

見出し3 あかさたな日本の春夏秋冬

見出し4 あかさたな日本の春夏秋冬

見出し5 あかさたな日本の春夏秋冬

見出し6 あかさたな日本の春夏秋冬

段落。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。

h1 1.38rem/22.08px - 1.8rem/28.8px
h2 1.3rem/20.8px - 1.6rem/25.6px
h3 1.22rem/19.52px - 1.42rem/22.72px
h4 1.14rem/18.24px - 1.27rem/20.32px
h5 1.07rem/17.12px - 1.13rem/18.08px
h6 1rem/16px

【A-2-1】最小viewport 320px - 768px Minor Second - Major Second

https://type-scale.com

見出し1 あかさたな日本の春夏秋冬

見出し2 あかさたな日本の春夏秋冬

見出し3 あかさたな日本の春夏秋冬

見出し4 あかさたな日本の春夏秋冬

見出し5 あかさたな日本の春夏秋冬

見出し6 あかさたな日本の春夏秋冬

段落。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。

h1 1.383rem/22.13px - 1.802rem/28.83px
h2 1.296rem/20.74px - 1.602rem/25.63px
h3 1.215rem/19.44px - 1.424rem/22.78px
h4 1.138rem/18.22px - 1.266rem/20.25px
h5 1.067rem/17.07px - 1.125rem/18.00px
h6 1rem/16.00px

【A-2-2】最小viewport 320px - 1200px Minor Second - Major Second

https://type-scale.com

見出し1 あかさたな日本の春夏秋冬

見出し2 あかさたな日本の春夏秋冬

見出し3 あかさたな日本の春夏秋冬

見出し4 あかさたな日本の春夏秋冬

見出し5 あかさたな日本の春夏秋冬

見出し6 あかさたな日本の春夏秋冬

段落。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。

h1 1.383rem/22.13px - 1.802rem/28.83px
h2 1.296rem/20.74px - 1.602rem/25.63px
h3 1.215rem/19.44px - 1.424rem/22.78px
h4 1.138rem/18.22px - 1.266rem/20.25px
h5 1.067rem/17.07px - 1.125rem/18.00px
h6 1rem/16.00px

【B-1】最小viewport 320px - 768px Major Second - Minor Third

https://type-scale.com

見出し1 あかさたな日本の春夏秋冬

見出し2 あかさたな日本の春夏秋冬

見出し3 あかさたな日本の春夏秋冬

見出し4 あかさたな日本の春夏秋冬

見出し5 あかさたな日本の春夏秋冬

見出し6 あかさたな日本の春夏秋冬

段落。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。

h1 1.802rem/28.83px - 2.488rem/39.81px
h2 1.602rem/25.63px - 2.074rem/33.18px
h3 1.424rem/22.78px - 1.728rem/27.65px
h4 1.266rem/20.25px - 1.44rem/23.04px
h5 1.125rem/18.00px - 1.2rem/19.20px
h6 1rem/16.00px

【B-2】最小viewport 320px - 1200px Major Second - Minor Third

https://type-scale.com

見出し1 あかさたな日本の春夏秋冬

見出し2 あかさたな日本の春夏秋冬

見出し3 あかさたな日本の春夏秋冬

見出し4 あかさたな日本の春夏秋冬

見出し5 あかさたな日本の春夏秋冬

見出し6 あかさたな日本の春夏秋冬

段落。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。

h1 1.802rem/28.83px - 2.488rem/39.81px
h2 1.602rem/25.63px - 2.074rem/33.18px
h3 1.424rem/22.78px - 1.728rem/27.65px
h4 1.266rem/20.25px - 1.44rem/23.04px
h5 1.125rem/18.00px - 1.2rem/19.20px
h6 1rem/16.00px

【C-1】最小viewport 320px - 768px Bootstrap 基準

見出し1 あかさたな日本の春夏秋冬

見出し2 あかさたな日本の春夏秋冬

見出し3 あかさたな日本の春夏秋冬

見出し4 あかさたな日本の春夏秋冬

見出し5 あかさたな日本の春夏秋冬

見出し6 あかさたな日本の春夏秋冬

段落。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。

h1 1.844rem/29.5px - 2.5rem/40px
h2 1.606rem/25.7px - 2rem/32px
h3 1.488rem/23.8px - 1.75rem/28px
h4 1.369rem/21.9px - 1.5rem/24px
h5 1.25rem/20px
h6 1rem/16px

【C-2】最小viewport 320px - 1200px Bootstrap 基準

見出し1 あかさたな日本の春夏秋冬

見出し2 あかさたな日本の春夏秋冬

見出し3 あかさたな日本の春夏秋冬

見出し4 あかさたな日本の春夏秋冬

見出し5 あかさたな日本の春夏秋冬

見出し6 あかさたな日本の春夏秋冬

段落。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。

h1 1.844rem/29.5px - 2.5rem/40px
h2 1.606rem/25.7px - 2rem/32px
h3 1.488rem/23.8px - 1.75rem/28px
h4 1.369rem/21.9px - 1.5rem/24px
h5 1.25rem/20px
h6 1rem/16px

【D】最小viewport 20rem 320px / 最大viewport 48rem 768px

見出し1 あかさたな日本の春夏秋冬

見出し2 あかさたな日本の春夏秋冬

見出し3 あかさたな日本の春夏秋冬

見出し4 あかさたな日本の春夏秋冬

見出し5 あかさたな日本の春夏秋冬

見出し6 あかさたな日本の春夏秋冬

段落。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。日本の春夏秋冬。Japanese Culture。

h1 1.5rem/24px - 2rem/32px
h2 1.3125rem/21px - 1.75rem/28px
h3 1.125rem/18px - 1.5rem/24px
h4 1.0625rem/17px - 1.25rem/20px
h5 1rem/16px - 1.125rem/18px
h6 1rem/16px