Przewodnik po parowaniu czcionek: wybór najlepszych kombinacji czcionek dla Twojej witryny

Opublikowany: 2020-11-02

Jako projektant stron internetowych masz wiele ważnych decyzji do podjęcia dla każdej tworzonej witryny. Palety kolorów, interakcje w interfejsie użytkownika, układ nawigacji, wybór najlepszej czcionki dla Twojej witryny i wiele, wiele więcej.

Jednym z obszarów projektowania stron internetowych, o którym możesz nie spędzać wystarczająco dużo czasu, jest parowanie czcionek.

Wybór jednej świetnie wyglądającej czcionki to jedno. Gdy już dobrze wyczuwasz głos i styl marki, znacznie łatwiej jest zidentyfikować czcionki, które przekazują podobny klimat.

Spis treści

  • Dlaczego potrzebujesz parowania czcionek?​
  • Co wziąć pod uwagę podczas parowania czcionek​
  • 4 zasady parowania czcionek w projektowaniu stron internetowych​
  • Zasada nr 1: używaj nie więcej niż trzech czcionek w swojej witrynie​
  • Zasada nr 2: Zgoda i kontrast są dobre; Konflikt jest zły
  • Zasada nr 3: Nie bój się parowania w obrębie nadrodzin czcionek
  • Zasada nr 4: Upewnij się, że Twoje czcionki mają odpowiedni rozmiar i kształt
  • 30 najlepszych kombinacji czcionek do projektowania stron internetowych​

Dlaczego potrzebujesz parowania czcionek?

Strony internetowe potrzebują więcej niż jednej czcionki — aby ustalić hierarchię, utrzymać zaangażowanie odwiedzających dużą ilością tekstu i podprogowo przekazać odwiedzającym więcej informacji o osobowości i podejściu marki.

Kiedy dodasz tę dodatkową warstwę złożoności do miksu, sprawy mogą się skomplikować. Nie tylko łączysz ze sobą czcionki; łączysz je też z projektem swojej strony internetowej.

Na pewno spotkałeś się z takimi scenariuszami podczas swoich podróży po sieci:

  • Dwie nudne czcionki sprawiają, że długi post na blogu jest bardzo trudny do odczytania, a ty przeglądasz nagłówki, aby zobaczyć, czy możesz w ten sposób ułożyć historię.
  • Zabawna i unikatowa czcionka kursywą wprowadza odwiedzających do firmy, ale zbyt mała i bardzo prosta czcionka treściowa może zaprzeczyć pierwszemu wrażeniu.
  • Serwis twierdzi, że firma przyjmuje młodzieńcze i innowacyjne podejście do biznesu, dlatego czcionki retro wydają się tak nie na miejscu.

Zbyt wiele rzeczy może się nie udać w parowaniu czcionek, jeśli nie poświęcisz czasu na zrozumienie, w jaki sposób czcionki do siebie pasują.

Dowiedz się, jak dodawać niestandardowe czcionki do WordPress

Co wziąć pod uwagę podczas parowania czcionek

W naszym przewodniku po najlepszych czcionkach dla stron internetowych podsumowaliśmy kluczowe cechy, których należy szukać:

1. Czytelność

Jednym z powodów, dla których szeryfy są bardzo preferowane w literaturze i gazetach, jest czytelność. Szeryfy (stopy) na górze i na dole znaków ułatwiają czytelnikom odróżnienie podobnie wyglądających znaków, takich jak wielkie „I” i małe „l”, więc nie ma spowolnienia z powodu problemów ze zrozumieniem.

Jeśli projektujesz stronę zawierającą ponad 600 słów, nie byłoby złym pomysłem użycie szeryfa w tekście głównym właśnie z tego powodu.

To powiedziawszy, jeśli znajdziesz bezszeryfowy z wyraźnymi formami liter (nawet bez szeryfów), nie bój się eksperymentować. Poniżej przedstawiamy kilka przykładów użycia sans serifs zarówno w treści, jak i nagłówku.

2. Czytelność

Jednym z powodów, dla których od dawna uważano, że bezszeryfowe są lepszym wyborem niż szeryfy dla tekstu online, była ich wysoka czytelność. Jednak badania wykazały, że istnieje niewielka różnica w tym, jak szybko i łatwo ludzie mogą czytać teksty szeryfowe i bezszeryfowe — przynajmniej w mniejszych rozmiarach.

Ponieważ rozdzielczości ekranu znacznie się poprawiły na przestrzeni lat, typografowie byli w stanie tworzyć czcionki w obu stylach, które są równie czytelne. Jak wyjaśnia NNG:

„Stara wytyczna dotycząca użyteczności dla typografii online była prosta: trzymaj się krojów bezszeryfowych. Ponieważ ekrany komputerów były zbyt kiepskie, aby poprawnie renderować szeryfy, próba wpisywania szeryfów w rozmiarze tekstu głównego skutkowała rozmytymi kształtami liter”.

Podczas gdy inne typy czcionek – takie jak zbyt dekoracyjne – mogą być zbyt trudne do odczytania poza dużym tekstem nagłówka, projektanci mają wiele opcji w zakresie stylu tekstu na stronie za pomocą szeryfów i bezszeryfów.

To, czego powinieneś być bardziej świadomy, to rozmiar i odstępy między twoimi postaciami, ponieważ ma to wpływ na czytelność i czytelność.

3. Komfort

Niektórzy projektanci stron internetowych niechętnie używają krojów pisma takich jak Helvetica czy Times New Roman z powodu ich nadużywania. Jednak wybór czcionek i ich parowanie nie dotyczą tego, jak myślisz o typografii witryny, ale o tym, jak komfortowo ją czytają odwiedzający.

Tak więc nie ma wstydu, jeśli wybierzesz klasykę, jeśli wykona swoją pracę.

4. Styl

Wybierz typy czcionek i czcionki o stylach, które dobrze pasują do Twojej marki. Na przykład czcionki szeryfowe są bardziej tradycyjne i poważne, w przeciwieństwie do czcionek kursywnych, które wydają się być bardziej dziwaczne i zabawne.

Możesz wiele powiedzieć odwiedzającym o swojej marce, wybierając na początek odpowiednie rodzaje czcionek.

Nie trać z oczu tych zasad, przechodząc do następnego etapu projektowania z typografią: