Clew

HomeMga toolType scale generator

Type scale generator na may fluid clamp()

Pumili ng base size at ratio — mula subtle na minor second hanggang golden ratio — para sa pinakamaliit at pinakamalapad na screen. Kinakalkula ng generator ang bawat step, sumusulat ng CSS clamp() na maayos na lumalaki sa pagitan ng dalawang viewport, ipinapakita ang scale sa anumang width, nagbababala sa mga size na maaaring sumira sa browser zoom, at nag-e-export sa CSS custom properties, Tailwind config, SCSS o design tokens.

● Libre, walang sign-upNa-update:

Opsyonal, hal. fs → --fs-step-0

—

 

Font size ng bawat step sa min at max viewport, kasama ang CSS value
StepMin, pxMax, pxCSS value 

    
Formula. size = base · ratiostep sa bawat viewport; slope = (max − min) / (vwmax − vwmin); font-size: clamp(min, (min − slope · vwmin) / 16 rem + slope · 100 vw, max).

  




Kinakalkula ang lahat sa inyong browser — hindi ipinapadala kahit saan ang inyong inilagay.
Paano gamitin


  1. Itakda ang mga viewportAng min viewport ay ang pinakamaliit na screen na inyong dinidisenyo (ang 360px ay karaniwang phone width), ang max ay kung saan huminto ang paglaki ng layout. Alisin ang check sa “Fluid” para isang static scale.
  2. Pumili ng base size at ratioAng body text ay karaniwang 16–18px. Ang maliit na ratio ay angkop para siksik na interface; ang malaki ay para dramatic na heading. Mas maliit na ratio sa phone at mas malaki sa desktop para hindi umapaw ang heading.
  3. Suriin ang preview at tableI-drag ang width slider para makita ang bawat step sa anumang viewport. Ipinapakita ng table ang size sa dalawang dulo at ang clamp() value; ang zoom warning ay nasa itaas ng preview.
  4. I-exportPumili ng CSS variables, Tailwind v3 o v4, SCSS o design tokens, itakda ang prefix at pangalan ng step, at kopyahin ang code.
Ano ang modular type scale
Ang modular scale ay set ng font size kung saan ang bawat size ay ang nakaraang size na minultiply ng parehong ratio. Sa halip ng pagpili ng 14, 18, 22 at 31 ayon sa pakiramdam, pumipili ng base at ratio, at bawat heading, caption at label ay may size na kaugnay ng iba. Ang ideya ay mula sa musika, kung saan ang interval ng mga nota ay ratio ng frequency, at pinasikat sa web ng artikulo ni Tim Brown na “More Meaningful Typography” (A List Apart, 2011).


size(step) = base × ratio ^ step

base 16px, ratio 1.25 (major third):
step −1 = 12.8px   step 0 = 16px   step 1 = 20px
step 2 = 25px      step 3 = 31.25px   step 4 = 39.06px


Ang negatibong step ay para caption at maliit na text; ang positibo ay para heading. Karaniwang ratio at kung saan angkop:


    

  • 1.067 minor second, 1.125 major second — napakasiksik; dashboard, data-heavy na app, maliit na screen.
    • 

  • 1.2 minor third, 1.25 major third — pinakakaraniwang pagpili para product interface at documentation.
    • 

  • 1.333 perfect fourth, 1.414 augmented fourth — malinaw na hierarchy para marketing page at blog.
    • 

  • 1.5 perfect fifth, 1.6 minor sixth, 1.618 golden ratio — dramatic; gumamit ng kaunting step, o napakalaki ang heading sa step 4.
    • 



Hindi kailangan ang round na numero. Ang browser ay nagre-render ng fractional na size, at mas mahalaga ang consistency ng mga step kaysa whole number.
Fluid typography gamit ang CSS clamp()
Ang isang scale ay bihirang angkop para 360px na phone at 1440px na desktop nang sabay: ang heading na ayos sa desktop ay umaapaw sa mobile. Ang lumang solusyon ay mga media query na tumatalon sa pagitan ng mga size. Ang fluid type ay pinapalaki ang bawat size nang linear kasabay ng viewport width sa pagitan ng dalawang punto at pinapanatili itong fixed sa labas — isinusulat ito ng CSS sa isang declaration:


slope     = (size_max − size_min) / (viewport_max − viewport_min)
intercept = size_min − slope × viewport_min
font-size: clamp(size_min, intercept + slope × 100vw, size_max)

step 0: 16px sa 320px → 18px sa 1240px
slope = 2 / 920 = 0.002174 → 0.2174vw
intercept = 16 − 0.002174 × 320 = 15.304px = 0.9565rem
font-size: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem)


Hinahayaan ng generator na itakda nang hiwalay ang base size at ratio para bawat dulo, ang approach ng Utopia (utopia.fyi). Mas maliit na ratio sa phone at mas malaki sa desktop ay pinapanatiling halos pareho ang body text habang ang heading ay mas kapansin-pansin sa malawak na screen. Ang lahat ng value ay nasa rem, kaya sinusunod ng scale ang default font size ng user.


Fluid type at accessibility


Ang WCAG success criterion 1.4.4 ay nangangailangan na maaaring palakihin ang text hanggang 200 % nang walang pagkawala ng content. Ang browser zoom ay pinapalaki ang rem value pero hindi ang vw, kaya ang size na lubhang nakadepende sa viewport ay maaaring hindi doble kapag nag-zoom. Dalawang patakaran para ligtas na fluid type:


    

  • Laging isama ang rem sa preferred value — huwag kailanman isulat ang 5vw only. Ang generator ay laging naglalabas ng rem + vw.
    • 

  • Panatilihin ang maximum sa hindi higit 2.5× ng minimum. Ayon kay Maxwell Barvian (Smashing Magazine, 2023), kapag ang pinakamalaking size ng clamp() ay hindi higit 2.5 beses ng pinakamaliit, ang text ay laging umaabot sa 200 % zoom. Ang mga step na lumalabag ay minarkahan sa itaas ng preview.
    • 

Paano pumili ng setting para product interface
    

  • Magsimula sa body text. Ang 16px ay default ng browser at mahusay na minimum para pagbabasa; ang long-form content ay kadalasang 17–18px sa desktop. Ang UI label at table cell ay maaaring step −1.
    • 

  • Limitahan ang bilang ng step. Maraming produkto ay nangangailangan ng 2 step sa ibaba ng base at 4–5 sa itaas. Mas maraming size ay mas nakakalito sa hierarchy, hindi mas malinaw.
    • 

  • Paikliin ang line height habang lumalaki ang size. Mga 1.5 para body text at 1.1–1.2 para malaking heading; ang Tailwind export ay may iminumungkahing line height bawat step.
    • 

  • Mas maliit na ratio sa maliit na screen. Ang 1.2 sa phone at 1.25–1.333 sa desktop ay ligtas na pares para product UI.
    • 

  • Ang maikling UI text ay dapat nababasa rin. Ang tooltip, onboarding hint at checklist item ay kadalasang 12–13px para umakma sa maliit na bubble. Panatilihin sa step −1 o mas malaki at paikliin ang text — tingnan ang tooltip reading time calculator.
    • 

  • Suriin ang contrast sa pinakamaliit na size. Ang thin weight at maliit na size ay nangangailangan ng mas maraming contrast; subukan ang mga pares sa color contrast checker.
    • 

Mga sanggunian
    

  1. Brown T. More Meaningful Typography. A List Apart, 2011 — modular scale para web.
    2. 

  2. Bringhurst R. The Elements of Typographic Style. Hartley & Marks — klasikong typographic scale at musical interval.
    3. 

  3. Utopia (utopia.fyi), J. Gilyead at T. Hill — fluid type scale na may hiwalay na ratio bawat viewport.
    4. 

  4. Barvian M. Addressing Accessibility Concerns With Using Fluid Type. Smashing Magazine, 2023 — ang 2.5× rule para 200 % zoom.
    5. 

  5. W3C. WCAG 2.2, success criterion 1.4.4 Resize Text.
    6. 

  6. W3C. CSS Values and Units Module Level 4 — clamp(), rem at vw.
    7. 

Mga madalas na tanong


Anong ratio ang pinakamahusay para type scale?
Walang isang pinakamahusay. Para product interface at documentation, ang 1.2 (minor third) o 1.25 (major third) ay pinakakaraniwan; ang marketing page ay kadalasang 1.333 o 1.414. Sa 1.5 at higit, gumamit ng kaunting step, dahil napakabilis na lumalaki ang size.
Paano kalkulahin ang fluid font size gamit ang clamp()?
Hanapin ang slope: (max size − min size) / (max viewport − min viewport). Ang intercept ay min size − slope × min viewport. Isulat ang clamp(min size, intercept sa rem + slope × 100 vw, max size). Para 16px sa 320px hanggang 18px sa 1240px, ito ay clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem).
Accessible ba ang fluid typography?
Maaari, kung ang preferred value ay pinagsamang rem at vw at ang maximum size ay hindi higit 2.5 beses ng minimum. Sa gayon, ang browser zoom ay maaari pa na palakihin ang text hanggang 200 %, ayon sa WCAG 1.4.4. Ang font size na vw only ay hindi tumutugon sa zoom at dapat iwasan.
Px o rem para font size?
Rem. Sinusunod nito ang default font size setting ng user, samantalang hindi ang px. Ipinapakita ng generator ang size sa px para madaling basahin, pero isinusulat ang bawat CSS value sa rem, na 1rem = 16px maliban kung binago.
Ilan na font size ang kailangan ng design system?
Karaniwang 6–8: dalawa sa ibaba ng body text para caption at label, ang body size, at 3–5 na heading size. Mas maraming step ay mas mahirap makita bilang hierarchy at bihirang ginagamit nang consistent.
Paano idagdag ang scale sa Tailwind CSS?
Para Tailwind v3, i-paste ang export sa theme.extend.fontSize sa tailwind.config.js at gumamit ng class gaya ng text-step-2 o text-xl. Para Tailwind v4, i-paste ang @theme block sa inyong CSS; ang bawat --text-* variable ay nagiging text-* utility.
Higit pa sa Product design


Kaugnay na babasahin
Color contrast checkerAccessible palette generatorReadability checkerLahat ng tool
Mga tour, tooltip at checklist na makikita ang epekto sa mga numero.


Subukan ang Clew nang librePaano ito gumaganaFree plan habambuhay · walang credit card


Product tours, popups at onboarding sa panahon ng AI


7 pattern na may bilang ng hakbang, tuntunin sa copy at dapat sukatin, ang binabago ng AI, at checklist bago mag-publish. PDF, 2 pahina. Ano ang laman →














Nasa English ang gabay.