【CSS】min-font-size/max-font-sizeを指定する

font-sizeの最大値/最小値を指定したい時。

min-font-size/max-font-sizeなるプロパティは存在しないが、min()・max()・clamp()でそれを実現できる。

最小値の指定

.text {
  font-size: max(5vw, 12px);
}

基準値を5vw、最小値を12pxとする時。

最大値の指定

.text {
  font-size: min(5vw, 20px);
}

基準値を5vw、最大値を20pxとする時。

最小値・最大値の指定

.text {
  font-size: clamp(12px, 5vw, 20px);
}

基準値を5vw、最小値を12px、最大値を20pxとする時。