fluid typography：CSS clamp() 字級變數
這個工具只要 5 個數字，就能產生一組 CSS 自訂屬性，每個字級一個，每個都寫成結合 rem 與 vw 的 clamp()。你輸入視窗寬度範圍、兩端的基準字級與比例倍率後，從 --text-xs 到 --text-4xl 的每一級都會隨螢幕寬度平順縮放，完全不需要媒體查詢。沒有任何內容會被上傳，CSS 是在你的瀏覽器裡產生的。
fluid type scale 的製作步驟
先填好最上方的 5 個欄位。最小視窗寬度（預設 320）和最大視窗寬度（1200）是文字最小與最大時的螢幕寬度，單位是像素。最小基準字級（16）和最大基準字級（20）是這兩個寬度下的內文字級。比例倍率（1.25）決定每一級比下一級大多少。每個欄位都有數字框和滑桿。
- 輸入螢幕寬度範圍。
- 輸入窄螢幕與寬螢幕的基準字級。
- 選擇比例倍率。
- 下方的 CSS 欄會隨著你輸入即時更新，所以沒有送出按鈕。結果滿意時，按下複製 CSS，再把 :root 區塊貼到你的樣式表。
如果有欄位的值無法使用，會直接顯示提示訊息：最大視窗寬度必須大於最小視窗寬度，最大基準字級必須大於最小基準字級，倍率要大於或等於 1，所有數字都要大於 0。需要設定大小的地方就套用對應的級距，例如 h1 { font-size: var(--text-3xl); }
在任何寬度下預覽
在預覽區，把預覽寬度拖曳到最小與最大視窗寬度之間的任何位置。每一級都會以範例文字「會平順縮放的文字」顯示，大小就是它在該寬度下實際的字級，旁邊附上變數名稱和像素大小，最大的級距在最上面。
在複製之前，你就能看出內文與標題的落差，在小手機和寬螢幕桌機上各是什麼樣子。
clamp() 字級是怎麼算出來的
每一級都會先算出窄端的大小（最小基準字級乘以倍率的級距次方）和寬端的大小（最大基準字級乘以同樣的次方）。接著在這兩點之間畫一條直線：斜率是字級的變化量除以視窗寬度的變化量，截距則是最小字級減去最小視窗寬度乘以斜率。斜率成為 vw 的部分，截距成為 rem 的部分，兩端的字級則是 clamp() 的最小值與最大值。數值會四捨五入到小數點後 4 位。
使用預設值時，各級在 320、760、1200 px 的大小如下：
- --text-sm：12.8 / 14.4 / 16 px
- --text-base：16 / 18 / 20 px
- --text-lg：20 / 22.5 / 25 px
- --text-xl：25 / 28.13 / 31.25 px
為什麼用 rem 和 vw，而不是 px
只用 vw 寫的大小，會忽略訪客在瀏覽器裡設定的字級，放大頁面時也不會跟著變大。這裡的每個數字都拆成 rem 與 vw 兩部分，所以文字仍會依照使用者的基準字級，也能正常縮放，需要較大文字的人依然讀得舒服。這個工具不會輸出 px。
如果你的網站設定了 html { font-size: 62.5% } 或其他不是 16 px 的根字級，請打開進階，修改根字級，讓 1rem 對得上。
視窗寬度、基準字級與比例倍率怎麼選
預設的 320 到 1200 涵蓋從小手機到筆電。最大視窗寬度請設在你希望文字停止變大的最寬螢幕，超過之後字級就固定在最大值。內文常見的搭配是 16 px 與 20 px。倍率決定整組字級的性格：
- 1.2（小三度）：級距小而柔和
- 1.25（大三度）：均衡的預設值
- 1.333（純四度）：對比明確
- 1.5（純五度）：標題很突出
- 1.618（黃金比例）：級距落差非常大
倍率設為 1 時，每一級大小都相同。倍率是兩端共用的單一數字，所以 320 px 與 1200 px 的字級比例相同，改變的只有基準字級。
在進階裡，變數前綴（預設 --text）可以改掉所有屬性的名稱。級距名稱可以在 sm, lg, xl（--text-sm、--text-base、--text-lg 等）與 -1, 1, 2（--text--1、--text-0、--text-1 等）之間切換。較小的級距（0 到 4，預設 2）與較大的級距（0 到 8，預設 5）則決定基準字級下方與上方各有幾個字級。
這個工具不能做什麼
它只產生字級比例。沒有匯出到 Tailwind 或其他格式，不能針對單一級距覆寫，窄端與寬端也不能使用不同的倍率，更不會輸出 px。
常見問題
什麼是 fluid type scale？
fluid type scale 是一組隨螢幕寬度平順變大的字級，而不是在斷點處突然跳動。每一級，例如小、基準、大、特大，都有一個給窄螢幕的最小字級和一個給寬螢幕的最大字級，中間的大小則沿著一條直線變化。這個產生器會把每一級寫成 CSS 自訂屬性，整個網站都能重複使用。
css clamp 用法是什麼？字級要怎麼設定？
clamp(最小值, 偏好值, 最大值) 接受三個值。瀏覽器會採用偏好值，但不會小於最小值，也不會大於最大值。用在文字時，偏好值是一個 rem 量加上一個 vw 量，例如 clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem)。把它放進自訂屬性，需要的地方再寫 font-size: var(--text-base) 就可以了。
如何用 CSS 讓字級隨螢幕寬度調整？
把各級大小一次宣告成 clamp() 變數，視窗寬度改變時文字就會連續縮放，完全不需要媒體查詢。把「最小視窗寬度」和「最大視窗寬度」設成你想要最小與最大字級的寬度，填入「最小基準字級」與「最大基準字級」，再複製 CSS。視窗比最小寬度窄時，文字維持最小字級；比最大寬度寬時，維持最大字級。
為什麼我的 clamp() 字級沒有效果？
常見原因有：某個值漏了單位、clamp() 裡的加號前後沒有空格、最小值大於最大值，或偏好值只用 vw 寫而忽略了使用者的字級設定。產生出來的程式碼都避開了這四種情況：每個值都有單位，加號前後有空格，而且最小值一定小於最大值。
這跟 Utopia fluid type scale calculator 的做法一樣嗎？
概念相同：字級會在窄視窗與寬視窗之間線性內插，每一級都是基準字級乘以倍率的結果。差別是這個工具兩端只用一個倍率，沒有針對單一級距的覆寫，也只輸出單純的 CSS 自訂屬性，沒有 Tailwind 或其他匯出。想快速拿到 :root 區塊的時候很適合。
大三度和純四度，該選哪個比例倍率？
大三度（1.25）是內文較多的頁面很好的預設值，因為級距夠接近，標題不會壓過內文。純四度（1.333）讓各級之間的對比更明顯，適合宣傳頁和大標題。小三度（1.2）則更柔和。在「比例倍率」輸入數值，複製之前先用「預覽」看一下效果。
所有瀏覽器都能用 clamp() 嗎？
Chrome、Edge、Firefox 和 Safari 的所有現行版本都支援 clamp()，從 2020 年起就是如此。很舊的瀏覽器會忽略看不懂的宣告，所以如果必須支援，請在 clamp() 那行之前放一行固定的 font-size 當作備援。
我輸入的內容會傳到伺服器嗎？
不會。這些數字由你的瀏覽器直接在頁面上轉成 CSS，不會上傳也不會儲存。不需要帳號，也不用註冊。
