Typografia — CSS

Typografia decyduje o czytelności tekstu na stronie.

Jak to działa?

font-size zmienia rozmiar, font-weight grubość, a line-height odstęp między wierszami. Używaj odpowiedniej długości wierszy w tekstach.

Przykład 1 — poznaj zapis

.article {
  max-width: 65ch;
  font-size: 1rem;
  line-height: 1.65;
}
.article h2 { line-height: 1.2; }

Jednostka ch ułatwia kontrolowanie długości wiersza.

Przeczytaj kod linijka po linijce

.article {Wybieramy elementy, które mają otrzymać podane style.
max-width: 65ch;Kontrolujemy wymiary elementu.
font-size: 1rem;Określamy rozmiar lub czytelność tekstu.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Tekst ma wygodną długość wierszy i większą interlinię.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

p { max-width: 50ch; line-height: 1.8; }

Wynik drugiego przykładupo uruchomieniu przykładu

Tekst nie jest zbyt szeroki i ma luźniejszy odstęp linii.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Zwiększ odstęp między akapitami.