Odpowiednia czcionka sprawi, że Twoja strona będzie nie tylko ciekawsza wizualnie. Czcionki mają decydujący wpływ na to, czy fragmenty tekstu są ignorowane czy czytane. W tym poście pokażę Ci, jak znaleźć idealną czcionkę dla Twojej strony!

Dobra typografia jest wynikiem wielu lat studiowania czcionek i projektowania. Jednak kilka podstawowych wskazówek może pomóc ci odpowiednio wyćwiczyć oko i użyć właściwej czcionki do twojego projektu internetowego.

Pierwsza strona ...

Lub: Co się stanie, gdy załadujesz stronę bez CSS. W przeszłości strony internetowe były renderowane w czcionkach, które były wbudowane w system operacyjny. Są one ładowane do dziś, jeśli czcionka nie jest dostępna. Pierwsza strona internetowa jest dostępna w sieci do dziś i wygląda dokładnie tak samo, jak w grudniu 1990 roku, kiedy została uruchomiona:

Sposób wyświetlania strony internetowej w przeglądarce nie zależy od strony internetowej, ale od systemu operacyjnego, z którego korzystasz. Oraz o tym, czy dokonano zmian w ustawieniach domyślnych.

W przypadku użytkowników systemu Windows czcionki szeryfowe są domyślnie wyświetlane w formacie Times New Roman. W systemie Mac OS X domyślną czcionką jest Times lub Times Roman. Arial jest używany przez Windows jako czcionka Sans Serif. Mac OS X używa Helvetica jako czcionki domyślnej.

Zach Leatherman przygotował projekt, w którym przetestował różne systemy operacyjne i odpowiadające im czcionki. Narzędzie Font Family daje Ci interesujący wgląd w czcionki awaryjne - i to, jak one ostatecznie wyglądają.  

Georgia i Verdana

W połowie lat dziewięćdziesiątych do standardowych czcionek dołączyły Georgia i Verdana, zaprojektowane przez Matthew Cartera specjalnie dla sieci. Budowanie dobrych stron internetowych przy pomocy skromnego wyboru pięciu czcionek dało początek wątpliwemu nawykowi z konieczności: W ten sposób czcionki, które zwykle nie istniały w sieci, zostały włączone jako pliki graficzne.

Wady tego rozwiązania są oczywiste:

• Odpowiednia reprezentacja na różnych urządzeniach może przerodzić się w żmudną pracę nad szczegółami.
• Słów tych nie można znaleźć ani przetłumaczyć za pomocą funkcji wyszukiwania
• Ponadto każda zmiana tekstu wiąże się z ogromnymi dodatkowymi wydatkami.

Projektowanie dla nieznanego

Na szczęście w międzyczasie technologia ta znacznie się rozwinęła. Mimo wszystko, niezbędna jest tu również podstawowa wiedza z zakresu techniki. Ponieważ ważne jest, aby zrozumieć, co dzieje się na twojej stronie internetowej, gdy żądana czcionka nie jest dostępna. Może to mieć różne przyczyny. Na przykład, złe połączenie internetowe, które prowadzi do opóźnienia w ładowaniu pliku CSS.

W przeciwieństwie do projektowania graficznego, w sieci, zła (nieodpowiednia) czcionka jest lepsza niż jej brak.

Więc podczas gdy ty zmagasz się z tym, która czcionka najlepiej wesprze twoją stronę wizualnie, są też podstawowe pytania techniczne, które należy zadać:

• Czy Twój tekst będzie wyświetlany nawet jeśli plik CSS nie jest załadowany? 
• Czy twoja strona jest nadal czytelna przy użyciu standardowej czcionki Serif i Sans Serif? 
• Czy dostarczacie alternatywną czcionkę? Jak jest wyświetlany? Czy możesz wprowadzić jakieś inne ustawienia, które dadzą Ci większą kontrolę nad czcionkami awaryjnymi?

Przede wszystkim ważne jest, aby treść była w ogóle wyświetlana. Ogólna czytelność jest najważniejsza przy wyborze literówki. 

Interesujące podstawy na temat FOUT vs. FOIT (kiedy czcionka jest załadowana) są podane przez Robina Rendle w jego artykule Loading Web Fonts with the Web Font Loader.

Więcej informacji na ten temat można znaleźć tutaj:

• https://www.filamentgroup.com/lab/font-events.html
• https://css-tricks.com/almanac/properties/f/font-size-adjust/

Skąd pochodzi Twoja czcionka?

Po zapoznaniu się z podstawami technicznymi i czcionkami awaryjnymi pozostaje jeszcze jeden bardzo ważny aspekt. Mianowicie, skąd jest ładowana czcionka. Jak już wspomniano, każdy system operacyjny ma swoje standardowe czcionki. Ponadto każdy użytkownik może zainstalować czcionki na swoim komputerze. Dlatego nie można wiedzieć, które czcionki są dostępne - lub nie. 

Aby nie musieć wyświetlać naszych stron tylko w Arialu i Times New Roman, coraz częściej korzystamy z internetowych serwisów czcionek. Zaleta jest oczywista: omija się ograniczenia, które mamy przy użyciu standardowych czcionek. Zwiększony został wybór dostępnych czcionek.

Prawdopodobnie najbardziej znane są tutaj Google Fonts (darmowe) i Adobe Fonts (płatne). Istnieją jednak inni dostawcy. Ponieważ szczególnie w Niemczech surowsze wytyczne dotyczące ochrony danych osobowych prowadzą do tego, że coraz częściej poszukuje się alternatywy dla Google. Istnieją nie tylko czcionki do osadzenia, ale także platformy, które hostują czcionki dla Ciebie, tak że nie ma żadnych ograniczeń dla Twojej kreatywności. Oczywiście warunkiem wstępnym jest posiadanie praw lub licencji.

Smashing Magazine wypróbował różnych dostawców i zebrał swoje doświadczenia tutaj.

Elementy projektu czcionek

Aby zdecydować się na odpowiedni font, należy znać kilka cech typografii. Tutaj można w zasadzie powiedzieć, że akapity powinny składać się z czcionek, które są łatwe do odczytania. Jeśli stanie się to zbyt męczące, odwiedzający przestanie czytać Twoją stronę. Informacje, które przedstawiasz, nie zostaną skonsumowane. 

Kolejnym aspektem jest zwrócenie uwagi na to, jak zmienia się czcionka po zmniejszeniu jej rozmiaru. Czcionka, która jest czytelna na komputerze stacjonarnym, może być trudna do odczytania w mniejszym formacie na telefonie komórkowym. 

Istnieją wskaźniki, na które możesz zwrócić uwagę, które pomogą Ci wybrać odpowiednią czcionkę.

x-wysokość

W poniższym przykładzie widać trzy różne przykłady. Wysokość x opisuje pionową wysokość litery x. Jeśli jest zbyt mała, tekst staje się trudniej dostępny, szczególnie przy mniejszych rozmiarach czcionki. Jeśli wysokość x jest zbyt duża, rozróżnienie wielkich i małych liter staje się trudniejsze.

Apertury

Apertury to otwory, które znajdujemy w literach. Ogólnie rzecz biorąc, im bardziej są one obfite, tym przyjemniej czyta się długie fragmenty tekstu przy użyciu tego kroju pisma.

Odstępy między literami i Kerning

Podczas gdy odstępy między literami opisują ogólną odległość między nimi, kerning rozumiemy jako odległość między niektórymi literami. Odstępy te mogą być większe niż między innymi ze względu na naturalny kształt liter:

Równomierne odstępy sprawiają, że czcionka wygląda bardziej harmonijnie. Dzięki temu jest bardziej czytelny. Przy okazji, obie mogą być dostosowane za pomocą CSS, jeśli masz wrażenie, że czcionka, którą wybrałeś wciąż wymaga poprawy:

.kerning {font-kerning: normal;}

.spacing {letter-spacing: 0.1em;}

Terminale, Wejścia i Zejścia

Terminale występują w literach a, ä, c, f, j, r oraz y:

Ascendery i descendery są podobne, ale oznaczają przedłużenia, na przykład, f, q, i j:

Obowiązuje dla nich następująca zasada: im bardziej są niepozorne, tym mniej nadają się do stosowania z tekstami wymawianymi. Czcionki szeryfowe, w szczególności, są szczególnie dobrze zdefiniowane w terminalach, indeksach górnych i dolnych, dlatego te czcionki były długo uważane za bezpieczny kompromis dla dłuższych fragmentów tekstu.

Kontrast

Czcionki o dużym kontraście (lewe) są mniej odpowiednie dla małych rozmiarów czcionek, takich jak te używane w akapitach, i lepiej nadają się do nagłówków.

Pogrubienie i kursywa

Wybierając czcionki, należy upewnić się, że są one dostępne w różnych wagach i stylach. Dzieje się tak dlatego, że style czcionek, które nie są dostępne, mogą być podrabiane przez przeglądarkę i mogą wyglądać tak:

(W każdym przypadku po prawej stronie styl czcionki "podrabiany" przez przeglądarkę)

Na podstawie tych kryteriów możesz teraz szukać czcionki dla swojej witryny. Ponieważ wybór tej czcionki jest zwykle bardziej skomplikowany i jest więcej do rozważenia, polecam zacząć od wyboru czcionki nagłówka na podstawie czcionki korpusu (a nie na odwrót).

Bardziej szczegółowy przegląd i dalsze wyjaśnienia terminów można znaleźć tutaj: https://www.shillingtoneducation.com/blog/what-is-typography/.

Serif, Sans Serif i Monospace

Istnieje szeroki zakres kategorii dla czcionek. Trzy najczęstsze z nich to prawdopodobnie

• Serif, na przykład Times New Roman
• Sans Serif, na przykład Arial
• Monospace, na przykład Source Code

Jeśli chodzi o kombinacje czcionek, istnieją dwie proste procedury, których można przestrzegać. Nie jest to konieczność, a jedynie wskazówki, które mogą Ci pomóc. Szczególnie jeśli nie masz dużego doświadczenia w łączeniu czcionek:

1. Użyj tej samej czcionki do tekstu głównego i nagłówków - ale zmień wagę, odstępy między literami i rozmiar, na przykład Lato:

2. Połącz czcionkę Serif i Sans Serif, na przykład Baskerville i Open Sans:

Istnieje również narzędzie internetowe, które pomaga szybko odkryć i wypróbować różne kombinacje czcionek: https://fontjoy.com/#.

Wnioski dotyczące typografii w sieci

Innym ważnym tematem, który całkowicie pominąłem, jest użycie kolorów. W zależności od tego, czy czcionka znajduje się na jasnym czy ciemnym tle, będzie naturalnie wyglądać inaczej. Ponadto można tworzyć odmiany czcionek, biorąc tę samą czcionkę i nie tylko wyświetlając ją w różnych wagach, ale także w różnych kolorach. Wybierając kolor, pamiętaj o przewodniku stylu i brandingu swojej marki.

Oprócz analizowania innych stron internetowych, warto również przyjrzeć się aktualnym trendom w poszukiwaniu inspiracji. Szybko zauważycie, że pewne pary czcionek zawsze się tu powtarzają i że niewiele jest tu nowego. Jednakże, w zależności od projektu i wymagań, może okazać się, że konieczne będzie sięgnięcie po to, co znane, a nie szczególnie innowacyjne - więcej szczegółów znajdziesz w tym artykule.

Inne źródła informacji na ten temat

• Więcej na temat teorii koloru: https://rb001.dev.360vier.net/blog/webdesign-development/web-design-principles/
• Wszystko o profesjonalnej typografii internetowej: https://prowebtype.com/
• Czcionki zmienne dla projektowania responsywnego: https://alistapart.com/blog/post/variable-fonts-for-responsive-design/