Gdyby istniało coś takiego jak słownik Web Developera, prawdopodobnie znalazłbyś słowo typografia zdefiniowana jako ” zmora twojego istnienia.”To naprawdę głupie. Jak coś tak małego i pozornie niewinnego jak czcionka mogło spowodować tyle zamieszania w projektowaniu stron internetowych?

Wybór czcionek, podobnie jak Wszystko inne w projektowaniu stron internetowych, ma znaczący wpływ na ogólny odbiór strony internetowej. Ton. Równowaga. Flow. To tylko niektóre ze sposobów, w jaki zły wybór czcionki może mieć negatywny wpływ na Twoją stronę i rzucić wszystko inne w nieładzie.

Jeśli masz dość polegania na domyślnych wyborach czcionek z motywów WordPress i chcesz skuteczniej projektować z typografia, Czytaj dalej, aby uzyskać wskazówki i narzędzia, które pozwolą ci to zrobić.

A great example of typography done right, courtesy of gearoid.io
Świetny przykład typografii zrobionej dobrze, dzięki uprzejmości gearoid.io

Twój przewodnik po efektywniejszym wykorzystaniu czcionek w projektowaniu stron internetowych

Zacznijmy od zajęcia się oczywistością: jest za dużo czcionek. Wydaje się, że bardziej wydajne byłoby użycie jednej z domyślnych czcionek systemowych, prawda? Chociaż byłoby to zdecydowanie łatwiejsze, najprawdopodobniej nie byłoby bardziej skuteczne-i wyjaśnię dlaczego.

Słowa zapisane na stronie internetowej są (cyfrowym) głosem firmy lub osoby.

  • Polegaj na czcionce, która wygląda jak każda inna, a Twoja strona zgubi się w przetasowaniu.
  • Użyj domyślnej czcionki bez zastanowienia się nad nią, a ludzie przejrzą ją.
  • Wybierz niewłaściwy kolor, a odpowiednie i wnikliwe wiadomości mogą być zbyt trudne do odczytania.
  • Wybierz czcionkę, która oznacza zabawny, beztroski styl życia, a ludzie mogą nie traktować poważnie twojego biznesu.

Wybór czcionki jest bardzo ważny. A ponieważ istnieją tysiące opcji typografii do przesiania, łatwo czuć się przytłoczonym. Zapewniam cię jednak, że gdy zrozumiesz wiadomość na swojej stronie, lepiej będziesz w stanie odpowiedzieć na kilka kluczowych pytań, które zawężą te wybory.

Zanim zaczniesz kształtować i wzmacniać cyfrową tożsamość swojej witryny za pomocą typografii, pamiętaj, że nie chodzi o znalezienie jednej czcionki do korzystania z całej witryny. Zapoznając się z poniższymi wskazówkami i narzędziami, zastanów się nad różnymi rodzajami tekstu-i celami-które wykorzystasz w swojej witrynie, takimi jak:

  • Hero image text
  • Nagłówki
  • Pod-nagłówki
  • Treść strony wewnętrznej
  • Typografia funkcjonalna (jak w przypadku CTA)
  • Typ Logo
  • Tekst nawigacji
  • Tekst hiperłącza
  • Tekst formularza

Jak widzisz, wybory, których dokonujesz w typografii, mają daleko idące efekty, więc ważne jest, aby podejmować te decyzje pojedynczo. Gotowy?

Wskazówki dotyczące zawężania wyboru czcionek

Każda z poniższych wskazówek dostarczy Ci wskazówek na temat dokonywania lepszych, bardziej skutecznych wyborów w typografii.

Wskazówka 1: Współmieszaj czcionki

Jeśli używasz różnych czcionek w swojej witrynie, zastanów się, jak będą ze sobą współpracować. Chociaż zbyt duży kontrast może nie działać, chcesz trochę napięcia, aby różnice między typami tekstu były wystarczająco uderzające, aby przyciągnąć uwagę. Rozważ parowanie czcionek, które zachowują równowagę. Powinny być kompatybilne, ale nie pasujące. Uderzające, ale nie odpychające.Oto niektóre z

Oto niektóre z typowych propozycji parowania:

  • Serif + sans serif
  • Odręcznie + skrypt
  • Cienka czcionka + ciężka czcionka
Typewolf is a fantastic resource for typgoraphy inspiration and resources.
Typewolf jest fantastycznym źródłem inspiracji i zasobów typgorafii.

Typewolf to mój ulubiony zasób par czcionek i inspiracji projektowych. Mógłbym spędzać godziny przeglądając tę stronę!

Wskazówka 2: nie przesadzaj

Po wykonaniu tego ćwiczenia może się okazać, że masz solidną listę 10 lub więcej czcionek, które będą dobrze działać na twojej stronie. Ale pamiętaj, że zbyt wiele czegokolwiek, zwłaszcza w projektowaniu stron internetowych, może skończyć się źle dla doświadczenia użytkownika.

Ogranicz swoje ostateczne typy czcionek do minimum. Wybierz dwie lub trzy różne czcionki, a następnie polegaj na różnych stylach, aby nadać różnorodność różnym typom tekstu w witrynie.

Wskazówka 3: Dopasuj Swój Styl

Wybór czcionki, choć ważny, prawdopodobnie będzie jednym z ostatnich, które wykonasz podczas projektowania strony internetowej. Po utworzeniu estetyki witryny za pomocą kolorów, obrazów i białych spacji musisz znaleźć czcionki odzwierciedlające tę samą stylizację.

Jeśli jeszcze tego nie robisz, stwórz obszerny, jednostronicowy przewodnik po stylu, który opisuje wszystkie wybory związane z brandingiem. Pomoże Ci to lepiej wyobrazić sobie, jaką historię opowiedzą twoje wybory projektowe o osobowości Twojej marki.

Wordpress.org features a style guide that sets out how the WordPress logo should look, as well as the colors and font used.
WordPress.org zawiera przewodnik po stylach, który określa, jak powinno wyglądać logo WordPress, a także używane kolory i czcionki.

Wskazówka 4: Dopasuj Swój Głos

Styl i głos różnią się nieznacznie, jeśli chodzi o design. Styl to nadrzędna tożsamość. Dlatego Kancelaria prawdopodobnie unikałaby używania kursywnych czcionek na swojej stronie internetowej. Głos jednak bardziej dotyczy tonu Twojej wiadomości.

Czy twój głos brzmi prosto, bezsensownie? Czy może nadaje się do większego, śmielszego frazowania? Każda czcionka ma wbudowany ton, więc musisz upewnić się, że pasuje do twojego.

Wskazówka 5: Traktuj Czcionki Na Stronie Głównej Jak Obrazy

Dzięki minimalizmowi i stylizacji paralaksy Strony domowe nie składają się już z obszernych akapitów tekstu.

Zwięźle. Śmiałe. Atrakcyjna.

A List Apart's home page logo features text displayed in an unusual way.
Logo strony głównej List Apart zawiera tekst wyświetlany w nietypowy sposób.

Tego wszyscy oczekujemy od kopii strony głównej w dzisiejszych czasach. I z tego powodu możemy teraz mieć więcej zabawy ze stylizacją tekstu strony głównej. Nie oznacza to, że powyższe wskazówki powinny być ignorowane, ale oznacza to, że możesz użyć większej typografii, stylizowanej typografii i typografii na tyle silnej, aby dodać głębi do zwykłej, otwartej przestrzeni.

Wskazówka 6: spraw, aby Rozmiar miał znaczenie

Rozmiar czcionki ma znaczenie nie tylko dla czytelności, ale także dla ustalenia hierarchii. Standardowe zalecenie dotyczące najmniejszego akceptowalnego rozmiaru czcionki (Zwykle spotykanego w tekście głównym) wynosi 16 pikseli. Jeśli masz czcionkę z ciasnym kerningiem lub cieńszą w stylu, rozważ rozpoczęcie od większego piksela. Następnie należy wzmocnić rozmiary typu Nagłówka, używając tego rozmiaru bazowego do odniesienia.

Ważne jest również, aby pamiętać, jak rozmiar czcionki wpływa na długość linii na każdej stronie (co może wpływać na czytelność). Idealnie, wybór czcionki powinien skutkować od 45 do 75 znaków w każdej linii.

Wskazówka 7: Bądź kreatywny, ale nie zbyt kreatywny

Projektowanie stron internetowych jest zawsze ćwiczeniem kontroli, prawda? Masz jeden pomysł w głowie, trochę szalejesz w układaniu go (bo wszystko wygląda tak fajnie!), a potem trzeba to opanować. Proponuję zrobić to samo z czcionkami. Możesz być kreatywny w wyborze pierwszej partii czcionek. Następnie, gdy przychodzi czas, aby je zawęzić, znajdź miłą mieszankę między konserwatywnym i kreatywnym.

Wskazówki dotyczące używania czcionek w projektowaniu stron internetowych

Każda z poniższych wskazówek dostarczy Ci wskazówek, jak najlepiej wykorzystać typografię w projekcie witryny.

Wskazówka 8: Spraw, Aby Typografia Była Responsywna

Jeśli chodzi o projektowanie responsywne, należy pamiętać o wielu czynnikach związanych z typografią:

  • Minimalny rozmiar czcionki (nie mniej niż 16 pikseli)
  • Kerning
  • Prowadzenie
  • Wyściółka wokół strony i sekcji
  • Liczba czcionek użytych w danej przestrzeni
  • Liczba rozmiarów czcionek użytych w danej przestrzeni

Nie musisz szukać czcionek “responsywnych”. Ważne jest, aby projektować swoją witrynę z myślą o czytelności między platformami. Jeśli chcesz dowiedzieć się, jak skonfigurować CSS do płynnej typografii lub responsywnych ustawień typografii, Smashing Magazine ma kilka samouczków, które warto sprawdzić.

Wskazówka 9: rozważ Kolor

Kolor jest tak samo ważny dla typografii, jak we wszystkim innym w projektowaniu stron internetowych. Decydując się na kolory do wykorzystania w projekcie, pomyśl o następujących kwestiach:

  • Kolory czcionek powinny być zgodne z paletą kolorów.
  • Jeśli spojrzysz na ten próbnik palety materiałów, zobaczysz, że ich zalecenia zawsze zawierają kolor tekstu. Kolory te zawsze będą odcieniem czerni dla łatwiejszej czytelności.
  • Używaj kolorów konsekwentnie w całej witrynie. Jeśli jedno hiperłącze jest jasnoniebieskie, wszystkie powinny być jasnoniebieskie. Pomaga to odwiedzającym łatwiej poznać wskazówki wizualne.
  • Nie bój się używać kontrastujących kolorów między czcionkami,a także kontrastować z innymi kolorami używanymi na stronie. To pomoże utrzymać uwagę odwiedzających lepiej.
  • Użyj koloru, aby zademonstrować relacje, utworzyć hierarchię lub zwrócić uwagę na najważniejsze wiadomości.
  • Ciemniejsze, odważniejsze kolory powinny być używane do tekstu nagłówka, ponieważ te kolory naturalnie przyciągają wzrok.
  • Lżejszy tekst może być użyty w ciele, ale nadal powinien być wystarczająco ciężki,aby czytać na tle.
  • Unikaj umieszczania tekstu nad zajętymi obrazami, nawet jeśli część” zajęty ” znajduje się wokół tekstu. Jeśli nie masz pewności, że czytelność nie zostanie zakłócona na mniejszych ekranach, zawsze bezpieczniej jest trzymać się z dala od projektowania tekstu na obrazie.
Pick your favourite two colors and Material Palette provides suggestions for matching colors and primary text.
Wybierz swoje ulubione dwa kolory i paleta materiałów zawiera sugestie dotyczące pasujących kolorów i podstawowego tekstu.

Wskazówka 10: popraw skanowanie i czytelność

Według ostatnich badań na temat ruchów gałek ocznych i zachowań czytania w Internecie, tylko około 20% strony internetowej zostaje przeczytane. Więc zamiast mieć nadzieję, że odwiedzający nie są normą, przygotuj się na najgorsze i popraw skanowanie swojej kopii za pomocą <ahref=”https://wpmudev.com/blog/wordpress-tags” target=”_blank” >znaczniki nagłówka (h2, h3, H4, itd.) Dla pod-nagłówków. Używając pogrubionych czcionek w tych nagłówkach, ułatwisz odwiedzającym przechodzenie do sekcji, które chcą przeczytać.

Zasoby pozwalające skuteczniej wyszukiwać i używać czcionek

Do tej pory powinieneś mieć dobry pomysł na rodzaj czcionek, które będą dla ciebie najlepsze. Następnym krokiem jest zidentyfikowanie tych czcionek, a następnie umieszczenie ich w projekcie witryny. Oto kilka narzędzi na początek:

  • Łatwa wtyczka Google Fonts

    Google ma obecnie ponad 800 czcionek dostępnych do użytku. Chociaż możesz przejść do ich strony internetowej i przesiać tam wybory czcionek, sugeruję zamiast tego użyć wtyczki Easy Google Fonts. To daje możliwość testowania różnych czcionek Google w czasie rzeczywistym na swojej stronie internetowej i daje pomysł, jak będą wyglądać wraz z projektem.

    Zainteresowany Wtyczką easy Google Fonts?

    Szczegóły
  • Czcionka Squirrel

    Jeśli chcesz poświęcić trochę czasu na rozglądanie się za odpowiednimi czcionkami na swojej stronie internetowej, polecam zacząć od Font Squirrel. Mogą nie mieć tak wielu czcionek, jak niektórzy inni dostawcy darmowych czcionek, ale ich oferty wydają się być bardziej fachowo zarządzane. Rozróżniają czcionki na podstawie typów, które mają największe znaczenie dla projektantów (np. serif vs. sans serif), więc zacznij tutaj, jeśli chcesz znaleźć czcionki bardziej wydajnie.

    Zainteresowany font Squirrel?

    Szczegóły
  • FontStruct

    Dla niektórych z was wizja czcionek witryny może nie być zgodna z tym, co jest łatwo dostępne online. Być może wolisz utworzyć niestandardową czcionkę, której nikt inny nie ma. Jeśli tak jest, możesz użyć bezpłatnego narzędzia do tworzenia czcionek FontStruct.

    Zainteresowany FontStruct?

    Szczegóły
  • Font Matcherator

    Załóżmy, że masz zdjęcie lub zdjęcie zawierające fajnie wyglądający tekst i naprawdę chcesz wiedzieć, jakiej czcionki użyto. Chociaż istnieje oprogramowanie do projektowania, które może pomóc zidentyfikować tę czcionkę, zamiast tego użyj narzędzia font Matcherator. Po prostu prześlij obraz zawierający tekst i pozwól narzędziu znaleźć najbliższą dopasowaną czcionkę.

    Zainteresowany Font Matcherator?

    Szczegóły
  • Kombinacje Czcionek

    Jestem wielkim fanem wszystkiego, co Canva robi. Większość ich narzędzi do projektowania jest darmowa i wykonali świetną robotę obejmując wszystkie Twoje bazy. Nic więc dziwnego, że wymyślili to pomocne narzędzie do parowania czcionek “typografia stała się łatwa”. Jest to dobre w użyciu, jeśli znalazłeś jedną czcionkę, która działa dobrze dla Twojej witryny, ale nie wiesz, co sparować z nią. Działa to również, jeśli chcesz tylko sprawdzić kompatybilność czcionek.

    Interesują Cię kombinacje czcionek?

    Szczegóły
  • Użyj dowolnej wtyczki czcionki

    Po wybraniu czcionek Wtyczka Użyj dowolnej czcionki pomoże Ci załadować te czcionki do systemu i od razu zacząć z nich korzystać. Alternatywną opcją jest dodanie nowych czcionek do witryny WordPress za pomocą CSS.

    Zainteresowany użyciem wtyczki czcionki?

    Szczegóły

Wrapping Up

Więc co to za wielka lekcja? Nie musisz czuć się zastraszony tysiącami czcionek dostępnych w Internecie. Korzystając z najlepszych praktyk i odpowiednich narzędzi, o wiele łatwiej będzie znaleźć idealne czcionki i używać ich w sposób, który zaimponuje odwiedzającym.

Do Ciebie: daj nam znać w komentarzach poniżej o czasie, w którym nowy wybór czcionki wpłynął na Twoją stronę (negatywnie lub pozytywnie).

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…