# Folyékony tipográfia

> Képernyőmérettel arányosan skálázódó betűméretek generálása CSS-változókként: skálavezérlők, változók szerkesztése és használata.

A Folyékony tipográfia generátorral pontos és reszponzív betűméreteket hozhatsz létre CSS-változókként, `clamp()` használatával. A méretek a megadott minimum és maximum között simán skálázódnak, így a szöveg minden képernyőn és eszközön olvasható marad. A generátor leegyszerűsíti a betűméretek kezelését, miközben rugalmas és pontos marad.

## A folyékony tipográfia elérése

Nyisd meg a **Stíluskezelőt** a szerkesztő eszköztárán, majd válaszd a **Tipográfia** lapot. Itt hozhatsz létre és szerkeszthetsz folyékony tipográfiai skálákat.

![A Tipográfia lap a Stíluskezelőben: a skála neve, a változóelőtag, a skála típusa, a minimum és maximum beállításai, mellette a lépések előnézete](./kepek/stilusok-folyekony-tipografia.webp)

*A Tipográfia lap a Stíluskezelőben: a skála neve, a változóelőtag, a skála típusa, a minimum és maximum beállításai, mellette a lépések előnézete* (https://minta-bolt.hu/home/?bricks=run)

A képen a bal oldali panelen a skála vezérlői, jobbra a lépések listája látszik a minimális és maximális méretükkel, mindegyik egy előnézeti szövegsorral.

Az általános skálabeállítások a Stíluskezelő beállításaiban vannak: az rem-számításhoz használt HTML-betűméret, valamint a minimális és maximális képernyőszélesség. A padding, margó és hézag értékekre vonatkozó térközskálák ugyanígy működnek a **Térközök** lapon, lásd a [Folyékony térközök](https://hub.hellowp.io/hu/plugins/bricks-child/stilusok-folyekony-terkozok/) fejezetet.

## Kategóriák

A Bricks korlátlan számú folyékony tipográfiai skálát enged a címsoroknak, a szövegnek és így tovább, kategóriákon keresztül. Minden kategória egy tipográfiai skála, és a skála összes beállítását magával tárolja.

Egyszerűen is kezdheted: hozz létre egy `Headings` és egy `Text` kategóriát a két skálához. Új skála létrehozásához a **Skála neve** mezőbe írd be a nevet, és kattints a **Létrehozás** gombra.

## Folyékony tipográfiai változók

A változókat a jobb oldali skálagenerátorral hozhatod létre.

A skálamódosítások előnézete előbb a listában jelenik meg. Kattints a **Változók újragenerálása** gombra, hogy a kategória változóit létrehozd vagy frissítsd (ha nincs függőben lévő változtatás, a gomb felirata Változók generálása). A Stíluskezelő fejlécében lévő ikon, a „Változók újragenerálása és mentés”, mindkettőt egy lépésben elvégzi.

Generáláskor a kiválasztott kategória összes meglévő változója törlődik, és az újonnan létrehozottak veszik át a helyüket. Ha a kategóriában már vannak változók, a Bricks előbb megerősítést kér. A változók száma ugyanannyi marad, de a nevek és az értékek újragenerálódnak, vagyis a változónevekhez és -értékekhez kézzel hozzáadott módosítások elvesznek. Ha a lépések száma és a skála típusa változatlan, a nevek is ugyanazok maradnak, így minden hely, ahol változót használsz (például `var(--heading-xl)`), az új értéket kapja.

## Skálavezérlők

| Vezérlő | Mit csinál |
|---|---|
| Változóelőtag | A változónevek szerkezetét adja meg. Ha `text-`, a változók `--text-m` vagy `--text-xl` nevűek lesznek. Válassz egyedi, beszédes előtagot, hogy elkerüld az ütközéseket. |
| Skála típusa | A változók elnevezési módja: Póló, Numerikus vagy Egyedi. |
| Egyedi skála típusa | Csak Egyedi típusnál látszik. Saját skálaneveket adhatsz meg. |
| Alapvonal-lépésköz | A skála alapja. A kiindulási változó pontosan a megadott minimális és maximális betűmérettel egyezik, a többi lépést ehhez viszonyítva számolja. |
| HTML-betűméret | Az rem-alap a skálageneráláshoz. |
| Alapméret (px) | A minimum (mobil) és a maximum (asztali gép) csoportban külön-külön. |
| Képernyőszélesség (px) | A minimális és maximális képernyőszélesség. |
| Tipográfiai skála aránya | A szomszédos lépések közötti szorzó. |

### Skála típusa

Három lehetőség van:

1. **Póló:** pólóméretek szerinti nevek: `2xs, xs, s, m, l, xl, 2xl`. Példa kimenet: `--text-m`.
2. **Numerikus:** számokat használ, tipikusan 1-től 6-ig. Példa kimenet: `--text-4`.
3. **Egyedi:** teljes kézi irányítás a névadás felett. Beírhatsz például `small, medium, large, title` neveket, így `--text-medium` lesz a változó.

Az Egyedi típusnál az új lépések neveit át kell írnod, vagy még jobb, ha az új értéket közvetlenül az egyedi skálához adod hozzá.

### HTML-betűméret

A Stíluskezelő HTML-betűméret beállítása adja meg az rem-alapot a skálagenerálásnál. Megadhatod kifejezetten `10px`-ben vagy `16px`-ben, vagy automatikusra hagyhatod: ekkor a Bricks a sablonstílusokból próbálja kiolvasni az értéket, és ha nem sikerül, az alapértelmezéssel számol.

### Alapméret és képernyőszélesség

A skálabeállításoknak két csoportja van: **Minimum (Mobil)** és **Maximum (Asztali gép)**. Mindkettőnek saját alapmérete és tipográfiai skálaaránya van (alapértékek: `16px` és 1,25, illetve `20px` és 1,333). A két alapméret a baseline lépés minimális és maximális értékét adja, a többi lépés méretét a tipográfiai skála aránya számolja ki.

A minimális és maximális képernyőszélességet egyszer, a Stíluskezelő beállításaiban kell megadni, és minden skálára érvényes (alapérték: `360px` és `1440px`). A minimális szélességnél minden lépés a minimális méretét használja, a maximális szélességnél a maximálisat. E szélességeken kívül a betűméretek állandók.

### Tipográfiai skála aránya

Az arány azt adja meg, hogy a betűméret mennyivel nő vagy csökken a szomszédos változóhoz képest. Ha az alap 16 px és az arány 1,5, az alap fölötti következő lépés 24 px. Az arányt a Bricks felfelé és lefelé is alkalmazza, így mindkét irányban egyenletes a skála. Mivel a minimumnak és a maximumnak saját aránya van, a nagyobb arány nagy képernyőn nagyobb kontrasztot ad a címsorok között, telefonon viszont kompakt marad. Az alapvonal alatti lépések nagy képernyőn jobban összehúzódnak, ezért a legkisebb lépéseknél a maximum érték a minimum alá is kerülhet.

Haladó esetben egyedi arányt is megadhatsz. Az egyedi értékekhez tartozó vezérlő csak az **Egyedi** opció kiválasztásakor jelenik meg, és pontos kézi irányítást ad arról, hogyan számolódik az egyes lépés.

## Változók szerkesztése

A generált változók a középső panelen jelennek meg, és többféleképpen kezelheted őket.

### Változók hozzáadása

Vidd az egeret az első vagy az utolsó lépés fölé a listában. A bal szélén megjelenik egy **+** gomb: az első sor fölé kisebb, az utolsó sor alá nagyobb lépést ad hozzá (például `3xl`-t a `2xl` után).

Az új lépést a megfelelő helyre szúrja be az alapvonal alatt vagy fölött, a változó neve és értéke automatikusan generálódik. Egyedi skálatípusnál a változónevet kézzel kell frissítened, vagy még jobb, ha az új értéket közvetlenül az egyedi skála definíciójához adod.

### Változók törlése

A legkisebb vagy a legnagyobb lépés eltávolításához vidd az egeret az első vagy utolsó sor fölé, és kattints a **−** gombra. Az alapvonal lépést a Bricks nem engedi törölni, mert a többi lépés ettől függ.

### Változók szerkesztése

A változók neve és értéke közvetlenül szerkeszthető, ha kijelölöd őket a középső oszlopban. A kézi módosítás csak a kijelölt változóra vonatkozik, és a számításokat nem érinti. Így finomhangolhatsz, miközben a skála egésze egységes marad.

## A változók használata

A generált változók minden méretvezérlő változóválasztójában megjelennek, kategóriájuk szerint csoportosítva. Ha az azonos szintű címsorok egy méretet kapjanak az egész webhelyen, állítsd be őket a sablonstílusban: **Sablonstílusok → a sablonstílusod → Tipográfia → Címsor H1 (H2, H3 …) → Tipográfia → Betűméret**, majd válaszd ki a változót, például a H2-höz a `var(--heading-xl)` értéket.

Az elemen közvetlenül, akár töréspontra megadott betűméret elsőbbséget élvez a sablonstílussal szemben. Töröld ezeket az elemekről, amelyeknek követniük kell a sablonstílust. Ha egy elemnek szándékosan el kell térnie (például egy nagyobb hősszöveg), ne beírt értéket használj, hanem ugyanazon skála egy másik lépését válaszd.

## Tipográfiai előnézet

A középső lista a skála minden lépését mutatja a minimális és maximális méretével, mindegyiket egy előnézeti szövegsorral. A skálabeállítások változásai azonnal látszanak a listában, de a változókba csak a **Változók újragenerálása** gombra kattintás után kerülnek.

A Stíluskezelő fejlécében lévő **szem** ikonnal be- és kikapcsolhatod a vászon előnézetét, így munka közben az oldalt is látod a Stíluskezelő mellett.