文章 · 收錄於 2022.03
MGN-BLOG-FLUID-TYFluid Typography
約 1 分鐘閱讀
I recall making font sizes fluid and scale in ratio according to the viewport was not an easy task few years ago. Here's the formula I had bookmarked from css-tricks.com
body {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
Introducing clamp(), a css function that is made for exact this use case. Clamp allows you to set minimum and maximum value.
h1 {
font-size: clamp(MIN, VAL, MAX);
}