Projektowanie stron internetowych osiągnęło pełnoletniość, kiedy webfony weszły na szeroką skalę. Przed tym punktem można stwierdzić, że byliśmy mniej projektantami niż inżynierami.
Jednak entuzjazm, z jakim skorzystaliśmy z opcji czcionek w projektowaniu stron internetowych, doprowadził do oszałamiającej gamy opcji; do tego stopnia, że wielu projektantów wybiera ścieżkę najmniejszego oporu, pozwalając na łatwą realizację dyktującą ich typografię.
Jeśli wiesz, czego szukasz, wszystkie opcje są proste. W tym artykule uzbrójmy Cię wiedzą potrzebną do podejmowania świadomych decyzji przy wyborze technologii czcionek.
Zamierzamy zilustrować te opcje, koncentrując się na najlepszym sposobie dostarczania wszech czasów klasycznego kroju pisma, Garamond.
Uwzględniając zalety webfontów, pierwsza opcja, którą rozważymy, nie korzysta w ogóle z webfontów. Układanie czcionek jest techniką CSS, w której określa się liczbę niepowodzeń zaczynając od pierwszego wyboru i kończąc na rozwiązaniu typu catch-all.
Istnieje wiele zasobów do układania czcionek w Internecie, ale jednym z moich ulubionych jest cssfontstack.com, to świetny punkt wyjścia dla stosu czcionek, ale należy pamiętać, że często trzeba przynieść trochę wiedzy specjalistycznej.
Według cssfontstack.com Garamond jest dostępny jako czcionka systemowa na 49,91% komputerów Mac i 86,47% maszyn Windows. To całkiem dobrze, ale nie wystarczająco dobrze. Oto sugerowany stos czcionek, który obejmuje wszystkie bazy:
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;Pytanie brzmi: jak możemy to poprawić?
Cóż, wiemy, że dostępnych jest wiele wersji Garamond, więc możemy dodać odmianę w drugim gnieździe jako niewielki kompromis.
Po drugie nie zgadzam się z tym, że albo Baskerville, albo Times są odpowiednimi substytutami Garamond, więc upuśćmy je. Hoefler Text działa dobrze w miejscu Garamond, więc może zostać. Musimy dodać szeryf jako ostateczny catch-all, ale ponieważ większość systemów używa Timesa jako ich domyślny szeryf, zagrajmy w daleko lepszej Gruzji dla każdego, kto prześlizguje się przez pęknięcia.
Nasz ostatni zmodyfikowany stos czcionek wygląda następująco:
font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;Większość widzów obejrzy Garamonda, kilku innych dostrzeże rozsądny kompromis, a niewielka mniejszość po prostu dostanie domyślną czcionkę serif.
Układanie czcionek jest bezpłatne, zdecydowanie najszybszym rozwiązaniem, a w zależności od wybranego kroju czcionki może być bardzo skuteczne; w przypadku Garamond'a istnieje dobry argument za nazwaniem tej "pracy wykonanej".
Istnieje jednak jeden poważny problem z układaniem czcionek, zwłaszcza z krojem pisma, na przykład Garamond: w obiegu jest tyle pirackich wersji, że nie da się określić, która czcionka nosi nazwę "Garamond" w systemie użytkownika, nie tylko nie możemy być pewni projekt jest zgodny z naszymi oczekiwaniami, skala czcionki może radykalnie różnić się od wersji w naszym projekcie. (Technicznie rzecz biorąc, nic nie stoi na przeszkodzie by kopia Arial zmieniła nazwę na "Garamond", w takim przypadku nasz stos czcionek by to wykorzystał.)
Układanie czcionek jest więc doskonałym zabezpieczeniem i należy je rozważyć w połączeniu ze wszystkimi poniższymi rozwiązaniami, ale jest to rozwiązanie mniej niż idealne jako podstawowe rozwiązanie.
Czcionki Google jest dla wielu projektantów punktem, w którym kończą poszukiwania. Za całkowitą kwotę 0 USD możesz łatwo załadować webfony do swojej witryny za pomocą CSS.
Jedynym minusem jest to, że liczba dostępnych krojów jest bardzo ograniczona. Kroje pisma, takie jak Roboto i PT Sans, zawdzięczają swoją popularność zarówno bezpłatnej dostępności czcionek Google, jak i ich cechom konstrukcyjnym.
Obecnie jedyną odmianą Garamond dostępną w Google Fonts jest EB Garamond, próba otwarcia źródła kroju Garamond. Ale wadą tej wersji jest to, że dostępna jest tylko jedna waga i styl; nie ma pogrubienia ani kursywy. Projektant Georg Duffner hojnie udostępnił swoją pracę w toku Bitbucket ale nie jest gotowy do produkcji.
Google Fonts to świetne rozwiązanie budżetowe i idealnie nadaje się do sytuacji, w których możesz być podatnikiem, a nie klientem. Możliwość określenia czcionek w CSS jest tak prosta, jak tylko może być.
Największą wadą Google Fonts jest to, że pomimo ich marketingu, wybór jest niewielki. Jeśli szukasz webfontu Open Sans, jesteś we właściwym miejscu, ale jeśli chcesz mieć czcionkę podobną do Garamond - która jest mało znana - jest to wymywanie.
Samo-hosting to niezwykle niedoceniane podejście do webfontów. Jego główną atrakcją jest możliwość tworzenia podzbiorów czcionek, opcja tak atrakcyjna, że prawie wszystkie usługi strumieniowe próbują ją emulować.
Jeśli masz pulpitową kopię Garamond na swoim systemie, otwórz go i zobaczysz oszałamiającą liczbę postaci. Podzestaw czcionek to proces usuwania nieistotnych znaków, powodujący mniejszy rozmiar pliku i szybszą realizację.
Oczywiście, wymagane postacie zależą od budowanej strony: jeśli budujesz przewodnik turystyczny po Dubrowniku, prawdopodobnie będziesz potrzebować serbskich cyrylicy; jeśli odtwarzasz zgromadzone dzieła Szekspira, jest mało prawdopodobne, że będziesz potrzebował symbolu @.
Aby przesłonić czcionkę, potrzebujesz oprogramowania do edycji czcionek. Istnieje wiele opcji dostępnych za darmo FontForge do premii FontLab Studio. Aby utworzyć podzestaw wersji czcionki, po prostu wybierz glif, którego nie chcesz i usuń, a następnie zapisz plik w folderze projektu. (Uważaj, aby nie zastąpić oryginalnego pliku czcionki!)
Pełny plik .ttf dla Adobe Garamond Pro to 606 KB. Usunięcie go do podstawowych znaków łacińskich i interpunkcji zmniejsza go do 56Kb. Pomnóż to przez kilka wag i stylów i zaoszczędź kilka Mb w plikach do pobrania dla użytkowników.
Większość zainstalowanych plików czcionek to TrueType (.ttf) z odrobiną OpenType (.otf). Możesz je zapisać na swoim serwerze i określić w swoim CSS.
Obsługa formatów plików .ttf i .otf jest szeroko rozpowszechniona we wszystkich nowoczesnych przeglądarkach z wyjątkiem IE (nawet najnowszej wersji) i niektórych przeglądarek mobilnych (w tym starszych wersji Safari na iOS).
Aby zwiększyć zasięg, potrzebujesz kilku dodatkowych formatów. .eot działa dla IE, .woff będzie działać dla większości przeglądarek i jest preferowanym formatem W3C, .svg będzie działać na starszych przeglądarkach. Istnieje wiele usług internetowych, które wygenerują te formaty dla Ciebie z pliku .ttf, jednego z najpopularniejszych Czcionka Squirrel's.
Minusem konwersji czcionek pulpitu na użytek online jest dwojakie: po pierwsze, prawie na pewno nie masz na to licencji; po drugie, czcionki pulpitu są prawie zawsze zoptymalizowane do druku, po prostu nie wyświetlają się dobrze na ekranie.
Odlewnie czcionek w końcu obudziły się, że istnieje ogromny rynek dla webfontów. W wyniku tego nie tylko wzmocnili swoje licencjonowanie, ale także pracują nad optymalizacją katalogów z powrotem na ekranach.
Odlewnie dostarczające dedykowane webfonty zapewniają wszystkie wymagane formaty, sprawdzone pod względem jakości i gotowe do przesłania na serwer. Co więcej, wciąż możesz przesłać plik i nie jesteś zależny od czasu pracy serwera zewnętrznego.
Istnieje wiele miejsc, w których można kupić webfonts, dwaj z kluczowych graczy w tej dziedzinie FontShop.com i MyFonts.com .
Wracając do naszego dylematu Garamond, widzimy, że MyFonts mają w ofercie wiele różnych wersji Garamond. Możemy licencjonować Adobe Garamond w kilku wagach, ograniczone do 250 000 odsłon, za około 180 USD.
FontShop oferuje również wiele wersji Garamond dostępnych w sieci. URW Garamond Web zapewnia każdą możliwą wagę i styl, a wszystko to przy dużej ilości 500 000 odsłon miesięcznie. Co więcej, FontShop ma dedykowany podsektora w celu zoptymalizowania zakupów nowych, błyszczących czcionek. Niestety, płacisz za to premię, około 680 USD za pełną rodzinę czcionek.
Samo-hosting umożliwia podsegmentowanie. Zapewnia to kontrolę nad dostarczaniem czcionek i pozwala uniknąć wszelkiego rodzaju zależności od serwerów stron trzecich.
Co więcej, jeśli kupujesz profesjonalny webfont, możesz oczekiwać, że jakość będzie wyjątkowo wysoka.
Samo-hosting również przemawia do tych z nas, którzy wolą "posiadać" nasze czcionki, niż je wypożyczać. Oczywiście, pod względem prawnym, w ogóle nie ma własności, ale jednorazowa opłata jest wygodniejsza niż abonament dla wielu osób.
Jedyną wadą samo-hostingu jest znaczna cena. Nie tylko będziesz musiał płacić za czcionkę, ale możesz również uwzględnić faktyczne koszty hostingu i przepustowości.
Podobnie jak czcionki Google, usługi webfont dostarczają czcionki do naszych przeglądarek poprzez prosty CSS. W przeciwieństwie do Google Fonts, istnieje ogromny wybór.
Istnieje wiele różnych dostawców do wyboru, a szczególnie podoba mi się Hoefler & Frere-Jones " cloud.typografia usługa. Jednak, podobnie jak w przypadku wielu mniejszych dostawców, ich użyteczność jest całkowicie zależna od dostępności kroju, którego szukasz. Najbliższą czcionką, którą może dostarczyć Hoefler & Frere-Jones, jest Hoefler Text, jednak jeśli płacimy premię, nie powinniśmy iść na kompromis.
Największym graczem w streamingu webfont jest Adobe Typekit . Jakość ich czcionek jest bardzo wysoka, implementacja jest prosta, a co najważniejsze mają ogromny katalog do wyboru.
Typekit oferuje szereg subskrypcji od 24,99 USD rocznie za 50 000 wyświetleń miesięcznie, do 99,99 USD rocznie za 1 000 000 odsłon miesięcznie. Jeśli jednak jesteś członkiem Creative Cloud, Plan Portfolio jest uwzględniony w subskrypcji; co oznacza, że dla większości projektantów stron internetowych Typekit to darmowe rozwiązanie.
Szybkie wyszukiwanie mówi nam, że istnieje kilka wersji Garamond, w tym Własność Adobe, dostępne na Typekit. Istnieje także bardzo ograniczona funkcja podzbioru, która pozwala nam zmniejszyć rozmiar pliku.
Usługi przesyłania strumieniowego Webfont zapewniają dużą różnorodność doskonałej jakości czcionek, które można łatwo dodać do witryny.
W przypadku Typekit, jeśli jesteś już członkiem Creative Cloud, to bezpłatny dostęp sprawia, że jest to jeszcze bardziej atrakcyjna opcja. Jeśli jednak nie jesteś członkiem, masz do wyboru, czy zapłacić znaczną subskrypcję i związać się z Adobe.
Moja podstawowa troska związana z każdą usługą przesyłania strumieniowego polega na tym, że jesteś całkowicie zależny od wydajności serwera stron trzecich. Jeśli ich serwer ulegnie awarii, tak samo znaczna część twojego brandingu.
Tak jak w przypadku tak wielu rzeczy, odpowiedź brzmi: zależy to od twojego projektu. Ale są pewne decyzje, które możemy podjąć na podstawie naszego testu Garamond:
Układanie czcionek to bezpłatna kopia zapasowa, zapewnia rozwiązanie na poziomie marki, jeśli i gdy brakuje plików czcionek lub usługi przesyłania strumieniowego działają wolno. Zawsze powinien być wdrażany na dowolnej stronie, ale polegając na niej, nawet w przypadku czegoś tak powszechnego, jak Garamond jest potencjalnie niebezpieczny.
Jeśli czcionka, której szukasz, jest dostępna do bezpłatnego przesyłania strumieniowego za pośrednictwem czcionek Google lub na przykład w przypadku subskrypcji Creative Cloud, jest to dobry wybór. Ponieważ mam subskrypcję Creative Cloud, byłbym kuszony tą drogą, chociaż brak prawdziwego podzbioru byłby problemem.
Jeśli masz budżet, najlepszym wyborem jest samo-hosting profesjonalnego webfonta. Stosunkowo skromny koszt - w porównaniu do fotografii seryjnej - jest łatwy do uzasadnienia dzięki ogromnym podsegmentom zwiększania prędkości.
W branży, w której minimalizujemy pliki JavaScript, aby zaoszczędzić kilka kilobitów, golenie setek razy więcej niż jeden plik jest łatwe.
Wyróżniony obraz / miniatura, pobierz obraz przez Shutterstock.