Typografia

Jeśli nie określisz żadnych stylów tekstu, przeglądarki zastosują własne style domyślne. Są to tzw. arkusze stylów klienta użytkownika, które mogą się różnić w zależności od przeglądarki. Użytkownicy mogą konfigurować własne ustawienia wyświetlania tekstu.

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

Jednak nawet jeśli tekst mieści się na ekranie, nie znaczy, że wygodnie się go czyta. Dobra typografia polega na odpowiednim prezentowaniu tekstu. Typografia to nie tylko wybór odpowiednich czcionek. Musisz uwzględnić preferencje użytkownika, rozmiar tekstu, długość wierszy i odległość między wierszami tekstu.

Rozmiar tekstu

Trudno powiedzieć, jaki powinien być rozmiar tekstu w internecie.

Jeśli ktoś korzysta z małego ekranu, można założyć, że jest on dość blisko oczu – na odległość równą dłoni.

Jednak wraz ze wzrostem wielkości ekranu i powiększania się ekranu, trudniej jest nawiązać z nim połączenie. Ekran laptopa znajduje się w większej odległości od użytkownika, ale szerokoekranowy monitor biurkowy jest mniej więcej taki sam jak ekran telewizora. Ludzie są oddalone o wysokości ręki od ekranu komputera, ale znacznie dalej od telewizora.

Mimo to, choć nie wiesz, jak daleko znajduje się użytkownik od ekranu, możesz używać takiego rozmiaru tekstu, który zgodnie z oczekiwaniami okaże się odpowiedni. Mniejszy rozmiar tekstu sprawdza się na mniejszych ekranach, a większy – na większych ekranach.

Za pomocą zapytań o multimedia możesz zmieniać właściwość font-size w miarę zwiększania rozmiaru 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 się między stałymi rozmiarami tekstu w poszczególnych punktach przerwania jest sporym wyzwaniem. Bardziej responsywne jest to, aby szerokość urządzenia wpływała na rozmiar tekstu.

Jednostka vw w CSS to „szerokość widocznego obszaru”. Łączenie rozmiarów czcionek z szerokością widocznego obszaru oznacza, że tekst będzie się powiększał i kurczył proporcjonalnie do szerokości okna przeglądarki. To sprawia, że trudno jest przewidzieć rozmiar tekstu przy danej szerokości, ale wiadomo, że rozmiar tekstu będzie dopasowany do szerokości przeglądarki użytkownika.

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

html {
  font-size: 2.5vw;
}

Gdy to zrobisz, użytkownik nie będzie mógł zmienić rozmiaru tekstu. Można zmienić rozmiar tekstu, jeśli dodasz do niego jednostkę względną, np. em, rem lub ch. Idealnie nadaje się do tego funkcja CSS calc().

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

Pozwól przeglądarce wykonać obliczenia. Dlatego trudno jest przewidzieć dokładnie, jaki będzie rozmiar tekstu przy każdej konkretnej szerokości, ale wiadomo, że rozmiar tekstu mieści się w odpowiednim zakresie. Określanie dokładnego rozmiaru tekstu zajmuje przeglądarka użytkownika.

Teraz może się jednak zdarzyć, że tekst będzie za mały na wąskich ekranach i za duży na szerokich.

Zawijanie tekstu

Prawdopodobnie nie chcesz, aby tekst kurczył się i zwiększał do ekstremalnego poziomu. Za pomocą funkcji CSS clamp() możesz określić, gdzie ma się rozpocząć i zakończyć skalowanie. Powoduje to „ograniczenie” skalowania do określonego zakresu.

Funkcja clamp() jest podobna do funkcji calc(), ale przyjmuje 3 wartości. Wartość środkowa jest taka sama jak wartość, którą przesyłasz do: calc(). Wartość otwierająca określa minimalny rozmiar, w tym przypadku 1 rem, aby nie znikał poniżej preferowanego rozmiaru czcionki użytkownika. Wartość zamykająca określa maksymalny rozmiar.

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

Teraz rozmiar tekstu zmniejszy się i zwiększy proporcjonalnie do ekranu użytkownika, ale rozmiar tekstu nigdy nie spadnie poniżej 1rem ani nie przekroczy 2rem.

Długość linii

Internet nie jest drukowany, ale możemy wyciągnąć wnioski z druku i zastosować je w sieci.

W swojej klasycznej książki The Elements of Typoography Style (Elementy typograficznego stylu) Robert Bringhurst chciał w ten sposób przedstawić długość wiersza (czyli miary):

Tekst o długości od 45 do 75 znaków jest powszechnie uznawany za zadowalającą długość w przypadku strony jednokolumnowej umieszczonej w tekście szeryfowym w rozmiarze tekstu. 66-znakowa linia (zawierająca zarówno litery, jak i spacje) jest powszechnie uznawana za idealną. W przypadku pracy z wieloma kolumnami lepsza średnia to 40–50 znaków.

Nie można ustawić długości wiersza bezpośrednio w CSS. Brak właściwości line-length. Aby tekst nie był zbyt szeroki, możesz ograniczyć szerokość kontenera. Właściwość max-inline-size doskonale się do tego nadaje.

Nie ustawiaj długości wierszy za pomocą stałej jednostki, np. px. Użytkownicy mogą skalować rozmiar czcionki w górę lub w dół, a długość wierszy powinna się odpowiednio dostosować. Użyj jednostki względnej, takiej jak rem lub ch.

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

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

Jeśli użyjesz jednostek szerokości ch, nowe wiersze zostaną zawijane do 66. znaku przy tym rozmiarze czcionki.

Wysokość wiersza

W usłudze porównywania cen nie ma właściwości line-length, ale istnieje właściwość line-height.

Krótsze wiersze tekstu mogą mieć większe wartości line-height. Jeśli jednak używasz dużych wartości line-height w długich wierszach tekstu, czytelnik może mieć trudności z przejściem od końca jednego wiersza do początku 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 będzie względem wysokości font-size.

line-height: 24px;

line-height: 1.5;

Kombinacje i skala

Pamiętaj o ustaleniu hierarchii na pierwszym miejscu podczas tworzenia interfejsów, aby zadbać o przejrzystość i przepływ strony. Świetnym sposobem, by to zrobić, jest skala typograficzna wbudowana w Twój system projektowania.

Czcionki internetowe

Krój czcionki jest jak głos Twoich słów. Przez najdłuższy czas w internecie dostępnych było bardzo mało opcji czcionek. Jedynymi opcjami były czcionki systemowe. Teraz możesz jednak wybrać czcionkę internetową, która pasuje do charakteru Twoich treści.

Użyj polecenia @font-face, aby poinformować przeglądarki, gdzie mogą znaleźć pliki czcionek internetowych. Użyj woff2 jako formatu czcionki internetowej. Jest dobrze obsługiwane i osiąga największe korzyści w zakresie wydajności.

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

Każdy dodany przez Ciebie plik czcionek internetowych może pogarszać wygodę użytkowników, ponieważ wydłuża czas wczytywania strony. Pamiętaj, że projekt to nie tylko końcowy wygląd pikseli. Szybkość, z jaką te piksele są malowane, ma duże znaczenie dla wygody użytkownika. Szybkie wrażenia zapewniają użytkownikom dobre wrażenia.

Ładowanie czcionki

Możesz poprosić, aby przeglądarki jak najszybciej rozpoczęły pobieranie pliku czcionek. Dodaj element link do elementu head w dokumencie, który odwołuje się do pliku czcionek internetowych. Atrybut rel o wartości preload informuje przeglądarkę, że należy nadać priorytet plikowi. Atrybut as o wartości font informuje przeglądarkę, jakiego rodzaju jest to plik. Atrybut type pozwala na jeszcze więcej szczegółów.

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

Musisz uwzględnić atrybut crossorigin, nawet jeśli samodzielnie hostujesz pliki czcionek.

Użyj właściwości CSS font-display, aby poinformować przeglądarkę, jak ma zarządzać przejściem z czcionki systemowej na czcionkę internetową. Możesz zdecydować, aby tekst nie był wyświetlany do czasu załadowania czcionki internetowej. Możesz wybrać, czy czcionka systemowa ma być wyświetlana natychmiast, a po jej wczytaniu przełącz się na czcionkę internetową. Obie strategie mają swoje wady. Jeśli poczekasz na pobranie czcionki internetowej, zanim wyświetlisz tekst, użytkownicy mogą przez dłuższy czas wpatrywać się w pustą stronę. Jeśli tekst zostanie najpierw wyświetlony przy użyciu czcionki systemowej, a potem przełączysz się na czcionkę internetową, użytkownicy mogą zauważyć na stronie niejednoznaczne przesunięcie treści.

Dobrym kompromisem jest odczekanie krótkiej chwili przed wyświetleniem tekstu. Jeśli czcionka zostanie wczytana przed upływem tego czasu, tekst zostanie wyświetlony przy użyciu czcionki internetowej bez zmian treści. Jeśli czcionka internetowa nadal nie zostanie załadowana po upływie określonego czasu, tekst jest wyświetlany przy użyciu czcionki systemowej, aby użytkownik mógł przeczytać treść.

Użyj wartości font-display o wartości swap, jeśli chcesz, aby czcionka internetowa nadal zastępowała czcionkę systemową po jej wczytaniu.

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

Użyj wartości font-display o wartości fallback, jeśli chcesz zachować czcionkę systemową po wyrenderowaniu tekstu.

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

Zmienne czcionki

Jeśli używasz wielu różnych grubości lub stylów tego samego kroju, możesz otrzymać wiele osobnych plików czcionek – osobne pliki dla każdej grubości i stylu.

Zmienne czcionki rozwiązują ten problem przy użyciu jednego pliku. Zamiast osobnych plików ze zwykłymi, pogrubionymi i dodatkowymi pogrubieniami itp. możesz elastycznie tworzyć pliki z czcionkami. Zawiera wszystkie informacje potrzebne do wyświetlenia w różnych wagach i stylach.

Oznacza to, że pojedynczy plik z czcionkami jest większy niż pojedynczy zwykły plik z czcionkami, ale pojedynczy plik z czcionkami może być mniejszy niż wiele zwykłych plików czcionek. Jeśli używasz wielu wag, zmienna czcionka może znacznie zwiększyć wydajność.

Dobra typografia w internecie nie oznacza wyłącznie możliwości wyboru typu projektowego. Elastyczna typografia oznacza również szanowanie urządzenia i połączenia sieciowego użytkownika. W efekcie powstaje projekt, który wydaje się odpowiedni niezależnie od tego, jak jest wyświetlany.

Wiesz już, jak tekst responsywny. Teraz czas zająć się obrazami elastycznymi.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę z zakresu typografii