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 i mogą się różnić w zależności od przeglądarki. Użytkownicy mogą też dostosować 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. Dzięki temu tekst w internecie jest domyślnie elastyczny – dopasowuje się do obszaru widocznego dla użytkownika.

Ale to, że tekst mieści się na ekranie, nie oznacza, że wygodnie się go czyta. Dobra typografia polega na tym, żeby przedstawić tekst we właściwy sposób. Typografia to nie tylko wybór odpowiednich czcionek. Musisz wziąć pod uwagę preferencje użytkownika, rozmiar tekstu, długość wierszy i odległość między wierszami.

Rozmiar tekstu

Trudno określić odpowiedni rozmiar tekstu w internecie.

Jeśli ktoś korzysta z małego ekranu, możesz mieć pewność, że jego ekran będzie znajdować się blisko oczu – na odległą dłoń.

Jednak wraz z tym, że ekrany są coraz większe, coraz trudniej jest nawiązać takie połączenie. Ekran laptopa jest prawdopodobnie dość blisko przeglądarki, ale szerokoekranowy monitor komputerowy ma taką samą wielkość jak ekran telewizora. Ludzie siedzą na odległość ramienia od ekranu komputera, ale znacznie dalej od telewizora.

Mimo że nie wiesz dokładnie, jak daleko od ekranu jest dana osoba, spróbuj użyć rozmiarów tekstu, które prawdopodobnie będą odpowiednie. Mniejszego tekstu używaj na mniejszych ekranach, a większych – 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 ustalonymi rozmiarami tekstu w określonych punktach przerwania jest dość pracochłonne. Bardziej elastyczne podejście polega na zapewnieniu wpływu szerokości urządzenia użytkownika na rozmiar tekstu.

Jednostka vw w CSS to „szerokość widocznego obszaru”. Łączenie rozmiarów czcionek czyli szerokość widocznego obszaru oznacza, że tekst będzie się powiększać i zmniejszać proporcjonalnie do szerokości przeglądarki. Trudno jest przewidzieć, jaki będzie tekst o konkretnej szerokości, ale wiesz, że taki rozmiar tekstu będzie pasować do szerokości przeglądarki użytkownika.

Pamiętaj, aby nie używać samego atrybutu vw w deklaracji rozmiaru czcionki.

html {
  font-size: 2.5vw;
}

Jeśli to zrobisz, użytkownik nie będzie mógł zmienić rozmiaru tekstu. Rozmiar tekstu będzie można zmienić, jeśli umieścisz w nim jednostkę względną, np. em, rem lub ch. Do tego celu idealnie nadaje się funkcja CSS calc().

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

Niech przeglądarka zajmie się liczeniem. Trudno jest dokładnie przewidzieć, jaki będzie tekst o konkretnej szerokości, przy czym wiesz, że rozmiar tekstu powinien się mieścić w odpowiednim zakresie. Przeglądarka odczytuje dokładny rozmiar tekstu.

Jednak obecnie istnieje ryzyko, że tekst stanie się za mały w przypadku wąskich ekranów lub za duży na szerokich ekranach.

Zaciskany tekst

Prawdopodobnie nie chcesz, aby tekst zmniejszał się i zwiększył do skrajnie. Za pomocą funkcji CSS clamp() możesz ustawić początek i koniec skalowania. Spowoduje to „ograniczenie” skalowania do określonego zakresu.

Funkcja clamp() jest podobna do funkcji calc(), ale przyjmuje 3 wartości. Środkowa wartość jest taka sama jak ta, którą przekazujesz do funkcji calc(). Wartość otwierająca określa minimalny rozmiar, w tym przypadku 1rem, aby nie zejść 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 powię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ągać wnioski ze świata druku i stosować je w sieci.

W swojej klasycznej książki The Elements of Typographic Style Robert Bringhurst powiedział o długości wiersza (czyli wskaźnik):

Dowolna długość od 45 do 75 znaków jest powszechnie uznawana za satysfakcjonującą długość wiersza w przypadku strony jednokolumnowej ustawionej w płaszczyźnie szeryfowej w rozmiarze tekstu. Linia 66-znakowa (zawierająca zarówno litery, jak i spacje) jest uważana za idealną. W przypadku pracy z wieloma kolumnami lepiej jest używać średniej od 40 do 50 znaków.

Nie można ustawić długości wiersza bezpośrednio w CSS. Brak właściwości line-length. Możesz jednak zapobiec zbyt szerokiemu zakresowi tekstu, ograniczając szerokość kontenera. Do tego celu idealnie nadaje się właściwość max-inline-size.

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

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

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

Jeśli zastosujesz jednostkę ch do szerokości, nowe wiersze będą zawijać się do 66 znaku w przypadku tego rozmiaru czcionki.

Wysokość wiersza

W CSS nie ma właściwości line-length, ale występuje 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, spojrzenie czytelnika może mieć trudności z przejściem od końca do 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 ustawiona względem font-size.

line-height: 24px;

line-height: 1.5;

Kombinacje i skala

Pamiętaj, aby podczas tworzenia interfejsów użytkownika traktować priorytetowo hierarchię, która pomaga zwiększyć przejrzystość i przepływ strony. Najlepiej wykorzystać do tego skalę typograficzną wbudowaną w system projektowania stron.

Czcionki internetowe

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

Użyj pola @font-face, aby poinformować przeglądarki, gdzie znajdują się Twoje pliki czcionek internetowych. Używaj 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;
}

Jednak każdy dodany plik czcionek internetowych może negatywnie wpłynąć na wygodę użytkowników, ponieważ wydłuży czas wczytywania strony. Pamiętaj, że projekt nie skupia się tylko na wyglądzie pikseli. Szybkość renderowania pikseli ma kluczowe znaczenie dla wygody użytkownika. Szybkość działania strony jest też satysfakcjonująca dla użytkowników.

Wczytuję czcionkę

Możesz poprosić przeglądarki o jak najszybsze rozpoczęcie pobierania pliku czcionek. Dodaj do elementu head dokumentu element link, który odwołuje się do pliku czcionek internetowych. Atrybut rel o wartości preload informuje przeglądarkę, że ma traktować ten plik priorytetowo. Atrybut as o wartości font informuje przeglądarkę, jakiego rodzaju jest to plik. Atrybut type pozwala podać jeszcze bardziej szczegółowe informacje.

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

Musisz dodać atrybut crossorigin nawet wtedy, gdy samodzielnie hostujesz pliki czcionek.

Użyj właściwości CSS font-display, aby poinformować przeglądarkę, jak ma zarządzać zmianą czcionki systemowej na czcionkę internetową. Możesz zdecydować, że nie będzie wyświetlany, dopóki czcionka internetowa nie zostanie wczytana. Możesz wybrać wyświetlanie czcionki systemowej od razu, a po jej wczytaniu przełączyć się na czcionkę internetową. Obie strategie mają swoje wady. Jeśli przed wyświetleniem tekstu użytkownik czeka na pobranie czcionki internetowej, może się zdarzyć, że użytkownicy wpatrują się w pustą stronę przez dłuższy czas. Jeśli najpierw wyświetlisz tekst z czcionką systemową, a potem wybierzesz czcionkę internetową, treść strony może się bardzo zmieniać.

Dobrym pomysłem jest odczekanie chwili przed rozpoczęciem wyświetlania tekstu. Jeśli czcionka internetowa załaduje się przed upływem tego czasu, tekst będzie wyświetlany z użyciem czcionki internetowej bez przesunięcia jej treści. Jeśli czcionka internetowa nadal nie załaduje się po upływie tego czasu, tekst zostanie wyświetlony z użyciem czcionki systemowej, aby użytkownik mógł odczytać treść.

Jeśli chcesz, aby czcionka internetowa zastępowała systemową czcionkę przy każdym jej wczytaniu, użyj wartości swap w polu font-display.

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

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

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

Czcionki zmiennych

Jeśli użyjesz wielu różnych grubości lub stylów tego samego kroju, możesz otrzymać wiele oddzielnych plików czcionek – osobnego pliku dla każdej grubości lub stylu.

Czcionki zmiennych rozwiązują ten problem dzięki użyciu jednego pliku. Zamiast osobnych plików ze zwykłymi, pogrubionymi, pogrubionymi elementami itd., plik czcionki ze zmiennymi odpowiada elastyczności. Zawiera wszystkie informacje potrzebne do wyświetlenia, niezależnie od wag lub stylów.

Oznacza to, że pojedynczy plik czcionek ze zmienną jest większy niż pojedynczy plik czcionek ze zmienną, ale pojedynczy plik czcionek ze zmienną będzie prawdopodobnie mniejszy niż wiele zwykłych plików czcionek. Jeśli używasz wielu różnych wag, zmienna czcionki może znacznie zwiększyć skuteczność.

Dobra typografia w internecie nie ogranicza się tylko do tego, co wybierasz jako projektant. Elastyczna typografia wiąże się również z poszanowaniem urządzenia użytkownika i połączenia sieciowego. Efektem końcowym jest projekt, który wygląda dobrze bez względu na to, z jakiego powodu zostanie wyświetlony.

Skoro wiesz już wszystko o elastycznym tekście reklamy, czas przejść do elastycznych obrazów.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o typografii