Typy czcionek
Artykuł stanowi uzupełnienie filmu, który znajduje się na końcu. Film z kolei jest następstwem ostatniego materiału, w którym opisywałem w jaki sposób zbudować nagłówek i stopkę w Elementorze. Potrzebujesz globalnych kolorów i globalnych czcionek w Elementorze, aby Twoja strona była łatwiejsza w tworzeniu i spójna wizualnie. Zatem do rzeczy – porozmawiajmy o czcionkach. Będę używał zamiennie określenia czcionki i fonty (chociaż wiem, że to nieprawidłowe metodologicznie – jeżeli chcesz się dowiedzieć więcej o tym – przejdź do strony Markofani). W największym uproszczeniu możemy podzielić fonty na szeryfowe, bezszeryfowe.
Czcionki szeryfowe
Z angielskiego: „serif”, czyli takie, które mają ozdobniki na zakończeniach. Korzystając z tego typu fontów na swojej stronie, nadasz jej powagi. Jest to często spotykane rozwiązanie na stronach kancelarii prawnych, lekarzy, psychologów. Przykładem mogą być takie fonty, jak: Playfair Display, Baskerville SC, Alegreya i wiele innych.
Czcionki bezszeryfowe
Jak można się domyślić, skoro powyższe fonty zawierały ozdobniki, to „sans serif” nie będą ich zawierały. Stanowią najpopularniejsze rozwiązanie na stronach internetowych i ich zastosowanie jest bardziej wszechstronne. czcionek bezszeryfowych mogą być: Lato, Roboto, Open Sans.
Grubość i wielkość czcionek
Każdy wybrany font możesz zmniejszać i zwiększać, a większość z nich możesz też użyć w wariantach grubszych i chudszych. To powoduje, że przykładowo font Lato jest bardzo wszechstronny, bo zmieniając jego grubość nadajemy zróżnicowanie stronie internetowej. Na stronie internetowej rzadko się wykorzystuje więcej niż 2-3 rodzaje fontów. Natomiast wielokrotnie zmienia się jego grubości i wielkości. Chociażby inna wielkość powinna być dla wyświetlania na dużych ekranach, a inna na smartfonie.
Wybór najlepszego fontu
Nie ma czegoś takiego, jak najlepszy font. Na świecie isnieją tysiące fontów. Wybór tego odpowiedniego jest pochodną własnych upodobań i standardów obowiązujących w Twojej branży. Istnieją oczywiście pewne powtarzalne schematy: fonty, które pojawiają się na wielu stronach, np. Lato, Montserat, Roboto, Open Sans, Playfair Display, Poppins, Oswald, Raleway. Pamiętaj, aby działać zgodnie z zasadami prawa. Każda bowiem czcionka podlega prawom autorskim. Bardzo wiele z nich jest możliwych do wykorzystania za darmo zarówno w projektach komercyjnych, jak i w projektach osobistych. Jeżeli natomiast na trafisz na czcionkę, która wymaga zakupienia – tak powinno się zrobić. Chyba największą bazę darmowych fontów odnajdziesz w Google Fonts. Jeżeli do budowy strony użyjesz Elementora, to on automatycznie pobiera dane z Google Fonts, więc nie musisz nic dodatkowego instalować ani wgrywać na serwer.
Aby sprawdzić, jakie czcionki są używane na innych stronach – wystarczy, że klikniesz prawym przyciskiem myszy na wybranym tekście i z rozwiniętej listy wybierzesz „Zbadaj” (opcja dostępna w Google Chrome i Mozilla Firefox). Otworzysz w ten sposób narzędzie dla deweloperów. W filmie poniżej, dokładnie widać jak to zrobić.
Jak połączyć ze sobą fonty?
Jak już wcześniej wspomniałem, na stronie internetowej wykorzystuje się zwykle 2-3 fonty. Nie każde ich połączenie będzie dobrze wyglądać. Aby zrobić to, jak profesjonalista – przejdź na stronę fontjoy. To bardzo intuicyjne narzędzie pomaga w doborze współgrających ze sobą krojów pisma. Na podglądzie widzisz większy nagłówek, mniejszy nagłówek oraz tekst. Możesz generować kombinacje do woli. A gdy któraś z czcionek Ci odpowiada – blokujesz ją, system będzie generował komplementarne fonty do obecnie wybranych. Dzięki takiemu narzędziu tworzenie stron internetowych jest dużo łatwiejsze. W rzeczywistości możesz wykorzystać tylko to narzędzie – pomijając proces szukania fontów na stronach konkurencji.
Wybór kolorów na stronę
Przy wyborze kolorów znowu proponuję skorzystać z gotowego narzędzia online. Jest nim coolors.co. Do wyboru masz 2 sposoby na odnajdywanie barw. Po pierwsze przechodząc do Palette Generator – klikając spację, otrzymasz 5 różnych kolorów komplementarnych. Gdy którykolwiek z nich przypadnie Ci do gustu, zaznaczasz go kłódką i ponawiasz wyszukiwanie. Powtarzasz proces do momentu, gdy odnzaczysz 4-5 kolorów.
Druga możliwość to skorzystanie z opcji Explore Paletts. W tym miejscu są przygotowane palety kolorystyczne i wystarczy wybrać odpowiednią dla Ciebie. Barwy w internecie są przedstawiane za pomocą 6-cioznakowego kodu rozpoczynając się od hashtagu. Każdy kolor ma przypisany swój unikalny i kod i właśnie ten kod należy skopiować, by przenieść wybrane barwy na stronę internetową.
Globalne kolory i czcionki w Elementorze
Jeżeli budujesz stronę w Elementorze (ta lekcja jest częścią całego kursu na temat samodzielnego tworzenia stron – pierwszą lekcją jest WordPress Elementor jak zainstalować stronę www), to skorzystanie z ustawień globalnych kolorów i globalnych czcionek, przyspieszy Twoją pracę w przyszłości. Gdy przejdziesz do edycji wybranej strony w Elementorze, w lewym górnym rogu kliknij na hamburger menu i zaznacz „ustawienia witryny”. W tym miejscu odnajdziesz zarówno ustawienia globalnych czcionek, jak i ustawienia globalnych kolorów. Później będzie mozna je łatwo wykorzystywać w procesie budowy strony internetowej. Dokładnie cały proces opisuję w poniższym filmie.
Kolory i czionki w Elementorze [FILM]
Wybór fontów i barw to bardzo ważny aspekt wizualny każdej strony internetowej. Polecam przyłożyć się do tego zadania, a strona www zyska na jakości. Przy budowaniu stron w Elementorze zdecydowanie warto ustawić globalne kolory i globalne czcionki. Dlaczego? Wielokrotnie w trakcie tworzenia strony intenetowej zdarzało mi się, że wybrany font albo wybrany kolor jednak do mnie nie przemawiał. Potrzebowałem dokonać zmiany. Dzięki temu, że korzystałem z globalnych kolorów, zmiany barwy dokonywałem w kilka minut w ustawieniach strony. Gdyby nie korzystał z ustawień globalnych, musiałbym ręcznie zmieniać każdą przygotowaną wcześniej podstronę, a to mogłoby zająć nawet kilka godzin.
