Typografia

Jeśli nie określisz żadnych stylów tekstu, przeglądarki zastosują własne style domyślne. Są one nazywane arkuszami stylów agenta użytkownika i mogą się różnić w zależności od przeglądarki. Użytkownicy mogą też ustawić własne preferencje dotyczące wyświetlania tekstu.

Jeśli nie określisz długości wiersza, przeglądarki będą zawijać wiersze tekstu na krawędzi ekranu. Tekst w internecie jest domyślnie elastyczny – dopasowuje się do widocznego obszaru użytkownika.

To, że tekst mieści się na ekranie, nie oznacza, że jest wygodny do czytania. Dobra typografia polega na odpowiednim prezentowaniu tekstu. Typografia to nie tylko wybór odpowiednich czcionek. Musisz wziąć pod uwagę preferencje użytkownika, rozmiar tekstu, długość wiersza i odległość między wierszami tekstu.

Rozmiar tekstu

Trudno określić, jaki rozmiar tekstu w internecie jest odpowiedni.

Jeśli ktoś korzysta z małego ekranu, można założyć, że będzie on dość blisko oczu – w odległości dłoni.

Jednak w miarę powiększania się ekranów coraz trudniej jest nawiązać taką więź. Ekran laptopa będzie prawdopodobnie dość blisko widza, ale monitor panoramiczny ma mniej więcej taki sam rozmiar jak ekran telewizora. Użytkownicy siedzą w odległości wyciągniętej ręki od ekranu komputera, ale znacznie dalej od telewizora.

Nie możesz mieć pewności, jak daleko ktoś znajduje się od ekranu, ale możesz spróbować użyć rozmiarów tekstu, które prawdopodobnie będą odpowiednie. Używaj mniejszych rozmiarów tekstu na mniejszych ekranach i większych rozmiarów tekstu na większych ekranach.

Możesz użyć zapytań o media, aby zmieniać właściwość font-size w miarę zwiększania się szerokości ekranu.

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

Skalowanie tekstu

Przełączanie między stałymi rozmiarami tekstu w określonych punktach przerwania jest dość skokowe. Bardziej elastycznym rozwiązaniem jest pozwolenie, aby szerokość urządzenia użytkownika wpływała na rozmiar tekstu.

Jednostka vw w CSS oznacza „szerokość widocznego obszaru”. Powiązanie rozmiarów czcionek z szerokością obszaru wyświetlania oznacza, że tekst będzie się powiększać i pomniejszać proporcjonalnie do szerokości przeglądarki. Utrudnia to przewidywanie, jaki będzie rozmiar tekstu przy określonej szerokości, ale wiesz, że będzie on odpowiedni dla szerokości przeglądarki użytkownika.

Ważne jest, aby w deklaracji rozmiaru czcionki nie używać samego znaku vw.

html {
  font-size: 2.5vw;
}

Jeśli to zrobisz, użytkownik nie będzie mógł zmienić rozmiaru tekstu. Tekst będzie można zmieniać, jeśli użyjesz jednostki względnej, np. em, rem lub ch. Funkcja CSS calc() jest do tego idealna.

html {
  font-size: calc(0.75rem + 1.5vw);
}

Niech przeglądarka wykona obliczenia. Utrudnia to dokładne przewidzenie, jaki będzie rozmiar tekstu przy określonej szerokości, ale masz pewność, że będzie on mieścił się w odpowiednim zakresie. Przeglądarka użytkownika zajmuje się obliczaniem dokładnego rozmiaru tekstu.

Teraz jednak tekst może być zbyt mały na wąskich ekranach i zbyt duży na szerokich.

Przycinanie tekstu

Prawdopodobnie nie chcesz, aby tekst kurczył się i powiększał w ekstremalnym stopniu. Za pomocą funkcji CSS clamp() możesz określić, gdzie ma się zaczynać i kończyć skalowanie. W ten sposób „ograniczysz” skalowanie do określonego zakresu.

Funkcja clamp() jest podobna do funkcji calc(), ale przyjmuje 3 wartości. Środkowa wartość jest taka sama jak wartość przekazywana do parametru calc(). Wartość otwierająca określa minimalny rozmiar, w tym przypadku 1 rem, aby nie był mniejszy niż preferowany rozmiar czcionki użytkownika. Wartość końcowa określa maksymalny rozmiar.

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

Teraz rozmiar tekstu zmniejsza się i zwiększa proporcjonalnie do ekranu użytkownika, ale nigdy nie będzie mniejszy niż 1rem ani większy niż 2rem.

Długość linii

Internet to nie druk, ale możemy wyciągnąć wnioski ze świata druku i zastosować je w internecie.

W swojej klasycznej książce The Elements of Typographic Style Robert Bringhurst napisał o długości wiersza (lub miary):

Za zadowalającą długość wiersza na stronie jednokolumnowej, w której tekst jest zapisany czcionką szeryfową w odpowiednim rozmiarze, uważa się od 45 do 75 znaków. Za idealną uważa się linię zawierającą 66 znaków (licząc litery i spacje). W przypadku pracy z wieloma kolumnami lepsza średnia to 40–50 znaków.

Nie możesz ustawić długości wiersza bezpośrednio w CSS. Brak właściwości line-length. Możesz jednak zapobiec nadmiernemu rozszerzaniu się tekstu, ograniczając szerokość kontenera. Właściwość max-inline-size jest do tego idealna.

Nie ustawiaj długości wierszy za pomocą stałej jednostki, np. px. Użytkownicy mogą zwiększać i zmniejszać rozmiar czcionki, a długość wierszy powinna się odpowiednio dostosowywać. Użyj jednostki względnej, np. rem lub ch.

article {
  max-inline-size: 700px;
}

article {
  max-inline-size: 66ch;
}

Użycie jednostek ch dla szerokości spowoduje zawijanie nowych wierszy przy 66 znaku przy danym rozmiarze czcionki.

Wysokość wiersza

Chociaż w CSS nie ma właściwości line-length, istnieje właściwość line-height.

Krótsze wiersze tekstu mogą mieć większe wartości line-height. Jeśli jednak użyjesz dużych wartości line-height w przypadku długich wierszy tekstu, czytelnikowi trudno będzie przenieść wzrok z końca jednego wiersza na początek następnego.

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

W deklaracjach line-height używaj wartości bez jednostek. Dzięki temu wysokość wiersza jest względna w stosunku do font-size.

line-height: 24px;

line-height: 1.5;

Kombinacje i skala

Podczas tworzenia interfejsów użytkownika pamiętaj o hierarchii, aby zwiększyć przejrzystość i ułatwić poruszanie się po stronie. Świetnym sposobem na to jest skala typograficzna wbudowana w system projektowania.

Czcionki internetowe

Krój pisma jest jak głos Twoich słów. Przez długi czas w internecie było bardzo mało opcji czcionek. Dostępne były tylko czcionki systemowe. Teraz możesz wybrać czcionkę internetową, która pasuje do charakteru Twoich treści.

Użyj tagu @font-face, aby poinformować przeglądarki, gdzie znajdują się pliki czcionek internetowych. Używaj formatu woff2 jako formatu czcionki internetowej. Jest dobrze obsługiwany i zapewnia największy wzrost wydajności.

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

Każdy dodany plik czcionki internetowej może jednak pogorszyć wygodę użytkowników, ponieważ wydłuża czas wczytywania strony. Pamiętaj, że projektowanie to nie tylko wygląd końcowych pikseli. Szybkość wyświetlania tych pikseli ma kluczowe znaczenie dla wygody użytkowników. Szybkie działanie to dobre wrażenia użytkownika.

Wczytywanie czcionki

Możesz poprosić przeglądarki o jak najszybsze pobranie pliku czcionki. Dodaj element link do sekcji head dokumentu, który odwołuje się do pliku czcionki internetowej. Atrybut rel o wartości preload informuje przeglądarkę, że ma traktować ten plik priorytetowo. Atrybut as z wartością font informuje przeglądarkę, jaki to typ pliku. Atrybut type pozwala na jeszcze bardziej szczegółowe określenie typu pliku.

<link href="/fonts/roboto-regular.woff2" type="font/woff2"
  rel="preload" as="font" crossorigin>

Musisz dodać atrybut crossorigin, nawet jeśli samodzielnie hostujesz pliki czcionek.

Użyj właściwości CSS font-display, aby poinformować przeglądarkę, jak zarządzać przełączaniem z czcionki systemowej na czcionkę internetową. Możesz zdecydować, że tekst nie będzie wyświetlany, dopóki nie zostanie wczytana czcionka internetowa. Możesz od razu wyświetlić czcionkę systemową, a potem przełączyć się na czcionkę internetową, gdy się ona wczyta. Obie strategie mają swoje wady. Jeśli poczekasz, aż czcionka internetowa zostanie pobrana, zanim wyświetlisz jakikolwiek tekst, użytkownicy mogą przez długi czas patrzeć na pustą stronę. Jeśli najpierw wyświetlisz tekst w czcionce systemowej, a potem przełączysz się na czcionkę internetową, użytkownicy mogą zauważyć nieprzyjemne przesuwanie się treści na stronie.

Dobrym kompromisem jest odczekanie krótkiego czasu przed wyświetleniem tekstu. Jeśli czcionka internetowa wczyta się przed upływem tego czasu, tekst zostanie wyświetlony przy użyciu tej czcionki bez przesunięć treści. Jeśli po upływie tego czasu czcionka internetowa nadal nie zostanie wczytana, tekst zostanie wyświetlony przy użyciu czcionki systemowej, aby użytkownik mógł przeczytać treść.

Użyj wartości font-displayswap, jeśli chcesz, aby czcionka internetowa zastępowała czcionkę systemową, gdy tylko się wczyta.

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

Użyj wartości font-displayfallback, jeśli po wyrenderowaniu tekstu chcesz nadal używać czcionki systemowej.

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

Czcionki zmienne

Jeśli używasz wielu różnych grubości lub stylów tego samego kroju pisma, możesz używać wielu osobnych plików czcionek – osobnego pliku czcionki dla każdej grubości lub stylu.

Czcionki zmienne rozwiązują ten problem, używając jednego pliku. Zamiast oddzielnych plików dla czcionek zwykłych, pogrubionych, bardzo pogrubionych i innych wariantów, plik czcionki zmiennej jest responsywny. Zawiera wszystkie informacje potrzebne do wyświetlania w różnych grubościach i stylach.

Oznacza to, że pojedynczy plik czcionki zmiennej jest większy niż pojedynczy plik czcionki zwykłej, ale pojedynczy plik czcionki zmiennej jest prawdopodobnie mniejszy niż wiele plików czcionek zwykłych. Jeśli używasz wielu różnych grubości, czcionka zmienna może znacznie zwiększyć wydajność.

Dobra typografia w internecie to nie tylko wybór odpowiednich fontów przez projektanta. Elastyczna typografia polega też na dostosowywaniu się do urządzenia użytkownika i jego połączenia sieciowego. Dzięki temu projekt będzie wyglądać dobrze niezależnie od tego, na jakim urządzeniu jest wyświetlany.

Teraz, gdy już wiesz, jak tworzyć elastyczne reklamy tekstowe, czas poznać elastyczne reklamy graficzne.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o typografii