Mely tulajdonságok vezérlik a szöveget és a betűtípusokat?

Question

IT Interview Practice · Accepted Answer

A tipográfiát a `font-*` és `text-*` tulajdonságok családja vezérli. Ezek helyes beállítása az, ami egy oldalt csiszolttá és olvashatóvá teszi.

```css
.text {
  font-family: "Inter", system-ui, sans-serif; /* with fallbacks */
  font-size: 1rem;       /* size (use rem for accessibility) */
  font-weight: 600;      /* 100–900; 400 normal, 700 bold */
  font-style: italic;    /* normal | italic */
  line-height: 1.5;      /* spacing between lines — unitless is best */
  letter-spacing: 0.02em;/* tracking between characters */
}
```

## font-family tartalék stackek

```css
font-family: "Inter", system-ui, -apple-system, sans-serif;
```

A böngésző sorban próbál mindegyiket, amíg meg nem talál egy elérhetőt. Mindig végezzen **általános családdal** (`sans-serif`, `serif`, `monospace`) úgy, hogy a szöveg akkor is megjelenik, ha az egyéni betűtípusok nem sikerülnek. A `system-ui` az operációs rendszer natív betűtípusát használja (gyors, nincsen letöltés).

## Szöveg elrendezési tulajdonságok

```css
.text {
  text-align: center;        /* left | right | center | justify */
  text-decoration: underline;/* underline | line-through | none */
  text-transform: uppercase; /* UPPERCASE | lowercase | Capitalize */
  white-space: nowrap;       /* prevent wrapping */
  word-break: break-word;    /* break long words/URLs */
}
```

## line-height: egység nélküli értékek használata

```css
line-height: 1.5;    /* ✅ 1.5 × the element's font-size — scales correctly */
line-height: 24px;   /* ⚠️ fixed — doesn't adapt if font-size changes */
```

Az **egység nélküli** `line-height` az egyes elemek saját font-size-ét szorozza, így arányos marad, ha a beágyazott elemek eltérő méretűek — az ajánlott megközelítés.

## Szöveg csonkítása (közös szükséglet)

```css
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* shows "..." when text is cut off */
}
```

## Miért fontos

A szöveg tulajdonságok az olvashatóságot és a vizuális hierarchiát vezérlik — `font-size`/`weight` a kiemeléshez, `line-height` (~1.5) a kényelmes olvasáshoz, tartalék stackek a megbízhatósághoz, és `text-overflow` a tiszta csonkításhoz.

A jó tipográfia a jól megjelenő felhasználói felület nagyobb része.

font-family tartalék stackek

Szöveg elrendezési tulajdonságok

line-height: egység nélküli értékek használata

Szöveg csonkítása (közös szükséglet)

Miért fontos

Kapcsolódó kérdések