# 12. Szövegformázás

2025. november 23. • 20 perc olvasás • CSS3 alapok

A tipográfia kulcsfontosságú a weboldalak megjelenésében és olvashatóságában. Ebben a cikkben megismerkedhetsz a betűtípusok kezelésével, a font tulajdonságokkal, a szöveg igazítással és a különböző szövegeffektekkel.

#### Érettségi információ

Ez a lecke EMELT SZINTŰ érettségi anyag!

Ebből a leckéből érettségi anyag:

- Alapvető betűtípus beállítások (`font-family`)
- Betűméret (`font-size`) és betűstílus (`font-weight`, `font-style`)
- Szöveg igazítása (`text-align`)

Bónusz anyag (nem kötelező): Google Fonts, text-shadow, letter-spacing, line-height finomhangolás.

## Betűtípusok (font-family) EMELT SZINT

A `font-family` tulajdonság határozza meg, milyen betűtípust használjon a böngésző. Mindig adj meg tartalék (fallback) betűtípusokat!

### Web-safe betűtípusok

A web-safe betűtípusok minden operációs rendszeren elérhetők:

CSS - Web-safe betűtípusok
`/* Talpas (Serif) betűtípusok */ .serif1 { font-family: "Times New Roman", Times, serif; } .serif2 { font-family: Georgia, serif; } /* Talpatlan (Sans-serif) betűtípusok */ .sans1 { font-family: Arial, Helvetica, sans-serif; } .sans2 { font-family: Verdana, Geneva, sans-serif; } /* Fix szélességű (Monospace) betűtípusok */ .mono1 { font-family: "Courier New", Courier, monospace; } .mono2 { font-family: Consolas, "Courier New", monospace; } /* Modern rendszer betűtípusok (system fonts) */ body { font-family: -apple-system, /* macOS, iOS */ BlinkMacSystemFont, /* macOS Chrome */ "Segoe UI", /* Windows */ Roboto, /* Android */ Arial, /* Fallback */ sans-serif; /* Végső fallback */ }`

### Érettségi vizsgán használt betűtípusok

Az emelt szintű digitális kultúra érettségin az alábbi betűtípusokat kell ismerni és használni. Ezek mindegyike letölthető a Google Fonts-ról (kivéve a Magyar Script-et).

#### Serif (talpas) betűtípusok

Betűtípus | Jellemző | Fájlok
--- | --- | ---
Cormorant | Elegáns, klasszikus megjelenés | Cormorant-VariableFont_wght.ttf, Cormorant-Italic-VariableFont_wght.ttf
EB Garamond | Történelmi, könyvszerű | EBGaramond-VariableFont_wght.ttf, EBGaramond-Italic-VariableFont_wght.ttf
Libre Bodoni | Modern klasszikus, kontrasztos | LibreBodoni-VariableFont_wght.ttf, LibreBodoni-Italic-VariableFont_wght.ttf
Podkova | Robusztus, jól olvasható | Podkova-VariableFont_wght.ttf
Texturina | Textúrált, dekoratív | Texturina-VariableFont_opsz,wght.ttf, Texturina-Italic-VariableFont_opsz,wght.ttf

#### Sans-serif (talpatlan) betűtípusok

Betűtípus | Jellemző | Fájlok
--- | --- | ---
Changa | Modern, geometrikus | Changa-VariableFont_wght.ttf
Genos | Futurisztikus, keskeny | Genos-VariableFont_wght.ttf, Genos-Italic-VariableFont_wght.ttf
Kufam | Arab ihletésű, egyedi | Kufam-VariableFont_wght.ttf, Kufam-Italic-VariableFont_wght.ttf
Open Sans | Univerzális, kiválóan olvasható | OpenSans-VariableFont_wdth,wght.ttf, OpenSans-Italic-VariableFont_wdth,wght.ttf
Raleway | Elegáns, vékony vonalak | Raleway-VariableFont_wght.ttf, Raleway-Italic-VariableFont_wght.ttf

#### Handwriting (kézírásos) betűtípusok

Betűtípus | Jellemző | Fájlok
--- | --- | ---
Caveat | Laza, kézzel írt stílus | Caveat-VariableFont_wght.ttf
Italianno | Elegáns, kalligrafikus | Italianno-Regular.ttf
Magyar Script | Magyar kézírás stílus | Magyar script basic.ttf (irottmagyarabc.hupont.hu)

#### Monospace (fix szélességű) betűtípusok

Betűtípus | Jellemző | Fájlok
--- | --- | ---
Roboto Mono | Modern, jól olvasható kód | RobotoMono-VariableFont_wght.ttf, RobotoMono-Italic-VariableFont_wght.ttf
Spline Sans Mono | Geometrikus, letisztult | SplineSansMono-VariableFont_wght.ttf, SplineSansMono-Italic-VariableFont_wght.ttf

#### Élő példa - Érettségi betűtípusok (Google Fonts CDN):

Cormorant - Elegáns talpas betűtípus (Serif)

EB Garamond - Klasszikus könyv betűtípus (Serif)

Libre Bodoni - Modern klasszikus (Serif)

Open Sans - Univerzális talpatlan (Sans-serif)

Raleway - Elegáns talpatlan (Sans-serif)

Caveat - Kézírásos stílus (Handwriting)

Roboto Mono - Fix szélességű kódhoz (Monospace)

### Betűtípus telepítése @font-face-szel BÓNUSZ

Ha a betűtípust lokálisan (saját szerverről) szeretnéd használni, a `@font-face` szabállyal töltheted be:

CSS - @font-face használata
`/* Variable font betöltése (ajánlott) */ @font-face { font-family: 'Cormorant'; src: url('fonts/Cormorant-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; /* Variable font: 100-tól 900-ig */ font-style: normal; font-display: swap; /* Szöveg látható marad betöltés közben */ } @font-face { font-family: 'Cormorant'; src: url('fonts/Cormorant-Italic-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; } /* Open Sans - szélesség és vastagság változó */ @font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype'); font-weight: 300 800; font-stretch: 75% 100%; /* Szélesség változtatható */ font-style: normal; font-display: swap; } /* Magyar Script - nem variable font */ @font-face { font-family: 'Magyar Script'; src: url('fonts/Magyar script basic.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* Használat */ h1 { font-family: 'Cormorant', serif; font-weight: 600; } body { font-family: 'Open Sans', sans-serif; } .signature { font-family: 'Magyar Script', cursive; }`

#### Variable Fonts (változó betűtípusok)

A modern variable fontok egyetlen fájlban tartalmazzák az összes vastagságot (100-900). Előnyök:

- Kisebb fájlméret: Egy fájl helyettesít több hagyományos fontfájlt
- Folytonos értékek: Nem csak 400, 700, hanem bármilyen érték (pl. 450, 650)
- Fájlnév jellemző: A "VariableFont" szó a fájlnévben jelzi
- Tengelyek: wght (vastagság), wdth (szélesség), opsz (optikai méret), ital (dőltség)

### Google Fonts használata BÓNUSZ

A Google Fonts ingyenes betűtípusok széles választékát kínálja. Két módon linkelheted be:

HTML - Google Fonts belinkelése (link tag)
`<!-- A <head> részben --> <!-- Egy betűtípus --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"> <!-- Több súly és stílus --> <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;700&display=swap" rel="stylesheet"> <!-- Több betűtípus egyszerre --> <link href="https://fonts.googleapis.com/css2?family=Cormorant:wght@400;600;700&family=Open+Sans:wght@400;600;700&family=Roboto+Mono&display=swap" rel="stylesheet">`
CSS - Google Fonts belinkelése (@import)
`/* A CSS fájl elején */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&family=EB+Garamond:wght@400;700&display=swap'); /* Használat */ body { font-family: 'Open Sans', sans-serif; } h1, h2, h3 { font-family: 'EB Garamond', serif; }`

#### Ajánlott betűtípus párosítások (érettségi fontokból)

- Open Sans + Cormorant: Modern szövegtörzs elegáns címsorokkal
- Raleway + EB Garamond: Letisztult és klasszikus kombináció
- Open Sans + Libre Bodoni: Professzionális, kontrasztos
- Raleway + Texturina: Modern és dekoratív
- Roboto Mono: Kódrészletekhez bármelyik párosítás mellé

### Betűtípus család kategóriák

Kategória | Jellemző | Használat | Érettségi példák
--- | --- | --- | ---
serif | Talpas betűk | Címsorok, formális szöveg | Cormorant, EB Garamond, Libre Bodoni, Podkova, Texturina
sans-serif | Talpatlan betűk | Webes szövegtörzs, modern | Open Sans, Raleway, Changa, Genos, Kufam
monospace | Fix szélességű | Kód, táblázatok | Roboto Mono, Spline Sans Mono
cursive | Kézírásos | Dekoratív címek, aláírások | Caveat, Italianno, Magyar Script

## Betűméret (font-size) EMELT SZINT

A `font-size` tulajdonság a szöveg méretét határozza meg. Többféle mértékegységet használhatunk.

CSS - font-size mértékegységek
`/* Abszolút egységek */ .px { font-size: 16px; } /* Pixelek - fix méret */ .pt { font-size: 12pt; } /* Pontok - nyomtatáshoz */ /* Relatív egységek (ajánlott) */ .em { font-size: 1.5em; } /* Szülő elem méretéhez képest */ .rem { font-size: 1.5rem; } /* Gyökér (html) elem méretéhez képest */ .percent { font-size: 150%; } /* Szülő elem százaléka */ /* Viewport egységek */ .vw { font-size: 5vw; } /* Viewport szélesség 5%-a */ /* Kulcsszavak */ .small { font-size: small; } .medium { font-size: medium; } .large { font-size: large; } .xlarge { font-size: x-large; } /* Ajánlott gyakorlat: rem alapú rendszer */ html { font-size: 16px; /* Alap: 1rem = 16px */ } body { font-size: 1rem; /* 16px */ } h1 { font-size: 2.5rem; /* 40px */ } h2 { font-size: 2rem; /* 32px */ } h3 { font-size: 1.5rem; /* 24px */ } small { font-size: 0.875rem; /* 14px */ }`

#### em vs rem - Fontos különbség!

- em (a nyomdászatból: az "M" betű tipikus szélessége egy adott betűméretben): A szülő elem font-size-ához képest számít → összeadódhat (problémás)
- rem (root em = gyökér em): Mindig az `<html>` elem méretéhez képest → kiszámítható
- Ajánlás: Használj `rem`-et a legtöbb esetben, `em`-et csak speciális esetekben

CSS - Fluid tipográfia clamp()-pel
`/* Modern fluid tipográfia */ h1 { /* clamp(minimum, preferált, maximum) */ font-size: clamp(1.5rem, 5vw, 3rem); /* Minimum 24px, ideális 5vw, maximum 48px */ } p { font-size: clamp(1rem, 2.5vw, 1.25rem); }`

## Betűstílus és vastagság EMELT SZINT

### font-weight - Betűvastagság

CSS - font-weight
`/* Kulcsszavakkal */ .normal { font-weight: normal; } /* 400 */ .bold { font-weight: bold; } /* 700 */ .lighter { font-weight: lighter; } /* Eggyel vékonyabb */ .bolder { font-weight: bolder; } /* Eggyel vastagabb */ /* Számértékekkel (100-900) */ .thin { font-weight: 100; } /* Hairline */ .extralight { font-weight: 200; } /* Extra Light */ .light { font-weight: 300; } /* Light */ .regular { font-weight: 400; } /* Normal/Regular */ .medium { font-weight: 500; } /* Medium */ .semibold { font-weight: 600; } /* Semi Bold */ .bold { font-weight: 700; } /* Bold */ .extrabold { font-weight: 800; } /* Extra Bold */ .black { font-weight: 900; } /* Black/Heavy */ /* Gyakorlati példa */ h1, h2, h3 { font-weight: 700; /* Félkövér címsorok */ } p { font-weight: 400; /* Normál bekezdések */ } strong { font-weight: 600; /* Semi-bold kiemelés */ }`

#### Élő példa - font-weight:

100 - Thin/Hairline

200 - Extra Light

300 - Light

400 - Regular/Normal

500 - Medium

600 - Semi Bold

700 - Bold

800 - Extra Bold

900 - Black/Heavy

### font-style - Betűstílus (dőlt)

CSS - font-style
`/* Normál (álló) szöveg */ .normal { font-style: normal; } /* Dőlt szöveg */ .italic { font-style: italic; } /* Ferde szöveg (ritkán használt) */ .oblique { font-style: oblique; } /* Gyakorlati példák */ em, i, cite { font-style: italic; } /* Dőlt elem visszaállítása */ em.no-italic { font-style: normal; }`

### font - Rövidített forma

CSS - font shorthand
`/* Rövidített szintaxis */ /* font: style weight size/line-height family; */ .rovidites { font: italic 700 1.2rem/1.6 "Roboto", sans-serif; } /* Ez megegyezik ezzel: */ .hosszu { font-style: italic; font-weight: 700; font-size: 1.2rem; line-height: 1.6; font-family: "Roboto", sans-serif; } /* Minimum: size és family kötelező */ .minimal { font: 16px Arial, sans-serif; }`

## Szöveg igazítás EMELT SZINT

### text-align - Vízszintes igazítás

CSS - text-align
`/* Balra igazítás (alapértelmezett LTR nyelveken) */ .left { text-align: left; } /* Jobbra igazítás */ .right { text-align: right; } /* Középre igazítás */ .center { text-align: center; } /* Sorkizárt (mindkét oldal egyenes) */ .justify { text-align: justify; } /* Gyakorlati példák */ h1, h2, h3 { text-align: center; /* Középre igazított címsorok */ } p { text-align: left; /* Balra igazított bekezdések */ } .price { text-align: right; /* Jobbra igazított árak */ } .article-body { text-align: justify; /* Sorkizárt cikkek */ }`

#### Élő példa - text-align:

Balra igazított szöveg (text-align: left)

Középre igazított szöveg (text-align: center)

Jobbra igazított szöveg (text-align: right)

Sorkizárt szöveg - A szavak közötti távolság úgy változik, hogy mindkét margó egyenes legyen. Ez hosszabb szövegeknél használatos. (text-align: justify)

### text-indent - Bekezdés behúzása

CSS - text-indent
`/* Első sor behúzása */ p { text-indent: 2em; /* 2 betűnyi behúzás */ } /* Pixelben */ .indent-px { text-indent: 30px; } /* Negatív behúzás (kilógó első sor) */ .hanging { text-indent: -20px; padding-left: 20px; }`

## Sorköz és betűköz EMELT SZINT

### line-height - Sorköz (sormagasság)

CSS - line-height
`/* Egység nélküli szám (ajánlott) */ p { line-height: 1.6; /* font-size × 1.6 */ } /* Pixelben */ .fixed { line-height: 24px; } /* Százalékban */ .percent { line-height: 160%; } /* Kulcsszó */ .normal { line-height: normal; /* Böngésző alapértelmezett (~1.2) */ } /* Ajánlott értékek */ body { line-height: 1.5; /* Általános szöveg */ } h1 { line-height: 1.2; /* Címsorok - szorosabb */ } .small-text { line-height: 1.8; /* Kis betűméret - tágabb */ }`

#### line-height ajánlások

- 1.4-1.6: Normál szövegtörzs ideális sorköze
- 1.1-1.3: Címsorok - szorosabb sorköz
- 1.7-2.0: Kis betűméret vagy dyslexia-barát
- Tipp: Használj egység nélküli számot, mert öröklődik és skálázódik

### letter-spacing - Betűköz

CSS - letter-spacing
`/* Normál betűköz */ .normal { letter-spacing: normal; } /* Ritkított */ .loose { letter-spacing: 0.1em; } .very-loose { letter-spacing: 0.3em; } /* Sűrített */ .tight { letter-spacing: -0.02em; } /* Gyakori használat: nagybetűs szöveg */ .uppercase-heading { text-transform: uppercase; letter-spacing: 0.15em; /* Nagybetűknél szükséges a ritkítás */ font-weight: 600; } /* Logó stílus */ .brand { letter-spacing: 0.2em; text-transform: uppercase; }`

### word-spacing - Szóköz

CSS - word-spacing
`/* Normál szóköz */ .normal { word-spacing: normal; } /* Nagyobb szóköz */ .wide { word-spacing: 0.5em; } /* Kisebb szóköz */ .tight { word-spacing: -0.1em; } /* Gyakorlati példa */ .justified-text { text-align: justify; word-spacing: 0.1em; /* Kiegyenlíti a sorkizárás miatti változásokat */ }`

#### Élő példa - Betű- és szóköz:

Normál betűköz

Ritkított betűköz (0.1em)

NAGYBETŰS RITKÍTOTT (0.3em)

Sűrített betűköz (-0.02em)

## Szöveg dekoráció EMELT SZINT

### text-decoration - Aláhúzás, áthúzás

CSS - text-decoration
`/* Aláhúzás */ .underline { text-decoration: underline; } /* Áthúzás */ .line-through { text-decoration: line-through; } /* Felülhúzás */ .overline { text-decoration: overline; } /* Nincs dekoráció */ .none { text-decoration: none; } /* Több dekoráció */ .multi { text-decoration: underline overline; } /* Részletes beállítások */ .fancy { text-decoration: underline; text-decoration-color: #ff5500; text-decoration-style: wavy; /* solid, double, dotted, dashed, wavy */ text-decoration-thickness: 2px; } /* Rövidített forma */ .shorthand { text-decoration: underline wavy #ff5500 2px; } /* Aláhúzás pozíciója */ .skip { text-decoration: underline; text-underline-offset: 3px; /* Távolság a szövegtől */ } /* Link stílusok */ a { text-decoration: none; /* Link aláhúzás eltávolítása */ } a:hover { text-decoration: underline; /* Hover-re visszaáll */ }`

#### Élő példa - text-decoration:

Aláhúzott szöveg

Áthúzott szöveg

Felülhúzott szöveg

Hullámos piros aláhúzás

Pontozott kék aláhúzás

### text-transform - Kis/nagybetű átalakítás

CSS - text-transform
`/* Nagybetűs */ .uppercase { text-transform: uppercase; } /* MINDEN NAGYBETŰ */ /* Kisbetűs */ .lowercase { text-transform: lowercase; } /* minden kisbetű */ /* Szókezdő nagybetű */ .capitalize { text-transform: capitalize; } /* Minden Szó Nagybetűvel */ /* Nincs átalakítás */ .none { text-transform: none; } /* Gyakorlati példák */ .nav-link { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9rem; } .article-category { text-transform: uppercase; font-weight: 600; color: #007bff; }`

## Text-shadow - Szövegárnyék BÓNUSZ

CSS - text-shadow
`/* Alapvető árnyék */ /* text-shadow: x-offset y-offset blur-radius color; */ .shadow1 { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } /* Nincs blur */ .shadow2 { text-shadow: 1px 1px 0 #333; } /* Több árnyék (rétegezve) */ .shadow3 { text-shadow: 1px 1px 0 #fff, 2px 2px 0 #333; } /* Neon effekt */ .neon { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff5500, 0 0 30px #ff5500, 0 0 40px #ff5500; } /* Dombormű effekt */ .emboss { color: #ccc; text-shadow: -1px -1px 1px #fff, 1px 1px 1px #333; } /* Körvonal effekt */ .outline { color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } /* Hosszú árnyék (flat design) */ .long-shadow { color: #fff; text-shadow: 1px 1px 0 #ff5500, 2px 2px 0 #ff5500, 3px 3px 0 #ff5500, 4px 4px 0 #ff5500, 5px 5px 0 #ff5500; }`

#### Élő példa - text-shadow effektek:

Egyszerű árnyék

Neon effekt

Körvonal effekt

## Egyéb szövegtulajdonságok BÓNUSZ

CSS - További szövegtulajdonságok
`/* white-space - Szóközök kezelése */ .nowrap { white-space: nowrap; } /* Nincs sortörés */ .pre { white-space: pre; } /* Megőrzi a formázást */ .pre-wrap { white-space: pre-wrap; } /* Megőrzi + töri */ .pre-line { white-space: pre-line; } /* Összeolvasztja a szóközöket */ /* word-break - Szótörés */ .break-all { word-break: break-all; } /* Bárhol törhető */ .keep-all { word-break: keep-all; } /* Csak szóközöknél */ /* overflow-wrap (word-wrap) - Túl hosszú szavak */ .break-word { overflow-wrap: break-word; } /* text-overflow - Túlcsordulás kezelése */ .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Három pont a végén... */ } /* Többsoros ellipsis (modern böngészők) */ .multiline-ellipsis { display: -webkit-box; -webkit-line-clamp: 3; /* Max 3 sor */ -webkit-box-orient: vertical; overflow: hidden; } /* hyphens - Elválasztás (nyelvfüggő) */ .hyphen { hyphens: auto; /* Automatikus elválasztás */ lang: hu; /* Magyar nyelv */ } /* writing-mode - Írásirány */ .vertical { writing-mode: vertical-rl; } /* Függőleges */ /* direction - Szövegirány */ .rtl { direction: rtl; } /* Jobbról balra (arab, héber) */`

## Gyakorlati példa: Tipográfia rendszer

CSS - Teljes tipográfia rendszer (érettségi betűtípusokkal)
`/* Betűtípusok importálása Google Fonts-ról */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Cormorant:wght@400;500;600;700&family=Roboto+Mono:wght@400;700&display=swap'); /* Alapbeállítások CSS változókkal */ :root { /* Betűtípusok */ --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: 'Cormorant', Georgia, serif; --font-mono: 'Roboto Mono', Consolas, monospace; /* Betűméretek */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 2rem; /* 32px */ --text-4xl: 2.5rem; /* 40px */ /* Sormagasságok */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; } /* Alap stílusok */ body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: #333; } /* Címsorok - Cormorant serif */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 600; line-height: var(--leading-tight); margin-bottom: 0.5em; } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } /* Bekezdések */ p { margin-bottom: 1em; line-height: var(--leading-relaxed); } /* Lead bekezdés */ .lead { font-size: var(--text-lg); color: #666; } /* Kódrészletek - Roboto Mono */ code, pre { font-family: var(--font-mono); font-size: var(--text-sm); } /* Kis szöveg */ small, .small { font-size: var(--text-sm); } /* Kiemelések */ strong { font-weight: 600; } /* Linkek */ a { color: #007bff; text-decoration: none; transition: color 0.2s; } a:hover { color: #0056b3; text-decoration: underline; }`

## Összefoglalás

Ebben a cikkben megismerkedtél a CSS szövegformázás lehetőségeivel:

- Betűtípusok: font-family, web-safe fonts, Google Fonts
- Érettségi betűtípusok: Cormorant, EB Garamond, Open Sans, Raleway, Caveat, Roboto Mono és társaik
- @font-face: Saját betűtípusok betöltése, variable fonts
- Betűméret: font-size (px, em, rem, clamp)
- Betűstílus: font-weight, font-style
- Szöveg igazítás: text-align, text-indent
- Térközök: line-height, letter-spacing, word-spacing
- Dekoráció: text-decoration, text-transform
- Effektek: text-shadow

#### Példák a weboldalunkon

Nézd meg, hogyan használjuk a tipográfiát:

- Főoldal - Címsorok hierarchiája és lead szöveg
- Processzor oldal - Terméknév és leírás tipográfia
- Blog oldal - Cikk tipográfia és olvashatóság

#### Következő lépések

Készíts saját tipográfia rendszert: válassz betűtípust a Google Fonts-ról, állítsd be a méretskálát és a sorközt!

Következő cikk: Div elem és Box model - Ismerd meg a CSS dobozmodellt: padding, border, margin és a box-sizing tulajdonságot!