Czcionki dla webdewelopera: gdzie ich szukać i jak z nich korzystać?

Czcionka to jeden z najważniejszych elementów decydujących o użyteczności i estetyce serwisu WWW. Jak dobierać fonty tak, aby internauci byli zadowoleni? Skąd brać wysokiej jakości czcionki do wykorzystania we własnej witrynie? W tym artykule odpowiemy na wszystkie Wasze wątpliwości.

Krój, kolor i rozmiar czcionki to – obok kształtu menu – najważniejsze elementy wpływające na użyteczność strony internetowej. Font powinien być przede wszystkim prosty, a także dopasowany do specyfiki serwisu. To pierwsze zapewnia czytelność, to drugie zwiększa spójność. Specjaliści od usability zalecają wykorzystywanie maksymalnie popularnych czcionek. Dzięki temu webdeweloper ma gwarancję, że jego witryna będzie wyglądała tak samo na każdym komputerze.

Czcionkowa użyteczność

Wśród najpopularniejszych fontów dostarczanych wraz z systemem operacyjnym Windows można wymienić Arial, Arial Black, Courier New, Georgia, Tahoma, Times New Roman, Verdana oraz MS Serif i Sans Serif. Większość stron WWW korzysta z tych czcionek. Dominuje pogląd, że w Internecie – inaczej niż w publikacjach drukowanych – lepiej sprawdzają się kroje bezszeryfowe takie jak Arial czy Verdana.

Podczas badań przeprowadzonych przez psychologów z Uniwersytetu Michigan okazało się, że osoby otrzymujące programy ćwiczeń fizycznych lub przepisy kulinarne napisane nietypową, mało czytelną czcionką uważają zaprezentowane wyzwania za dużo trudniejsze w realizacji. Ludzie tacy sądzili, że ukończenie zadań zajmie im dużo więcej czasu – w porównaniu z ankietowanymi, którzy dostali kartki zadrukowane Arialem.

Nietypowe fonty

Korzystanie z niestandardowych fontów niesie ze sobą więc duże ryzyko. Jeśli użytkownik nie posiada danej czcionki witryna nie będzie wyglądać tak, jak powinna. Gdy webdeweloper rzeczywiście musi zastosować nietypowy krój – na przykład w tytułach lub śródtytułach – musi zdefiniować w kodzie HTML alternatywne fonty. Może również umieścić czcionki do pobrania na stronie – wygląda to jednak nieprofesjonalnie.

Nietypowe kroje wykorzystuje się głównie w graficznych elementach witryny. Jeśli twórca umieszcza przy górnym menu ozdobny baner ze zdjęciem oraz tytułem serwisu może zastosować mało znany font. Grafika zawsze będzie wyglądała tak samo – pod warunkiem, że została prawidłowo osadzona w witrynie. To właśnie tutaj webdeweloper powinien maksymalnie dopasować czcionkę do tematyki strony. Użytkownik traktuje bowiem ten element jak wizytówkę.

«poprzednia 1 2 3 4 ... 6 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

8 skomentuj »

Komentarze

#1 Jacek Smolak^® 2009-09-07 08:21:44 0
Font to nie czcionka, Panie Wojciechu!Definicje fontu i czcionki. Niestety, tekst do poprawy.

Pozdrawiam!
IP: 81.161.199.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2 (.NET CLR 3.5.30729)
#2 comq 2009-09-07 09:03:32 0
Jeżeli chodzi o Linuksa, to zarówno Fontmatrix jak i Opcion są raczej nieużywalne. Polecam http://code.google.com/p/font-manager/
IP: 83.4.120.[...] Mozilla/5.0 (X11; U; Linux i686 (x86_64); en-US; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2
#3 Art 2009-09-08 08:56:08 0
Przydałby się akapit o Web Fonts.
IP: 80.53.218.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.13) Gecko/2009073022 Firefox/3.0.13
#4 pankracy 2009-09-21 11:08:13 0
Co do osadzania nietypowych fontów na stronie polecam przyjrzeć się narzędziu cufon: http://wiki.github.com/sorccu/cufon/about

Proponowane strony w rodzaju "top 100 darmowych czcionek" to przeważnie fonty może i popularne, ale zdecydowanie niskiej jakości, w dodatku często rozprowadzane z pogwałceniem licencji na co nie ma miejsca w zastosowaniach profesjonalnych (na top 10 załapał się Anivers Josa Buivenga, skądinąd dobra darmowa czcionka lecz z pewnymi obostrzeniami http://new.myfonts.com/viewlicense.php?lid=706).

Jeśli ktoś szuka naprawdę porządnych fontów polecam np. http://new.myfonts.com/

Artykuł niestety nieco poniżej zwyczajnego poziomu webhosting.
IP: 83.8.233.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3
#5 projektowanie pod Windowsa 2009-09-21 11:40:45 0
witam, czy ktoś spotkał się z problemem projektowania czcionek pod windowsa? Przeszukałem przy pomocy google'a wiele stron ale temat ten jest bardzo rzadko poruszany. Spotkalem tylko jeden artykuł dot. aplikacji Font Creator. Moje pytanie - czy istnieje możliwość tworzenia ale od początku do końca czcionek w Adobe Illustratorze? Albo jakieś inne ale darmowe rozwiązanie?
IP: 188.33.156.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; pl; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)
#6 foderit 2009-09-29 12:24:58 0
artykuł o niczym. parę linków jak po wpisaniu "free font" w google.

Niech autor powie jak ma zamiar takiego fonta wykorzystać ? mamy czekać na rekomendacje W3C z html5 żeby cokolwiek z tego było przydatne czy jak.

żeby nie było, że tylko narzekam polecam sIFR.

heh, coraz więcej na webhosting powtarzanych informacji które nawet i p.wimmer prawił n-lat temu - aktualne ale jak to się ma dla webdevelopera - pracuję w tym zawodzie i jeszcze nie spotkałem się z tym żebym musiał dobierać kolory, czcionki (co najwyżej z czasem skorygować)
IP: 77.115.5.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.21 Safari/532.0
#7 pp-layouts 2009-11-08 15:52:42 0
Muszę się nie zgodzić z autorem artykułu co do wielkości czcionek, kursywy i innych rzeczy.

Czcionka 10px (nota bene używana w boxie komentarza) może faktycznie jest za mała, ale 11px to najczęściej używany standard dla stron z dużą ilością tekstu. Ważniejsza dla czytelności tekstu jest ilość znaków / wyrazów w jednej linii tekstu. Czyli mniejsza czcionka jest ok, jeśli tylko kolumny tekstu nie są za szerokie. Co do popularnych rozdzielczości - nie wiem wg jakich badań statystycznych wyszedł przytoczony wynik. Widziałem statystyki z kilku serwisów, wynikało z nich, że rozdzielczości poniżej 1024x768 to najmniejszy odsetek, między 1 a 2%. Ale przy niskich rozdzielczościach mniejsza czcionka to korzyść. Łatwiejsze przeglądanie, mniej przewijania, więcej na ekranie. Osoby z wadami wzroku mają dziś dostępne opcje powiększania w praktycznie każdej, nowszej przeglądarce. Testowane na osobie niedowidzącej :) Sprawdza się.

Jeśli chodzi o wygładzanie czcionek, już od Windowsa XP dostępna jest funkcja wygładzania ClearType i powinno się jej używać. Wtedy kursywę da się czytać. Tutaj jednak małe zastrzeżenie - niektóre czcionki mają po prostu źle skonstruowaną kursywę (albo natywnie nie mają osobnych wzorów dla kursywy i jest ona generowana automatycznie) - te czcionki będą wyglądać w kursywie przeważnie źle. Polecam przetestować przed użyciem.

Piszę to wszystko, bo jestem przeciwnikiem blokowania innowacji przez to, że część użytkowników używa przestarzałego sprzętu czy oprogramowania. Rezygnujemy z wsparcia dla IE6, rezygnujemy też z wsparcia dla 800x600. Jeśli tego nie zrobimy - technika będzie stać w miejscu, blokujący użytkownicy nigdy nie zrobią upgradu.

Ostatnio w sklepie komputerowym byłem świadkiem ciekawej sceny. Przychodzi pan w wieku mniej więcej 30-40 lat, i prosi monitor LCD 17". Sprzedawca mówi mu, że takich małych nie mają, i gorąco poleca najmniejszy (19") jaki jest. Klient jest oburzony i nie decyduje się na zakup :) Jeśli chce się kupić tańszy monitor, używane 17-tki są na prawdę tanie (i dobre, jeśli ktoś nie ma wymagań)
IP: 89.76.211.[...] Opera/9.80 (Windows NT 6.1; U; pl) Presto/2.2.15 Version/10.01
#8 SwiatCzcionki.pl 2010-03-26 18:13:09 0
Chcecie znaleźć czcionkę, której nie znajdziecie nigdzie indziej? Chcecie za darmow spolszczyć czcionkę?

Zapraszamy na forum http://swiatczcionki.pl
IP: 83.27.91.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; pl; rv:1.9.2.2) Gecko/20100316 Firefox/3.6.2

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.