CSS clamp() で設定したフォントサイズサンプル

見出しサイズ計算に便利なサイト

https://type-scale.com/

オンラインの自動計算ツール

• The Clamp Calculator
• Fluid-responsive font-size calculato ※
• Min-Max-Value Interpolation

※Fluid responsive font size calculatorの方は calc は不要と思われます。（そのまま残しても不具合はありませんが…）

CSS関数

pxで出力

padding: _clamp-px(最小サイズ, 最少viewport, 最大サイズ, 最少viewport) 0; //pxで指定
例) padding: _clamp-px(48, 375, 68, 1366) 0;

@function _clamp-px($minsize, $minvp, $maxsize, $maxvp) {
	$a: ($maxsize - $minsize ) / ($maxvp - $minvp );
	$b: $minsize - ($a * $minvp);
	@return clamp($minsize * 1px, (round($b * 1000 * 1px) / 1000)  + (round($a * 1000 * 100vw) / 1000), $maxsize * 1px);
}

remで出力

font-size: _clamp-rem(最小サイズ, 最少viewport, 最大サイズ, 最少viewport) 0; //pxで指定
例)font-size: _clamp-rem(30, 375, 40, 1366);

@function _clamp-rem($minsize, $minvp, $maxsize, $maxvp) {
	$html-font-size: 16; //px
	$minsize: $minsize / $html-font-size;
	$minvp: $minvp / $html-font-size;
	$maxsize: $maxsize / $html-font-size;
	$maxvp: $maxvp / $html-font-size;
	$a: ($maxsize - $minsize ) / ($maxvp - $minvp );
	$b: $minsize - ($a * $minvp);
	@return clamp(round($minsize * 1000 * 1rem) / 1000 , (round($b * 1000) / 1000) * 1rem + (round($a * 100 * 100vw) / 100), round($maxsize * 1000 * 1rem) / 1000);
}