Wszystko o typografii i czcionkach w webdesignie cz. 1

Czcionki na stronach internetowych

Projektowanie stron internetowych to przede wszystkim typografia i dobór czcionek. Nawet najpiękniejsza grafika i zdjęcia nie zrobią z Twojej strony www arcydzieła, jeśli Twoja typografia to kulfony bez ładu i składu. Idealne dopasowanie fontów, rozmiarów, letter spacing’u czy odstępów między tekstem wymaga dużego doświadczenia i wielu prób. Wiedza na temat typografii jest użyteczna zwłaszcza teraz, kiedy odchodzi się od ozdobników na rzecz operowania kolorem i fontem. Dlatego warto dokształcić się w materii typografii, a lektura tego wpisu może CI w tym pomóc.

Czcionki szeryfowe i bezszeryfowe

Podstawowym podziałem fontów jest podział na czcionki szeryfowe i bezszeryfowe.

Czcionki szeryfowe (Serif) posiadają ozdobniki, dekoracje czyli tzw. szeryfy, różnego rodzaju ogonki które mają zwiększyć atrakcyjność wizualną tekstu. Pismo szeryfowe wywodzi się od kutych w kamieniu napisów starożytnego Rzymu i dzisiaj spotykane jest głównie w publikacjach drukowanych, książkach, zaproszeniach itp. Najpopularniejszym przykładem czcionki szeryfowej jest Times New Roman. Inne to np. Georgia , Clarendon, Garamond, Palatino.

Czcionki bezszeryfowe (Sans Serif) są pozbawione ozdobników, a co za tym idzie ich czytelność jest lepsza, zwłaszcza jeśli chodzi o grafikę komputerową. Ze względu na niewielką rozdzielczość ekranu trudno dokładnie oddać wygląd szeryfów. Najpopularniejsze czcionki bezszeryfowe to Arial, Helvetica, Tahoma, Roboto.

Większość web designerów używa czcionek bezszeryfowych, jednak oba style można łączyć. Nie jest to proste zadanie zwłaszcza dla początkujących. Z pomocą przychodzi strona internetowa fontpair.co gdzie możemy znaleźć dziesiątki przykładów dobrych kombinacji fontów. Doskonałe narzędzie, które nauczy Cię jak dobierać czcionki, a pod każdym przykładem jest link z którego możemy od razu pobrać oba fonty. Bardzo wygodne rozwiązanie.

Skąd brać czcionki?

Na komputerach mamy zainstalowany podstawowy zbiór czcionek, a w nim takie fonty jak Times New Roman, Arial czy wyśmiewany przez wielu Comic Sans. Są to tak zwane czcionki systemowe. Jeśli jednak potrzebujemy czegoś mniej popularnego, trzeba się zaopatrzyć w nowe czcionki. Polecam do tego 3 strony:

Google Fonts

Setki czcionek, filtrowanie wg określonych parametrów, instrukcja jak zainstalować czcionkę na swojej stronie WWW. Darmowe czcionki z polskimi znakami takie jak Lato, Open Sans czy Roboto, po najbardziej wymyślne dla amatorów Gimpa… Pobrane czcionki zainstaluj w systemie, a będziesz mógł ich używać w Wordzie, Photoshopie czy innych programach. Jeśli potrzebujesz czcionki, Google Fonts to witryna, którą musisz odwiedzić.

FontSquirrel

Potężny zbiór darmowych czcionek możemy znaleźć na FontSquirrel. Czcionki są tam inteligentnie uporządkowane wg kategorii. Poszukujesz fontów przypominających pismo odręczne? Po prostu wybierz kategorię i masz ponad 60 takich czcionek. Są tam też np. czcionki gotyckie, albo w stylu retro. Polecam przejrzeć bogate zbiory wiewiórki.

dafont.com

Prawie 30 tysięcy czcionek do pobrania. Dużo ozdobnych, ciekawych fontów wysokiej jakości. Wybierzesz tutaj czcionkę pasującą do stylu każdej strony internetowej. Możliwość sortowania wg popularności. Polskie znaki i hebrajskie szlaczki.

Która czcionka będzie odpowiednia?

Wybór fontów jest ogromny. Najłatwiej zacząć od „bezpiecznych” czcionek, które sprawdzają się w większości zastosowań. „Żadnych udziwnień” to dobra zasada na początek. Do używanych ostatnio fontów z polskimi znakami należą np. Roboto, Lato, Open Sans. Są czytelne i nadadzą profesjonalny wygląd Twojej stronie internetowej. Na dodatek są darmowe. Można też przyjąć zasadę, że dwa różne fonty na stronie to maksimum. Większa ilość wprowadza chaos, a strona zwykle traci na czytelności i jest trudniejsza w odbiorze. Przyjrzyj się stronom WWW, które odwiedzasz i zobacz jakich krojów i wielkości czcionek używają. To najlepsze sposób na naukę typografii. Najlepsze przykłady użycia czcionek w webdesignie możesz znaleźć na stronie designmodo.com.

To tyle w tej części. Mam nadzieję, że znajdziecie tu kilka przydatnych informacji. Następna już niedługo.

FacebookTwitterGoogle+WykopDelicious

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *