Ta strona używa cookies
sprawdź politykę prywatności

Rozumiem

Wszystko co musisz wiedzieć o czcionkach na Front-Endzie.

20/3/2019
Bartek Cis

W tym wpisie dowiesz się jak używać czcionek w aplikacjach internetowych. Wstęp do typografii, formaty plików i różne sposoby na ich użycie w aplikacji.

Czego się dzisiaj dowiesz?

W zasadzie to opisałem to już we wstępie. Na początku nieco o samych czcionkach tzn. czym i po co są czyli ogólnie o typografii oraz doborze czcionek do projektu.

Następnie jak ich używać w aplikacji internetowej. W ostatniej części opiszę Variable Fonts czyli super optymalizację.

Plan działania

1. Czym jest Typografia?

2. Jak dobrać czcionki do projektu?

3. Popularne formaty czcionek

4. Jak użyć swoich czcionek w aplikacji

5. Variable Fonts

Czym jest Typografia?

Klasyczna definicja brzmi mniej więcej tak:

Technika lub/i sztuka mająca na celu sprawienie aby tekst użyty w danym projekcie ( np. książka, baner, logo czy aplikacja 🙂 ) był czytelny, prawidłowy i atrakcyjny wizualnie.

Czyli ogół działań mających na celu poprawę doświadczenia użytkownika związanego z czytaniem tekstu / odbieraniem treści.

W skład tych działań wchodzi również przestrzenna orientacja tekstu tzn. odstępy między liniami, kierunek tekstu, wielkość liter ( ich organizacja jest codziennością w pracy FE Deva ) jednak kluczową kwestią którą będę omawiał w dalszej części tego paragrafu jest sama forma czcionki czy liter. Specami od tego byli średniowieczni mnisi:

Tworzenie czcionek

Użycie odpowiedniej czcionki może przesądzić o sukcesie lub porażce danego projektu. Doskonale rozumieją to graficy i projektanci. Dobierają lub czasem wręcz tworzą od nowa nowe formy czcionek aby wywołać u odbiorcy odpowiednią reakcję. To sztuka wizualizacji.

Koniec tego pitu pitu. To blog dla programistów więc przejdę do konkretów 🙂

Anatomia czcionki

Każda litera w czcionce definiowana jest według całego szeregu parametrów takich jak np. orientacja względem osi X i Y czy stosunek wielkości małych do dużych liter. Znakomicie to ilustruje poniższa grafika:

https://developers.google.com/

Czcionka może też mieć wiele różnych “grubości”:

https://developers.google.com/

Powyższa grafika pokazuje skalę od 10 do 200. W Web Developmencie przyjmuje się, że najcieńsze czcionki posiadają wartość 100 a te najgrubsze >800. To skala w CSS.

Kolejnym parametrem jest odchylenie od osi Y. Czcionki nachylone określane są jako Italic.

https://developers.google.com/

Rodziny/ typy czcionek

Serif

Znane z Westernów 🙂 Do tego typu klasyfikują się wszystkie czcionki które mają charakterystyczne ogonki przy końcówkach liter:

Sans-Serif

Te czcionki z kolei nie mają takich ogonków:

Monospace

Ten typ posiada tą samą szerokość liter. No poza tymi wąskimi jak np. “i” lub “j” i szerokimi jak np. “m” lub “w”:

Handwriting

Wszystko co imituje tekst pisany ręcznie:

Display

Grube czcionki które zostały stworzone by być atrakcyjnym elementem graficznym. Z reguły słabe do samego tekstu ale dobre do tytułów.

Łączenie typów

W zasadzie to te dwie rodziny się wykluczają – Serif i Sans-Serif. Poza tym te kategorie mogą się łączyć np. Serif, Display itp…

Jak zrobić własną czcionkę?

Jeżeli rozumiesz anatomię czcionek i masz graficzne aspiracje ( niekoniecznie talent ) to możesz spróbować stworzyć własną czcionkę! TEN tutorial opisuje jak zrobić to w programie Adobe Illustrator.

Pamiętaj też o polskich znakach 🙂 Jak udostępnisz swoją czcionkę to może któregoś dnia zobaczysz, że artykuły na bedekodzic.pl ukazują się napisane… Twoją… Twoją czcionką!

Jak dobrać czcionki do projektu?

A więc już rozumiesz Typografię czcionek. Teraz pytanie jak dobrać je tak żeby było dobrze?

Jeżeli kodujesz projekt dla kogoś to zazwyczaj czcionki już są określone i jesteś zwolniony z kreatywnego myślenia na ten temat.

Może się jednak trafić, że Twój klient prosi Cię o poradę w tej sprawie lub w ogóle pracujesz nad własnym projektem?

Podstawy podstaw

Najczęściej dobiera się dwa typy czcionek: jedna do tekstu druga do nagłówków. Czasem może pojawić się też trzeci rodzaj czcionek do podtytułów. Niektóre czcionki nadają się zarówno do nagłówków i tekstu.

Zasada jest taka, że im mniej rodzajów czcionek tym lepiej ( przynajmniej z technicznego punktu widzenia ale o tym później ).

Możesz też spotkać się wieloma wariacjami jednej czcionki czyli grubsze, cieńsze, pochylone itp… Nazywa się to stylami czcionki:

Wszystkie style danej czcionki tworzą rodzinę tej czcionki która w branży jest nazywana jako Typeface.

Najłatwiej to zrozumieć na “żywym” przykładzie czyli gotowym projekcie. Widać jak ważnym elementem designu może być czcionka. Jakiś czas temu popularne były artykuły w których pokazywano zestawienia na tle stron jak np. TUTAJ.

Chodzi o to aby zrozumieć jaki masz cel i jakie czcionki pomogą zbudować odpowiedni wizerunek. Możesz też sobie sprawdzić popularne zestawienia na Fontpair.

Sztuczna Inteligencja

Do niedawna wszystko się sprowadzało do wyczucia estetyki projektanta. Teraz się to zmieniło bo do gry wkroczyła sztuczna inteligencja 🙂

Z miesiąc czy dwa temu wrzuciłem na mojego funpage’a ( warto go śledzić! ) link do Fontjoy. To serwis w którym AI samo dobiera Ci czcionki. Po prostu rewolucja w temacie! Weź głęboki wdech i zanurz się w świecie czcionek 🙂

Zabawne bo 2 miesiące później co drugi artykuł w Google na ten temat czerpie z Fontjoy 🙂 Społeczność propsuje…

Czcionki już dobrane teraz czas przyjrzeć się samym plikom używanym w aplikacjach internetowych. Oprócz krótkiego opisu na temat formatu dołączam info na temat ile waży czcionka OpenSans Bold zapisana w ten sposób:

TrueType Fonts (TTF)

Standardowy format czcionek w systemach Windows i MacOS wymyślony pod koniec lat 80 XX wieku. Oferował odwzorowywanie kształtu za pomocą krzywych Beziera  szybszych od ówczesnej konkurencji.

Waga OpenSans – 123KB

OpenType Fonts (OTF)

Następca TTF stworzony w przez Microsoft i Adobe w II połowie lat 90 XX wieku. Lepiej wspiera alfabety niełacińskie. Więcej info w nagłówku.

Waga OpenSans – 156KB

The Web Open Font Format (WOFF)

Są to czcionki TTF lub OTF podane specjalnej kompresji. Ten format został stworzony na potrzeby internetu i wszystkie standardowe przeglądarki zostały wyposażone w mechanizm odczytu tych czcionek. Format wprowadzony w 2009 roku.

Waga OpenSans – 74KB

The Web Open Font Format (WOFF 2.0)

Kolejna odsłona formatu dla internetu w której udoskonalono kompresję i użyto algorytmu Brotli.

Waga OpenSans – 61KB

SVG Fonts/Shapes

Jak sama nazwa wskazuje używa plików SVG. W praktyce przydatne w przypadku artystycznych czcionek o kompletnie graficznym charakterze. Artykułu nimi nie pisz 🙂 Ale za to rzuć okiem na ten artykuł żeby zrozumieć ten format lepiej.

Waga OpenSans – 1,2MB

Embedded OpenType Fonts (EOT)

Format stworzony przez Microsoft w odpowiedzi na format WOFF który początkowo nie miał wsparcia w IE. Czyli czcionki dla sieci. Patrząc na rozmiar pliku poniżej lepiej potraktować ten format jako ciekawostkę 🙂

Waga OpenSans – 225KB

Formaty plików wnioski

Z zestawienia wynika jasno, że aby użyć czcionki w internecie należy przekonwertować wszystko do WOFF i WOFF2. WOFF umieścić na potrzeby IE…

Jeśli chcesz dodać czcionkę ala średniowieczny mnich to użyj SVG.

Konwersję między plikami możesz wykonać tym narzędziem.

Jak użyć swoich czcionek w aplikacji

Tyle czystej teorii. Teraz czas na teorię połączoną z praktyką 🙂 Czyli ładujemy czcionki do aplikacji.

Licencja na czcionki

Zanim podejmiesz decyzję o użyciu danej czcionki upewnij się, że posiadasz licencję na użycie! Jeśli nie wiesz gdzie zacząć to wiedz, że wszystkie czcionki w Google Fonts są na licencji Open Source. Możesz ich używać zarówno prywatnie jak i komercyjne.

Ładowanie czcionek

Czcionki tak jak wszystkie inne zasoby aplikacji muszą być najpierw pobrane przez przeglądarkę użytkownika. Są dwa podejścia do tego skąd te czcionki będą pobierane.

Serwer Zewnętrzny

Możesz ładować czcionki z zewnętrznego API. Najczęściej z Google Fonts. Jakie są plusy?

a) Jest to bardzo szybkie w implementacji bo wystarczy wkleić kod od Google do tagu    head   ​w nagłówku aplikacji:

b) Chrome zapisuje czcionki z Google Fonts w swoim “globalnym” cache i jeżeli kiedykolwiek odwiedziłeś/aś stronę używającą np. czcionki Roboto to zostanie ona zapisana w tym cache. Jeżeli jakaś inna strona którą odwiedzisz też używa Roboto to czcionka zostanie pobrana z cache. Czyli lepszy performance.

c) Google jak nikt inny wie jak optymalizować czcionki 🙂

Minusy:

a) Co prawda to serwery Google więc można na nich polegać lecz to ciągle zewnętrzne serwery… Dobrze mieć własne zasoby u siebie.

b) Niestety ilość czcionek w Google Fonts jest ograniczona i zawiera tylko Open Source’y. Może tam nie być tego co potrzebujesz.

 

Jeżeli używasz jakiegoś innego zewnętrznego API to większość wyżej wymienionych plusów niekoniecznie jest prawdą 🙂

Ja jestem zwolennikiem posiadania czcionek zdefiniowanych wewnątrz projektu choć Google Fonts jest naprawdę super.

Font Awesome

Choć ta popularna biblioteka ma w nazwie “czcionka” to nie o pisanie w niej chodzi 🙂 To zbiór ikon szybkich w użyciu wewnątrz aplikacji. Taka szybka dygresja na wypadek gdyby ta nazwa Cię myliła.

Użycie czcionek wewnątrz aplikacji

I o tym w zasadzie będzie już do końca tego wpisu. Jak zacząć?

Pliki źródłowe czcionek

Na początku zdobądź plik czcionek w jednym w wymienionych wcześniej formatów. Skąd wziąć plik?

Jeżeli go nie masz to pobierz z Google Fonts, Font Squirrel lub innego podobnego serwisu. Jeśli czcionka jest płatna to ją kup 🙂

Następnie o ile czcionka nie jest w WOFF2 to przekonwertuj ją do tego formatu. Nie zapomnij też o formacie WOFF dla Internet Explorera. Zrób to za pomocą Font Generatora.

Bardzo ważne jest użycie (o ile to jest możliwe) wsparcia danego alfabetu np. polskiego. Robi się to wchodząc w ustawienia Expert:

A następnie Custom Subsetting i wybierz alfabet:

Pobierz paczkę i sprawdź co masz tam w środku.

Umieść pliki czcionek wewnątrz aplikacji

Czyli skopiuj pliki .woff i .woff2 do odpowiedniego folderu np.   ./assets/fonts   .

Teraz chcesz użyć tych zasobów jako czcionek w aplikacji. Różne ekosystemy np. React, Vue, Angular czy czysty JS mogą mieć różne schematy co do tego procesu. Ja rozpatrzę ten klasyczny czyli bez żadnego frameworka/biblioteki.

Font-face

W pobranej wcześniej paczce otwórz plik   stylesheet.css    i skopiuj zawarty tam kod. Powinien wyglądać tak:

@font-face {
    font-family: 'playfair_display_scblack';
    src: url('playfairdisplaysc-black-webfont.woff2') format('woff2'),
        url('playfairdisplaysc-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Umieść ten kod w odpowiednim miejscu w swoich stylach CSS / SASS np. w pliku   _fonts.scss    lub   _typography.scss   . Dopisz też pośredni link do pliku w src np. url(‚./assets/fonts/playfairdisplaysc-black-webfont.woff2’).

Wywołanie czcionki

Teraz już zostało tylko wywołać czcionkę po nadanej nazwie w odpowiednim miejscu w stylach CSS np.

h1 {
    font-family: 'playfair_display_scblack';
}

Czcionki zastępcze

Jeśli z jakiś powodów czcionka nie została pobrana bo np. wystąpił błąd serwera lub CSSy się nie odpaliły to przeglądarka zastąpi czcionkę swoją domyślną. Jeśli chcesz wiedzieć gdzie się zmienia domyślne czcionki w Chrome to sprawdź ten artykuł.

Możesz zdefiniować jakie masz preferencje w przypadku takiego scenariusza np:

h1 {
    font-family: 'playfair_display_scblack', Verdana, Geneva, sans-serif;
}

W tym wypadku przeglądarka będzie próbowała zastąpić Twoją czcionkę kolejno Verdaną, Genevą lub jakąś inną czcionką w stylu sans-serif. Więcej na ten temat możesz znaleźć na MDN.

Modyfikacja czcionek

CSS oferuje całą gamę właściwości które pozwalają na modyfikację wyglądu danej czcionki. Do najpopularniejszych należą font-weight, font-size i line-height odpowiadające kolejno za grubość czcionki, wielkość i wysokość linii tekstu.

Możesz też zmieniać sposób wyświetlania czcionek przy pomocy text-transform lub innych właściwości z tej kategorii.

Kolejny sposób na zmianę wyglądu czcionki to tagi w HTML np.    <i></i>    lub <b></b> .

Różne przeglądarki mogą też trochę inaczej renderować czcionki. W niektórych przypadkach mogą one wyglądać trochę “gorzej”. Wtedy możesz spróbować je wygładzić za pomocą font-smooth. Nie zapominaj o prefixach.

Nie kombinuj

Choć możesz próbować zmieniać wygląd standardowej czcionki aby wyglądała na italic, bold lub jeszcze inaczej to gdy porównasz z projektem graficznym to stwierdzisz… To jednak nie to

Oczywiście, że to nie to 🙂 Żeby to było to, to musisz po prostu wczytać kolejną, odpowiednią czcionkę. Zazwyczaj tego nie przeskoczysz 🙂 W ten sposób przejdę do optymalizacji i bardziej zaawansowanego użycia czcionek.

Variable Fonts

Gdy o tym usłyszałem po raz pierwszy byłem dobrze podjarany. Chodzi o to, że łączymy czcionki w jeden plik który jest potem lepiej kompilowany ( nawet do 80% oszczędności ) a potem dynamicznie wywołujemy go CSS’em. Czyli mniejsza waga typografii i redukcja żądań HTTP. Czy to sen?

Metoda Prób i błędów

Okazało się, że nie znalazłem narzędzia na połączenie kilku czcionek WOFF2 w jeden plik… Trzeba pracować na OTF lub TTF. Jeśli potrzebujesz narzędzi do łączenia kilku plików czcionek w jeden pakiet możesz użyć fonttools’a albo fontforge’a. Taki pakiet ma wtedy rozszerzenie TTC.

Ale to w sumie nie problem bo mogę potem przekompilować mój TTC do jednego dużego WOFF2 i potem dynamicznie wywoływać! Kolejny kubeł zimnej wody bo kompilatory które sprawdziłem wypluwały mi pojedyncze czcionki w WOFF2 z mojego pakietu… Czyli cały manewr kompletnie bez sensu… Wtedy zrozumiałem! Variable Fonts to zupełnie coś innego niż mi się wydaje!

Wnioski

Zabawa z różnymi narzędziami do czcionek i powyższy proces zajął mi niemal całe popołudnie. Jakie wyciągnąłem wnioski?

Czytaj ze zrozumieniem. Nie wyciągaj wniosków zbyt szybko 🙂
Nie ma tego złego. Pogłębiłem swoją wiedzę na temat czcionek i zainstalowałem Pythona do fonttools’a.

Czym są Variable Fonts?

Są specjalne pakiety czcionek przygotowywane aby spełnić swoje zadanie 🙂 Google lansuje tą metodę gdzie łączymy czcionki w jeden pakiet a potem animujemy za pomocą CSS.

Sprawdź przykładowy pakiet dla czcionki Roboto. Składa się on z jednego pliku .ttf ważącego 2,74MB i zawiera w sobie 20 czcionek z tej rodziny. Przeciętna czcionka dla tej rodziny waży ok. 175KB więc taki pakiet powinien ważyć ok. 3,5MB więc trochę oszczędzamy…

Ale ale 🙂 Jak przekonwertuje to do WOFF2 to mam już tylko 1,1MB a do dyspozycji 20 styli czcionek! Prawdziwy wypas!

Jak używać Variable Fonts?

Zwyczajnie 🙂 Tak jak wszystkich innych:

@font-face {
    font-family: Roboto;
    src: url('./Roboto-min-VF.woff2');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: Roboto;
    font-variation-settings: 'wdth' 200, 'wght' 400;
}

Parametry czcionek względem poszczególnych osi można definiować za pomocą  font-variation-settings. Niestety ta właściwość nie ma wsparcia na IE:

Ale w sumie luz bo można edytować parametry za pomocą bardziej standardowych właściwości CSS tzn. font-stretch, font-weight czy font-style.

Animacja czcionek

Teraz bardzo łatwo można animować czcionki np. płynnie zmieniać grubość czy szerokość. Miej na uwadze, że właściwości czcionek w CSS są renderowane w fazie Layoutu więc animowanie ich jest mało wydajne.

Jakie są minusy Variable Fonts?

Największym jest to, że ciągle ładujemy te 20 styli a nie np. te 5 których potrzebujemy. Jeżeli byłby prosty sposób na wyselekcjonowanie tylko tego co Ci potrzeba z tego pakietu… Jeżeli chcesz to zawsze możesz stworzyć własny Variable Font 🙂

Co jeszcze?

Istnieje jeszcze taka wielka paka czcionek o nazwie Noto.

Podsumowanie

To było a tyle jeśli chodzi o ten artykuł. Dzisiaj się dowiedziałeś/aś dużo na temat czcionek w aplikacjach:

  1. Już wiesz czym jest typografia
  2. Potrafisz dobrać czcionki do projektu
  3. Znasz podstawowe rodzaje plików czcionek i potrafisz je swobodnie konwertować
  4. Wiesz jak optymalnie używać czcionek w aplikacji
  5. Poznałeś/aś Variable Fonts i wiesz jak sobie z nimi radzić

Mam nadzieję, że podobał Ci się ten wpis! Jak gdzieś walnąłem jakąś gafę czy coś to napisz w komentarzu. Do następnego 🙂

Podziel się z innymi 🙂

Cześć jestem Bartek.

Na tym blogu wprowadzę Cię w tajniki Front-Endu i programowania webowego.

Warto
Social media & sharing icons powered by UltimatelySocial