Dizajn / Tipografija

Generator tipografske skale (modularna skala za CSS i Tailwind)

Generišite modularnu tipografsku skalu na osnovu početne veličine fonta i odnosa, kao što su 1.25 ili zlatni presek, pregledajte svaki korak sa sopstvenim tekstom i kopirajte veličine kao CSS prilagođena svojstva ili Tailwind fontSize konfiguraciju u rem ili px jedinicama.

Generator tipografske skale (modularna skala za CSS i Tailwind): Svaka veličina dobija se tako što se početna veličina pomnoži odnosom jednom za svaki korak: za 16 px i veliku tercu, 1.25, koraci naviše iznose 20, 25, 31.25, 39.06 i 48.83 px, a koraci naniže 12.8 i 10.24 px. Veličine su navedene u px i rem jedinicama i imenovane poput Tailwind veličina teksta, od xs do 4xl. Radi 100% lokalno u vašem pregledaču, bez otpremanja datoteka na server.

Kategorija
Alatke za programere
Pokretanja
U vašem pregledaču
Trošak
Besplatno · bez registracije
Dostupnost
Spremno za upotrebu
Generator tipografske skaleLokalna obrada

U potpunosti radi u vašem pregledaču

4xl48,83 px · 3.0518 remBrza smeđa lisica
3xl39,06 px · 2.4414 remBrza smeđa lisica
2xl31,25 px · 1.9531 remBrza smeđa lisica
xl25 px · 1.5625 remBrza smeđa lisica
lg20 px · 1.25 remBrza smeđa lisica
base16 px · 1 remBrza smeđa lisica
sm12,8 px · 0.8 remBrza smeđa lisica
xs10,24 px · 0.64 remBrza smeđa lisica
:root {
  --step-5: 3.0518rem;
  --step-4: 2.4414rem;
  --step-3: 1.9531rem;
  --step-2: 1.5625rem;
  --step-1: 1.25rem;
  --step-0: 1rem;
  --step--1: 0.8rem;
  --step--2: 0.64rem;
}

Svaki korak dobija se množenjem prethodnog koraka odnosom: uz osnovnu veličinu od 16 px i odnos 1.25, veličine iznad su 20, 25 i 31.25 px, a ispod 12.8 i 10.24 px. Manji odnosi, kao što je 1.125, odgovaraju zbijenim interfejsima; veći, kao što je 1.5, daju naslovima izraženiji kontrast. Vrednosti rem podrazumevaju podrazumevanu osnovnu veličinu pregledača od 16 px.

Poreklo naziva odnosa

Nazivi potiču iz muzičkih intervala: čista kvinta ima frekvencijski odnos 3 : 2, pa tipografska skala zasnovana na 1.5 raste u istoj proporciji kao tonovi udaljeni za kvintu. Tim Brown je modularnu skalu učinio popularnom na vebu.

Zlatni presek, 1.618, daje veoma velike skokove; objašnjen je u kalkulatoru zlatnog preseka.

Zaokruživanje

Pregledači prikazuju veličine u delovima piksela, pa je 31.25 px sasvim u redu. Ako sistem dizajna zahteva cele piksele, zaokružite svaki korak i zadržite rem vrednosti na četiri decimale, kao što to radi alat; druge vrednosti pretvorite pomoću konvertora px u rem.

Kako se koristi

  1. Unesite početnu veličinu i izaberite odnos.
  2. Podesite koliko koraka želite naviše i naniže, pa ih pregledajte sa svojim tekstom.
  3. Kopirajte CSS promenljive ili Tailwind konfiguraciju.

Privatnost i ograničenja

Sve se izvršava u vašem pregledaču.

Srodne alatke

CSS clamp()Konvertor CSS jedinicaZlatni presek

Često postavljana pitanja

Koji odnos treba da koristim?

Interfejsima sa mnogo teksta i malim ekranima odgovaraju blaži odnosi, kao što su 1.125 ili 1.2; uredničke stranice i odredišne stranice mogu koristiti 1.333 do 1.618 za izraženije naslove.

Zašto koristiti rem?

Veličine u rem jedinicama prate podešavanje veličine fonta u pregledaču čitaoca, pa se tekst uvećava za osobe kojima je potreban veći prikaz. Konverzija pretpostavlja podrazumevanu osnovnu veličinu od 16 px.

Mogu li da napravim fluidne veličine?

Da: uzmite najmanju i najveću veličinu koju želite za neki korak i pretvorite ih u clamp() izraz pomoću CSS generatora za clamp.

Besplatan alat · pokretanja: u vašem pregledaču · nalog nije potreban