Typografia internetowa: Jak znaleźć idealną czcionkę dla swojej strony internetowej

7 Min.
doskonała-typografia-stron

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 lat studiów nad czcionkami i projektowaniem. Jednak kilka podstawowych wskazówek może pomóc Ci wyćwiczyć oko odpowiednio i użyć właściwej czcionki dla Twojego projektu internetowego.

Najlepsze praktyki, wskazówki i wytyczne w projektowaniu stron internetowych

Projektowanie stron internetowych to coś więcej niż estetyka. Co najmniej równie ważne są: dobry UX, dostępność i SEO. W tym artykule pokażę Ci najlepsze praktyki dla udanych stron i zadowolonych użytkowników.

Już 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:

Typografia internetowa: Jak znaleźć idealną czcionkę dla swojej strony internetowej
Pierwsza strona internetowa

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 stworzył projekt, w którym testował różne systemy operacyjne i odpowiadające im czcionki. Narzędzie Font Family daje interesujący wgląd w czcionki awaryjne - i 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 standardowego szeryfa i bezszeryfowego? 
  • 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:

Skąd pochodzi Twoja czcionka?

Teraz, gdy masz już do czynienia z technicznym tłem i czcionkami awaryjnymi, jest jeszcze jeden bardzo ważny aspekt. Mianowicie, skąd właściwie jest ładowana czcionka. Jak wspomniano wcześniej, każdy system operacyjny ma swoje własne standardowe czcionki. Ponadto, każdy użytkownik może zainstalować czcionki na swoim komputerze. Nie można więc wiedzieć, które z nich 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 konstrukcyjne 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ę.

Typografia internetowa: Jak znaleźć idealną czcionkę dla swojej strony internetowej
Artykuł: Co to jest typografia?

wysokość x

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.

Typografia internetowa: Jak znaleźć idealną czcionkę dla swojej strony internetowej
Źródło: Professional
Web Typography

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 literami, kerning rozumiemy jako odległość między niektórymi literami. Odstęp ten może być większy niż między innymi ze względu na naturalny kształt liter:

Typografia internetowa: Jak znaleźć idealną czcionkę dla swojej strony internetowej
Artykuł: Typografia w 60 sekund

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;}

Końcówki, wstępniaki i zstępniaki

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

Typografia internetowa: Jak znaleźć idealną czcionkę dla swojej strony internetowej
Źródło: Professional
Web Typography

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

Typografia internetowa: Jak znaleźć idealną czcionkę dla swojej strony internetowej
Źródło: Professional
Web Typography

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.

Typografia internetowa: Jak znaleźć idealną czcionkę dla swojej strony internetowej
Źródło: Professional
Web Typography

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ę)

Typografia internetowa: Jak znaleźć idealną czcionkę dla swojej strony internetowej
Typografia internetowa: Jak znaleźć idealną czcionkę dla swojej strony internetowej
Źródło: Professional
Web Typography

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

  • szeryfowy, na przykład Times New Roman
  • Sans Serif, na przykład Arial
  • Monospace, na przykład kod źródłowy

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:
Typografia internetowa: Jak znaleźć idealną czcionkę dla swojej strony internetowej
Użyj tej samej czcionki dla treści i nagłówków
  1. Połącz czcionkę szeryfową i bezszeryfową, na przykład Baskerville i Open Sans:
Typografia internetowa: Jak znaleźć idealną czcionkę dla swojej strony internetowej
Kombinacja czcionek może wyglądać następująco

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

Wnioski

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

Państwa pytania: Idealna czcionka

Jakie masz pytania dotyczące typografii w sieci? Zapraszamy do skorzystania z funkcji komentarza. Chcesz być informowany o nowych artykułach dotyczących projektowania i tworzenia stron internetowych? Następnie śledź nas na Twitterze, Facebooku lub poprzez nasz newsletter.

Po ukończeniu studiów z zakresu projektowania gier i twórczego pisania w malowniczym Auckland (w Nowej Zelandii) Sonja Hoffman zadecydowała o tym, by dalej rozwijać się jako webdesigner oraz specjalista ds. tworzenia aplikacji i ich rozwoju. Zajmuje się grywalizacją (to wykorzystanie elementów gier i technik projektowania gier w kontekście niezwiązanym z grami) i badaniami nad motywacją i doświadczeniami użytkownika. Łączy swoją profesję z własnym zainteresowaniem nowościami technologicznymi.

Powiązane artykuły

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola obowiązkowe oznaczone są *.