DesignMagazyn

Typografia

Korzystamy z Typekita!

Opublikowane dnia .

Korzystamy z Typekita!

Wstęp

Typografia

Korzystamy z Typekita!

Opublikowane dnia .
Typekit jest usługą od znanej wszystkim ze środowiska graficznego firmy Adobe. Serwis ten umożliwia nam zastosowanie niestandardowych czcionek na naszej stronie. Pod adresem www.typekit.com znajdziemy zestawienia wielu rodzin fontów, które z pewnością wpadną nam w oko i będą nadawać się do prezentacji treści na naszej stronie. Uważam, że jest to jedna z najlepszych tego typu usług.

Opis działania i przykłady

Podczas rejestracji na typekit.com musimy się zdecydować na jeden z pakietów jakie oferuje nam Adobe w zakresie korzystania z serwisu. Mamy do dyspozycji 5 różnych planów, z czego jeden jest darmowy. Niestety nie jest on na tyle rozwinięty, aby móc na dłuższą metę z niego korzystać, ponieważ zawiera możliwość umieszczenia dwóch czcionek na jednej stronie, a to jest zbyt mało, by myśleć o dalszych działaniach. Z tego powodu polecam wybrać któryś z płatnych pakietów i rozpocząć pracę z Typekit. Ja opisuje te usługę z perspektywy najwyższego z pakietów.

Po przejściu do ekranu głównego widzimy bardzo przejrzystą galerię fontów oraz pasek filtrów, które są bardzo istotne i przydatne.

Dzięki funkcjom zawartym w panelu po prawej stronie możemy bardzo skrócić czas poszukiwania idealnego fontu dla naszego projektu. Po odhaczeniu interesujących nas „funkcji” czcionki, cała lista propozycji zostanie ułożona według naszych potrzeb. Znajdziemy tam takie opcje jak czcionki, które powinno się stosować tylko w nagłówkach, szeryfowe, bezszeryfowe czy takie, które imitują odręczne pismo. Poniżej znajduje się kolejna funkcja, niemniej ważna, szczególnie dla polskich tekstów – wsparcie dla języków. Dzięki wybraniu np. j. polskiego mamy pewność, że na liście pozostaną tylko fonty, dla których zostały zaprojektowane polskie znaki diakrytyczne.

Po wybraniu odpowiedniej czcionki pokazuje nam się ekran niemniej ważny od poprzednich. Zawiera on szczegółową prezentację kroju oraz „wagę” każdego z fontu. Jest to istotne w późniejszej fazie, ponieważ musimy pamiętać, że implementacja wielu czcionek na naszej stronie wiąże się z dłuższym ładowaniem strony.

Jest także możliwość przetestowania czcionki na wybranym przez nas tekście. Istotne jest to, że ten tester jest pozbawiony polskich znaków ze względu na optymalizację tej witryny, ale nie ma się co martwić, w dalszych krokach przy implementacji naszego fontu na stronę, będziemy mogli zaznaczyć opcję o rozszerzeniu czcionki o te znaki.

W typekicie tworzymy różne zestawy czcionek, które symbolizują nasze strony. Dzięki temu wiemy, do jakich stron przypisaliśmy poszczególne fonty. Po wybraniu opcji „Add to kit” wyskakuje nam okienko w którym po lewej stronie mamy do dyspozycji najważniejsze funkcje implementacji czcionki.

Pierwsza funkcja to „selectors” czyli selektory znane nam z CSS. Tutaj możemy wpisać selektory, w których chcemy zapisać nasz font. Jest to bardzo przydatne, ponieważ nie musimy manualnie modyfikować kodu.

Language Support to ten element, gdzie decydujemy o rozszerzeniu naszego kroju o polskie znaki. Aby to zrobić wystarczy po prostu zaznaczyć opcję „All Characters”.

Następnie wybieramy odpowiednie grubości czcionek, pamietając, że każda z nich będzie pochłaniała czas ładowania strony.

Ostatnie miejsce to CSS Stack, w którym wpisujemy wartości, które chcemy nadać w naszej regule Font-Family dla przeglądarek, które nie obsługują @Font-Face.

Gdy już wszystko ustawimy według naszych potrzeb, sięgamy w górną część ekranu do opcji „embed code” by zaczerpnąć kodu JavaScript, który należy umieścić na naszej stronie. Ostatni krok to wybranie opcji „Publish”. Teraz możemy cieszyć się nowym fontem na naszej stronie!

Wady i zalety

Typekit, jak każda usługa niesie za sobą trochę dobrych i złych cech. Moim zdaniem nawiększym problemem jest to, że w żaden sposób nie da się pobrać czcionki i zastosować jej w projekcie graficznym. Niestety Typekit nie daje możliwości korzystania z bardziej korzystnych, darmowych planów.

Wielkim plusem przy zakupie dostępu do serwisu jest fakt, że mamy dostęp do potężnej biblioteki czcionek. Dzięki takim możliwościom, bardzo łatwo się przyzwyczaić i uzależnić od Typekit, ponieważ nie potrzebujemy żadnych alternatyw.

Konkluzja

Typekit to z pewnością jeden z najlepszych serwisów umożliwiających implementacje fontów do naszej strony internetowej. Ja osobiście lubię go za prostotę korzystania i za dużą bibliotekę krojów. A Wy? Korzystacie z Typekita? Może z innej tego typu usługi? Podzielcie się swoimi doświadczeniami w komentarzach! 

profile

Sebastian Cencyk

https://dribbble.com/scencyk

Grafik oraz pomysłodawca DesignMagazyn. Członek zespołu Adobe Community Professional. Pasjonat wszystkiego co ładne. Szczecinianin.

  • Może nie dostrzegam jakichś oczywistych zalet rozwiązania, ale nie bardziej się opłaca kupić fonta z licencją na web? W przypadku gdy robi się identyfikacje i trzeba utrzymać ich spójny charakter, tak czy inaczej potrzeba mieć daną czcionkę u siebie na kompie. Jedynym wypadkiem gdy widzę tę usługę za przydatną jest, gdy zdarza się rozbić identyfikację na kilku wykonawców (najczęściej niezgraną… eh…) i wtedy webdesignerowi wisi czy jego CIowski kolega będzie miał tę fancy czcionkę której on używa do headów. Tudzież sam projekt obejmuje tylko sieć i nie przewiduje materiałów drukowanych.

    • Zaletą typekita jest dostęp do naprawdę dużej kolekcji fontów i nie wymusza zakupu licencji na czcionkę za każdym razem – mamy dostęp do wszystkich i jest spore prawdopodobieństwo że czcionka użyta w identyfikacji wizualnej będzie w katalogu typekita.
      Jest to oczywiście narzędziem do wykorzystania w internecie gdzie sporo projektów tworzonych jest bez konieczności zachowania spójności z materiałami drukowanymi i wtedy web designerzy mają wolną rękę w doborze czcionek.

  • To są fonty, nie czcionki!

  • Hej,

    Bardzo ciekawy opis i zgodzę się z autorem, że typekit jest bardzo przydatnym narzędziem. Jestem grafikiem i dopiero zaczynam przygodę z webdesignem… może zrobicie coś co przydało by się początkującemu graczowi na tym rynku? jakieś tutoriale, podstawy, jakich narzędzi używać?

    Artykuł o typekit jest dobrym początkiem :)

    Pozdrawiam

    • Z pewnością powstanie coś dla początkujących. Dziękujemy za opinię i mamy nadzieję, że zostaniesz tu na dłużej : )

  • Pingback: Podstawy Webdesignu cz1 - Software | DesignMagazyn()

Zobacz komentarze (6) ...