Typografia jest podstawowym elementem każdej pracy związanej z projektowaniem stron internetowych. Powodem, dla którego jesteśmy zatrudniani do projektowania stron internetowych dla naszych klientów, jest to, aby mogli oni zapewnić użytkownikom przydatne treści. Posiadanie solidnej bazy typograficznej pomoże wyświetlać treści w sposób, który użytkownicy będą mogli efektywnie konsumować. Chociaż na stronie internetowej może znajdować się wiele innych elementów projektu, głównym czynnikiem jest treść, a naszym zadaniem jako projektantów jest ulepszanie projektów za pomocą naszego wyboru i wykorzystania typografii.

Podstawy typografii

Czcionka a krój pisma

Zanim zagłębimy się w dyskusję o typografii, przyjrzyjmy się terminom „czcionka” i „krój pisma”. Krój pisma odnosi się do zestawu symboli i znaków typograficznych: liter, cyfr i dowolnych znaków, które pozwalają nam umieszczać słowa na naszej stronie internetowej. Jest to projekt alfabetu, w zasadzie kształt liter, które składają się na ten styl. Kiedy mówimy o Helvetica, mamy na myśli krój pisma.

Czcionka jest definiowana jako pełny zestaw znaków w kroju pisma, często odnoszący się do określonego rozmiaru i stylu. Helvetica Bold 10 punktów to sposób na odwołanie się do czcionki. Czcionki są specyficzne dla plików, które zawierają wszystkie znaki i glify w kroju pisma.

Ta wielka debata „czcionka kontra krój pisma” stanowi wspaniałą rozmowę z innymi projektantami. Dla wszystkich, których piszesz, tak naprawdę mówimy o krojach pisma, ale „czcionki internetowe” są najczęściej używane w rozmowach.

Klasyfikacja czcionek

Gdy natkniesz się na wiele dostępnych krojów pisma na świecie, będziesz musiał znać ich klasyfikację. Najczęstszym sposobem jest sklasyfikowanie ich według stylu technicznego: szeryfowego, bezszeryfowego, pisma, wyświetlacza itp. Kroje pisma są również klasyfikowane według innych cech, takich jak proporcjonalne lub o stałej szerokości. W zależności od źródła mogą być bardzo specyficzne.

Historia bezpiecznej w sieci typografii

Na początku istnienia sieci utknęliśmy z bezpiecznymi opcjami sieci, które były bardzo ograniczające. Aby użytkownik mógł zobaczyć czcionkę zamierzoną przez projektanta, konieczne było udostępnienie jej na swoim komputerze. Jeśli otworzysz arkusz stylów ze starszej witryny, prawdopodobnie znajdziesz Arial, Georgia, Times New Roman, Trebuchet MS i/lub Verdana. Były to czcionki, które najprawdopodobniej znajdowały się na komputerze użytkownika, dlatego uznano je za „bezpieczne w Internecie”, ponieważ większość użytkowników mogła wyświetlić witrynę zgodnie z przeznaczeniem.

Jeśli projektujesz strony internetowe od dłuższego czasu lub jesteś od dawna internautą, prawdopodobnie pamiętasz czasy ograniczonych opcji typograficznych. Nie tak dawno temu, gdy surfowaliśmy po sieci, widzieliśmy w kółko te same pięć krojów pisma. Bez innych bezpiecznych opcji internetowych wszystko zaczęło wyglądać nudno i można by argumentować, że te kroje pisma nie były najlepiej dopasowane do sieci (w końcu pochodziły z druku). Jednak wraz z rozwojem sieci pojawiło się więcej opcji typu.

Co to są czcionki internetowe?

Ponieważ typografia jest tak ważna, nadszedł czas, aby uczcić ogromny postęp. Mamy do dyspozycji tak wiele krojów pisma, że ​​możemy teraz wybrać to, co jest najlepsze dla naszych użytkowników, zamiast polegać na tych samych starych, bezpiecznych w Internecie czcionkach, do których kiedyś byliśmy ograniczeni.
Czcionki internetowe nie są wstępnie instalowane w systemie użytkownika, tak jak czcionki internetowe. Nie musimy polegać na tym, że użytkownik ma na swoim komputerze żądaną czcionkę. Pochodzą z dołączonego źródła, więc każdy użytkownik będzie mógł zobaczyć zdefiniowaną czcionkę. Czcionki te są pobierane przez przeglądarkę podczas renderowania strony internetowej, a następnie stosowane do tekstu.

Jak korzystać z czcionek internetowych

Zasada @font-face

Ta szeroko obsługiwana reguła pozwala nam pobierać czcionki z serwera lub hostować je, dzięki czemu możemy ich używać na naszych stronach internetowych. Deklarując regułę @font-face w naszym arkuszu stylów, możemy określić nazwę kroju czcionki, lokalizację i grubość czcionki.

Ten przykład pokazuje, jak dodajemy Open Sans Regular. Zobaczysz, że źródłem jest folder czcionek, który jest zawarty w projekcie serwisu WWW.

@font-face {
font-family: 'Open Sans Regular';
src: url("../fonts/OpenSans-Regular-webfont.eot");
font-weight: normal;
font-style: normal;
}

Powyższa deklaracja dodaje czcionkę, aby można było jej użyć. Jak właściwie sprawimy, żeby się wyświetlał?

.example{
font-family: "Open Sans Regular", Arial, sans-serif;

}

Widać, że nazwa czcionki jest ustawiona na „Open Sans Regular”. Jest to nazwa czcionki, do której odwołujemy się w naszym stosie czcionek CSS, wraz z czcionkami zastępczymi na wypadek, gdyby z jakiegoś powodu czcionka nie została załadowana. W większości przypadków czcionka ładuje się dobrze, ale na wszelki wypadek dobrym pomysłem jest uwzględnienie rozwiązań zastępczych.

Pamiętaj, że większość czcionek ma inne rodziny, niektóre mają więcej niż inne. Aby z nich skorzystać, upewnij się, że uwzględniasz każdy z nich z regułą @font-face .

Formaty i czcionki internetowe

Zanurzmy się nieco głębiej w czcionki internetowe, gdy będziesz potrzebować wielu formatów. Te czcionki są hostowane samodzielnie i są przechowywane na serwerze w folderze o nazwie „czcionki”. Zauważysz, że z ostatniego przykładu dodano kilka nowych linii.

@font-face {
font-family: 'Open Sans Regular';
src: url("../fonts/OpenSans-Regular-webfont.eot");
src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
url("../fonts/OpenSans-Regular-webfont.woff") format("woff"),
url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
font-weight: normal;
font-style: normal;
}

Jest powód, dla którego musimy uwzględnić różne formaty, takie jak: .eot, .woff, .ttf, .truetype i SVG. Różne przeglądarki obsługują różne formaty czcionek, więc musimy uwzględnić nasze podstawy i zapewnić wszystko, czego mogą potrzebować różne przeglądarki.

Oto lista przeglądarek i obsługiwanych przez nie typów plików czcionek:

• Internet Explorer – .eot
• Mozilla Firefox – .otf i .ttf
• Safari i Opera – .otf, .ttf i .svg
• Chrome – .ttf i .svg
• Mobilne Safari – .svg

Hosting czcionek

Podczas korzystania z czcionek internetowych arkusz stylów wymaga samej czcionki, aby można ją było renderować w projekcie. Z tego powodu pliki czcionek będą gdzieś hostowane. Istnieją dwie opcje lokalizacji czcionek. Możesz skorzystać z usługi, która obsługuje czcionki dla Ciebie, lub możesz hostować samodzielnie z rzeczywistymi plikami czcionek. To naprawdę zależy od projektu, każdy ma swoje zalety.

W zależności od przyjętego podejścia, niezależnie od tego, czy jest to hosting własny, czy hosting z usługą czcionek, taką jak Typekit, CSS będzie wyglądał inaczej. Podobnie jak nazwa, zestawy są tworzone za pomocą Typekit. Zawierają one wszystkie czcionki, których będziesz używać. Aby odwoływać się do tych plików, dodasz fragment kodu JavaScript do nagłówka dokumentu HTML. Pozwala to załadować prawidłowe reguły @font-face .

Dostawcy usług hostingowych

Jest zbyt wielu dostawców usług hostingowych, o których warto wspomnieć, ale TypeKit, Fonts.com, H&Co (Hoefler and Company) to tylko kilka opcji. Zasadniczo mają czcionki na swoim serwerze i możesz z nich korzystać w zależności od rodzaju posiadanego konta.

Niektóre zalety tego podejścia to:

• Ogólnie rzecz biorąc, dostawcy ci mają większy wybór czcionek wysokiej jakości, ponieważ działają w branży typograficznej.
• Czcionki są łatwe w użyciu/instalacji.
• Łatwo jest zmienić kroje pisma podczas procesu projektowania lub dokonać globalnej zmiany.
• Ponieważ są to pliki stron trzecich, użytkownicy mogą je łatwo buforować.
• Mniejsza liczba żądań HTTP skutkuje lepszą wydajnością

Dlaczego powinieneś zacząć używać Font Awesome

Font Awesome to solidny zestaw ikon, który zawiera skalowalne ikony wektorowe. I co zaskakujące, jest darmowy (zestawy ikon mogą być dość drogie, co sprawia, że ​​jest to całkiem słodka okazja). Jest wiele ważnych t...

Dodanie nowych czcionek do witryny jest całkiem proste. Na przykład Fonts.com zapewnia trzy różne opcje publikowania z członkostwem w planie premium. Istnieją zarówno opcje javascript (również z Typekit), jak i inne niż JavaScript, które łączą się z obsługiwanym arkuszem stylów, a także opcją samoobsługową. W zależności od tego, co wybierzesz, Twój CSS będzie wyglądał inaczej.

Uwagi dotyczące użytkowania

W przypadku czcionek hostowanych mniej może oznaczać więcej. Ważne jest, aby nie używać zbyt wielu, ponieważ mogą wystąpić problemy z wydajnością. Wiele grubości tej samej czcionki jest uważanych za dodatkowy zestaw, więc zasadniczo ładujesz inną czcionkę. Dobrą praktyką jest uwzględnienie tylko tego, czego potrzebujesz.

Samodzielny hosting

Samodzielne hostowanie czcionek internetowych jest dość łatwe. Wszystko, co musisz zrobić, to dołączyć plik czcionki na swoim serwerze sieciowym, a zostanie on automatycznie pobrany, gdy użytkownik pojawi się na Twojej stronie.

Niektóre korzyści z samodzielnego hostingu to:

• Brak zależności javascript do dostarczania czcionek, wszystko czego potrzebujesz to referencje CSS.
• Szybkie renderowanie czcionek.
• Brak zależności od czasu pracy dostawcy hostingu czcionek.
• W przypadku darmowych i zakupionych czcionek nie byłoby opłat za subskrypcję ani ograniczeń wyświetlania strony.

Uwagi dotyczące użytkowania

Ważne jest, aby upewnić się, że masz wszystkie potrzebne formaty. Jeśli format nie jest uwzględniony, przejdzie do następnej czcionki zastępczej. Ważne jest, aby upewnić się, że masz poprawną ścieżkę do czcionki dla źródła. Jak widzieliśmy w poprzednim przykładzie, źródło wyglądałoby mniej więcej tak:

src: url("../fonts/OpenSans-Regular-webfont.eot");

Gdzie znaleźć dobre czcionki internetowe

Jest tak wiele czcionek internetowych do wyboru; jesteśmy bardzo szczęśliwi, że mamy wszystkie te opcje. Znalezienie idealnej czcionki jest łatwiejsze niż kiedykolwiek.

Oto kilka świetnych źródeł czcionek internetowych:

• Typekit
• Czcionki internetowe Google
• Hoefler i Spółka
• Czcionki.com
• CzcionkaWiewiórka

Stwórz własną czcionkę internetową

Przypadkowo, jeśli nie możesz znaleźć idealnej czcionki, zawsze możesz stworzyć własną. Font Squirrel zapewnia generator czcionek internetowych, który konwertuje dowolną czcionkę na zestaw plików internetowych do osadzenia. Pamiętaj tylko, że będziesz musiał je hostować. Aby dowiedzieć się więcej, spójrz na generator czcionek internetowych Font Squirrel. Uwaga, tworząc własną czcionkę, ważne jest, abyś miał prawa do jej używania.
Czcionki internetowe to świetny sposób na dodanie idealnej czcionki do następnego projektu internetowego. Dzięki szerokiej gamie opcji krojów pisma i wielu świetnym źródłom nie musisz już dłużej tkwić w tradycyjnych bezpiecznych opcjach internetowych. Łatwe w użyciu i zabawne w eksperymentowaniu czcionki internetowe to świetny sposób na dodanie osobowości do projektów witryn internetowych.