Fonty w sieci

Fonty w sieci

Fonty są nieodzowną częścią internetu. Bez niego treść, która jest w sieci byłaby uboga, jeśli nie żadna.

W tym artykule opiszę czym, są fonty, jakie są ich rodzaje oraz jak z nich korzystać w sieci. Najczęściej używa się zamiennie trzech określeń takich, jak font, krój pisma i czcionka, ale jeśli chodzi o typografię w sieci najbardziej odpowiednim wyrażeniem będzie jednak font. Krój pisma zajmuje tu drugie miejsce. Natomiast czcionki używa się raczej w druku, do odciskania liter. Więc nie wiele ma to wspólnego z tekstem w sieci. Najbardziej odpowiednim określeniem moim zdaniem będzie font.

Zacznijmy od tego, jak to się dzieje, że na stronie WWW widzimy taki, a nie inny font? Defaultowo, czyli domyślnie, jeżeli nie zaimportujemy żadnego fontu na stronę internetową, przeglądarka wyrenderuje stronę jednym z fontów, który mamy zainstalowany z systemie operacyjnym.

Kiedyś to był jedyny sposób umieszczania fontów na stronach. A jeśli chciało się mieć jakiś niestandardowy tekst na stronie trzeba go było zrobić w programie graficznym i umieścić jako grafikę. Teraz już coraz częściej fonty wraz z CSS wypierają  grafikę.

Dlaczego fonty, a nie grafika? Ponieważ fonty są wektorowe, co oznacza, że skalują się bez utraty jakości w górę i w dół. Są również lżejsze od grafiki, więc szybciej się ładują i nie obciążają strony.

Fonty, których możemy bezpiecznie używać na stronie.

Kroje pisma, które przeważnie będą zainstalowane na każdym komputerze to:

  • Arial,
  • Courier NEW, Courier,
  • Garamond,
  • Lucida,
  • Tahoma,
  • Times New Roma, Times,
  • Verdana
Przykład w CSS
font-family: Verdana, Arial, sans_serif;

Na szczęście teraz już coraz rzadziej się używa „bezpiecznych fontów”, bo CSS3 umożliwia nam dodanie dowolnego kroju pisma na stronę WWW. Za pomocą reguły @font-face.

Fonty dzielimy głównie na:

  • Szeryfowe – to takie z wypustkami na końcach liter.
    Fonty w sieci szeryfowe
    Przykład szeryfowego kroju pisma.

     

     

  • Bezszeryfowe – to takie bez wypustek na końcach liter.

    Fonty w sieci bezszeryfowe
    Przykład bezszeryfowego kroju pisma.

 

A jeśli nie chcemy na swojej stronie używać tak zwanych bezpiecznych fontów z systemu użytkownika, możemy dany font zaimportować na stronę WWW.

Jak zaimportować fonty na stronę?

1. Sposób Reguła @font-face i osadzanie plików z fontem na naszym serwerze WWW. W podobny sposób jak osadzamy grafikę na stronie internetowej.

Reguła w CSS
@font-face{
  font-family:"Lato";
  src: url('/fonty/lato.eot');
}

Pamiętaj, że żeby osadzić jakiś font na stronie musi na to zezwalać jego licencja. Jeśli nie wiesz czy danego fonta możesz użyć na stronie, sprawdź jego licencję !

Skąd można brać font, żeby osadzić je na swojej stronie?

Polecam te dwa linki, bo mają ogromną bazę fontów, w tym wiele darmowych. Możemy z tych stron pobrać nie tylko paczki z fontami, które wykorzystamy na stronie, ale też pliki .TTF do zainstalowania danego fontu w systemie.

Żeby ściągnąć paczkę danego kroju pisma do wykorzystania na stronie wchodzimy w zakładkę webfont kit i pobieramy pliki z fontem.

Kiedy już pobraliśmy taką paczkę z fontami wrzucamy ją na nas serwer WWW i podlinkujemy w CSS.

2. Sposób to hostowane fonty.

  • google.com/fonts

Tego typu fontów nie trzeba wgrywać na swój serwer, ani sprawdzać jego licencji. Ładuje się do na stronę za pomocą JavaScriptu w pliku HTML i odwołuje się do niego tylko w CSS. Proste, szybkie i przyjemne.

Więcej na temat Google Font i używania hostowanych fontów było w Jak zrobić button w CSS.

Fonty zamiast obrazków i ikon?

Dokładnie tak. Doczekaliśmy czasów, których zamiast obrazków i wielu ikonek można używać tekstu. Z powodzeniem zastąpi on wiele sprites’ów CSS. CSS Spites to zestawy grafik na stronę WWW zebrane w jednym pliku .PNG (O tym czym są Sprites’y CSS obiecuję jeszcze dokładniej napisać).

Dlatego używanie fontów zamiast ikon jest lepsze, bo w dalszym ciągu jest to tekst mimo, iż wygląda jak grafika. I zachowuje właściwości tekstu. Jest wektorowy, szybciej nie ładuje i można łatwo zmienić jego właściwości za pomocą stylów CSS, jak w przypadku zwykłego tekstu.

Przykład stron z takimi tekstowymi ikonkami:

Działa to w bardzo prosty sposób:
Po kliknięciu, na którąś ikonkę trafia ona do naszej kolekcji. Klikniecie ponowne na nią, ją z niej usuwa. Po stworzeniu już całej kolekcji potrzebnych nam ikon. Pobieramy paczkę i wrzucamy do katalogu z naszą stroną.
Ikonki umieszczamy w odpowiednim miejscu w pliku HTML. Kopiując dany kawałek kodu z pliku fontello.

To już chyba wszystko, co mam w tym temacie do przekazania. A jeśli temat Cię zainteresował polecam Ci obejrzeć film o fontach Helvetica.

Dodaj komentarz

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