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!