⭐ 0
🔍
Tekst Bilde PDF og dokumenter Lyd Musikk Elektronikk Tid Verktøy Validatorer Esoterisk Spill

Fluid Type Scale Generator

Beregn en ekte flytende CSS-klemme()-verdi fra min og maks størrelse over to visningsportbredder, med skråningen og skjæringspunktet vist trinn for trinn og en forhåndsvisning av endring av størrelsen.

Behandler... 0%

Resultat

Denne siden åpner kalkulatoren direkte i typeskalamodus med en 16px-base og et 1,25 (stor tredjedel) forhold som allerede er valgt - et solid, mye brukt utgangspunkt for en typografisk skala. Fra disse to tallene alene genereres seks størrelser: small, base, h4, h3, h2 og h1, hver og en sin egen fluid clamp()-verdi i stedet for en enkelt fast størrelse.

Hvert trinn holder grunnstørrelsen forankret på samme verdi på både mobil- og skrivebordssiden, mens overskriftene skaleres mer aggressivt opp på den bredere skrivebordsvisningsporten enn på den smale mobile - den samme ideen som å velge et mildere forhold for små skjermer og et dristigere for store skjermer, utledet automatisk fra enkeltforholdet du velger.

Ved å endre forholdet til 1.125, 1.2, 1.333 eller 1.5 regenereres hele tabellen umiddelbart, og knappen under kopierer alle seks clamp()-verdiene som en klar-til-lime-blokk med egendefinerte CSS-egenskaper for resten av stilarket til referanse.

🛡️
Utført i nettleser

Filene og inngangene dine forlater aldri denne enheten. Behandlingen kjører helt offline. 100 % sikker.

Godkjente formater og regler

  • Ekte fluid-typografi matematikk: helning, vw koeffisient og y-akse skjæringspunktet vist eksplisitt, ikke bare den endelige clamp()-linjen.
  • Live forhåndsvisning: dra skyveknappen for visningsportbredde for å se eksempeltekst endre størrelsen nøyaktig slik den ville gjort mens et ekte nettleservindu endres.
  • Typeskalamodus: en basisstørrelse og et forhold fra 1,125 til 1,5 genererer seks fluid clamp()-trinn — small, base, h4, h3, h2, h1 — som kopiklar CSS.

Viktige fordeler

✓ Clamp()-linjen, stignings- og skjæringsnumrene og live-forhåndsvisningen oppdateres alle mens du skriver – ingen knapp å trykke på.
✓ En skyveknapp for visningsportbredde driver en forhåndsvisningsboks, slik at du ser den nøyaktige væskeskaleringen i aksjon mellom minimums- og maksimumsbruddpunktene, ikke bare en formel.
✓ En separat typeskalamodus gjør én grunnstørrelse og -forhold til en full 6-trinns væskeoverskriftsskala, klar som en blokk med egendefinerte CSS-egenskaper.

Brukssaker

  • • Gjør en min/maks skriftstørrelse og viewport-område til en ekte clamp()-linje – helning, vw-koeffisient og skjæringspunkt inkludert – i stedet for å se en fra en veiledning.
  • • Dra en glidebryter for visningsportbredde for å forhåndsvise en flytende overskrift eller kroppsstørrelsen nøyaktig slik den ville gjort mens størrelsen på et ekte nettleservindu endres, før du legger det til et stilark.
  • • Generer en full 6-trinns væsketypeskala (liten til h1) fra én grunnstørrelse og -forhold, kopiert som en klar til å lime inn blokk med egendefinerte CSS-egenskaper.
  • • Bygg en fluid clamp() for avstand (margin, padding, gap) i stedet for font-size - den samme helnings-/skjæringsformelen gjelder for alle CSS-egenskaper.