Typografia

Funkcje internetowe: font-size rem jednostka em line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min(), max() i clamp() jednostki widocznego obszaru

Ogólne sprawdzone metody

  • Używaj liczb bez jednostek w przypadku line-height (np. 1.5), aby zapewnić względne skalowanie podczas dziedziczenia rozmiaru czcionki.
  • Używaj overflow-wrap: break-word (lub anywhere) do umieszczania długich adresów URL.
  • NIE używaj px do określania rozmiaru czcionki. Używaj rem, aby uwzględniać preferencje użytkownika dotyczące rozmiaru czcionki w przeglądarce (rozmiar czcionki głównej), lub em/procentów w przypadku rozmiaru kontekstowego.

Czytelność

  • Unikaj długich wierszy tekstu: ogranicz szerokość bloków akapitów do maksymalnie 80 znaków.
  • Unikaj „rzek” odstępów: unikaj text-align: justify, ponieważ może to utrudniać czytanie tekstu. Jeśli musisz go użyć, połącz go z hyphens: auto, aby uniknąć nadmiernych odstępów między słowami.
  • Nie używaj ozdobnych czcionek: unikaj kursywy w głównych treściach do czytania.
  • Nie używaj samych wielkich liter do wyróżniania tekstu: do wyróżniania wizualnego używaj pogrubienia, a do wyróżniania semantycznego – tagów <em>/<strong>.
  • Ogranicz ogólne wyróżnianie: wyróżnianie traci znaczenie, gdy jest stosowane wszędzie. Używaj go tylko tam, gdzie zmienia sposób odczytywania treści.
  • Obsługa preferencji użytkownika dotyczących powiększenia: umożliwia użytkownikom zmianę rozmiaru tekstu do 200% bez utraty treści i funkcjonalności.
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

Zawijanie tekstu

  • Używaj text-wrap: balance do tworzenia zrównoważonych nagłówków i treści przypominających nagłówki (np. <th>).
  • Używaj text-wrap: pretty w przypadku długich fragmentów tekstu (akapitów, cytatów blokowych itp.).
  • Używaj text-wrap: balance lub text-wrap: pretty z rozmysłem, NIE stosuj ich w *, ponieważ wpływa to na wydajność.
  • Unikaj stosowania właściwości text-wrap: balance w przypadku elementów z widocznym polem (tła, obramowania, cienie itp.), ponieważ nie zmienia ona szerokości kontenera, a wpływa tylko na zawijanie tekstu w ramach tej szerokości. Może to spowodować pozostawienie pustego miejsca na końcu kontenera, co zwykle jest niepożądane.

Typografia elastyczna

  • ŁĄCZ jednostki względne widocznego obszaru i czcionki w clamp(), aby rozmiary czcionek skalowały się wraz z rozmiarem widocznego obszaru, ale pozostawały w żądanym zakresie. Na przykład: clamp(2rem, 1rem + 5vw, 4rem). Dostosuj proporcje jednostek względnych widocznego obszaru i jednostek względnych czcionki, aby kontrolować szybkość zmiany rozmiaru czcionki.
  • NIE używaj samej jednostki vw do określania rozmiaru czcionki bez clamp(), ponieważ może to spowodować, że tekst będzie zbyt mały lub zbyt duży na ekranach o nietypowych rozmiarach.