Migracja do czcionek zmiennych

1. Wprowadzenie

Ostatnia aktualizacja: 05/11/22

Wykorzystaj dynamiczną zmienność w interfejsie użytkownika dzięki czcionkom zmiennym, które zapewniają większą elastyczność układów, motywów i ułatwień dostępu, a jednocześnie przyspieszają działanie aplikacji.

Czego się nauczysz

czym są czcionki zmienne;
Jak dostosowywać typy za ich pomocą.
Jak stosować czcionki zmienne w projektach.
Jak wdrożyć czcionki zmienne za pomocą interfejsu Google Fonts API i w CSS.

Wymagania wstępne

W tym laboratorium wykorzystamy podstawowe koncepcje projektowania.

Znajomość skal typograficznych.
Znajomość Fignmy.
Podstawowa znajomość języków HTML i CSS.

Czego potrzebujesz

Konto Figma
Plik Figma Designlab
Wybrany edytor kodu na potrzeby internetu

2. Rozpocznij

Konfiguracja

Aby rozpocząć, musisz uzyskać dostęp do pliku Designlab Figma. Wszystko, czego potrzebujesz do tego laboratorium, znajdziesz w pliku Figma. Możesz pobrać i zaimportować plik lub skopiować go ze społeczności Figma.

Najpierw zaloguj się w Figmie lub utwórz konto.

Duplikowanie z Figma Community

Otwórz plik Przechodzenie na czcionki zmienne lub wyszukaj go w Figma Community. W prawym górnym rogu kliknij Duplikuj, aby skopiować plik do swoich plików.

Układ pliku

Przeglądając plik, zauważysz, że jest on samodzielny i zaczyna się od wprowadzenia. Każda sekcja jest podzielona na wiersz połączonych ze sobą obszarów roboczych. Zawiera podstawowe koncepcje dotyczące sekcji, a następnie ćwiczenia. Sekcje i ćwiczenia są ze sobą powiązane i należy je wykonywać po kolei.

W tym ćwiczeniu znajdziesz szczegółowe wyjaśnienia tych pojęć i ćwiczenia. Więcej informacji o nowych funkcjach Material You znajdziesz w tym ćwiczeniu w Codelabs.

Na tablicy Intro znajdują się przyciski, które łączą tablice w odpowiedniej kolejności. Aby otworzyć link, kliknij przycisk.

Sprawdzanie, czy czcionka jest zmienna

Zanim zaczniemy, musimy się upewnić, że mamy czcionkę zmienną. Ten plik korzysta z czcionki Roboto Flex, która jest już dostępna w Figma. Możesz też pobrać ją ze strony fonts.google.com.

3. Czym są czcionki zmienne?

Czcionki zmienne to nowy, innowacyjny format czcionek, który pozwala użytkownikom kontrolować typ i ikony. Roboto Serif i Roboto Flex to nowe kroje pisma stworzone z myślą o technologii czcionek zmiennych. Każdy z nich ma szeroki zakres osi.

Wyrażenia estetyczne i osie

Projektanci nie są już ograniczeni do starszych, sztywnych stylów, takich jak zwykły, pogrubiony, kursywa itp. Zmienne w czcionkach zmiennych są kontrolowane przez osie lub instancje. Jeśli projektant czcionki tak zdecyduje, do osi kontrolowanej przez użytkownika można przypisać dowolną zmienną w projekcie czcionki. Typowe osie to kursywa, rozmiar optyczny, pochylenie, grubość i szerokość. Te 5 osi jest zarejestrowanych w CSS.

Korzyści

Czcionki zmienne umożliwiają dostarczanie wielu stylów w jednym pliku czcionki, dzięki czemu strony internetowe są bardziej ekologiczne, mniejsze i szybsze, a projektant ma większą kontrolę nad ekspresją.

4. Używanie czcionek zmiennych w projektach

Zmienianie osi

Omówmy wszystkie dostępne parametry (lub osie) i ich wpływ. Wybierz typ po prawej stronie i otwórz okno szczegółów typu (ikona Więcej), aby otworzyć suwaki osi i przejrzeć każdy parametr.

Grubość określa grubość litery. Zapewnia pełny, ciągły zakres grubości pociągnięć.

Szerokość to wynik tego, ile miejsca w poziomie zajmują znaki danego kroju pisma.

Dostosuj styl z pionowego na pochylony, który typografowie nazywają „kursywą”. Chociaż rzadko, pochylenie może działać w drugą stronę, co nazywa się „pochyleniem wstecznym” lub „odwrotnym pochyleniem”.

Stopień to dodatkowy modyfikator optycznej grubości kroju pisma, który jest niezależny od osi grubości. Zarówno waga, jak i stopień wpływają na grubość litery, ale zmiany w przypadku stopnia są znacznie bardziej szczegółowe.

Rozmiar optyczny Dostosuj styl do określonych rozmiarów tekstu podanych w punktach. W mniejszych rozmiarach litery są zwykle optymalizowane pod kątem lepszej czytelności, z luźniejszym odstępem między znakami i większą grubością kresek z mniejszą liczbą szczegółów. W większych rozmiarach litery są zwykle zoptymalizowane pod kątem nagłówków z cieńszymi kreskami i bardziej szczegółowymi kształtami oraz bardziej ekstremalnymi grubościami i szerokościami.

Wypróbuj wersję demonstracyjną czcionek zmiennych, aby przetestować osie czcionek zmiennych poza Figmą.

5. Zwiększ swój styl

Jeśli korzystasz z przewodnika po stylu marki, możesz mieć ustaloną skalę typograficzną, która określa ograniczenia typograficzne. Używanie czcionek zmiennych nie oznacza rezygnacji z tej spójności. Zapewnia to większą elastyczność w zakresie skali typograficznej (w przypadkach użycia takich jak zwiększanie wagi na ciemnych tłach) w ramach jednego pliku.

Skala typograficzna może składać się z więcej niż jednej rodziny czcionek, ale w tym przypadku użyjemy tylko jednej, aby dostosować skróconą wersję domyślnej skali typograficznej Material.

Zacznijmy dostosowywać skalę typograficzną od tekstu podstawowego. Dzięki temu możemy najpierw ustawić podstawowy rozmiar czcionki w witrynie, a potem optycznie go dostosować. Domyślna wartość Body Large to 18 pt. Jest ona wybrana i ustawiona na Roboto Flex. Wcześniej dostosowanie czcionki do lepszej czytelności wymagało zmiany jej rozmiaru i grubości, co wiązało się z koniecznością użycia innego pliku czcionki. Teraz możemy precyzyjnie dostosowywać niektóre osie. Dostosuj rozmiar optyczny, stopień i grubość.
Kontynuuj przy użyciu etykiety. Etykiety są bardziej funkcjonalne i używane w krótszych, mniejszych kontekstach, np. w przypadku przycisków. Dostosuj optycznie odcień, aby etykieta była prawidłowo wyświetlana w kontenerach przycisków i elementach.
Dalej dopracowuj wyniki, korzystając z opcji Tytuł, Nagłówek i Wyświetlacz. Wszystkie 3 warianty są używane w przypadku krótszych tekstów o średnim lub wysokim znaczeniu, takich jak tytuły stron i sekcji. Nagłówek i wyświetlanie mogą być bardziej wyraziste ze względu na swój rozmiar i duże znaczenie. Możesz tu dowolnie zmieniać wartości na wszystkich osiach.
Po wybraniu typu kliknij 4 kropki i dodaj (+) styl tekstu, aby zapewnić spójne ustawienia typu wielokrotnego użytku.

Domyślną skalę typografii Material możesz wygenerować jako style Figmy za pomocą narzędzia Material Theme Builder lub przez zduplikowanie zestawu projektowego M3.

6. Stosowane do interfejsu

Po skonfigurowaniu skali typograficznej zastosuj ją do elementów interfejsu, aby zaimplementować ją w kodzie. Zastanów się, jak czcionki zmienne mogą zwiększyć wyrazistość i czytelność. Jeśli w ostatnim ćwiczeniu skonfigurujesz style w Figma, możesz je zastosować, a następnie zaktualizować osie stylu.

Spójrz na elementy interfejsu po lewej stronie. Pierwsza karta zawiera typ rośliny, opis i tagi kategorii, a pozostałe karty zawierają instrukcje dotyczące pielęgnacji rośliny. Typ rośliny ma sens jako rola o dużym znaczeniu, więc użyj naszego stylu „nagłówek”. Ustaw ją na nagłówek, który skonfigurowaliśmy wcześniej. Karty opieki mają też tytuł, ale nie są tak ważne, więc ustaw je jako „title”.
Szczegóły dotyczące rośliny i instrukcje można przypisać do stylu „body large”, a etykiety kategorii do stylu „label large”.
Eksperymentuj z różnymi rolami i dostosowuj elementy interfejsu oraz skalę typograficzną, aby znaleźć odpowiednią równowagę.

7. Implementacja w kodzie

Wdrażanie czcionek zmiennych w kodzie za pomocą CSS jest podobne do wdrażania dowolnej czcionki internetowej, która korzysta z usługi dostarczania czcionek do ładowania czcionki i dostosowywania jej za pomocą właściwości CSS.

Do implementacji użyjemy podstawowego kodu HTML i CSS, a nie MWC ani żadnej platformy.

Czcionki zmienne w Google Fonts

Używaj Google Fonts jako usługi dostarczania czcionek, aby w prosty sposób wdrażać w swojej witrynie wiele czcionek, w tym czcionki zmienne.

Aby sprawdzić, które czcionki zmienne są dostępne, wejdź na fonts.google.com. W sekcji wyszukiwania zaznacz pole Pokaż tylko czcionki zmienne, aby filtrować wyniki. Czcionki zmienne mają na dole strony obszar testowy, w którym możesz ustawić suwaki dla każdego z osi dostępnych w rodzinie czcionek.

Stylizowanie za pomocą CSS

Nie wszystkie czcionki mają taką samą liczbę osi, które można dostosować. Obecnie najpopularniejsze są warianty Weight, Width, Slant, Italic i Optical Size.

Można je ustawić za pomocą podstawowych właściwości czcionek CSS, które istniały przed wprowadzeniem czcionek zmiennych. Chociaż nie wszystko jest jeszcze powszechnie obsługiwane (stan na maj 2022 r.), wszystkie osie można niezawodnie ustawić za pomocą nowej właściwości font-variation-settings.

`Axes`	`Abbreviation`	`CSS property`
`Weight`	`wght`	`font-weight`
`Width`	`wdth`	`font-stretch`
`Slant`	`slnt`	`font-style*`
`Italic`	`ital`	`font-style*`
`Optical Size`	`opsz`	`font-optical-sizing`

*Wartości Slant (slnt) i Italic (ital) w atrybucie font-style nie są wiarygodne.

8. Importowanie za pomocą interfejsu Google Fonts API

Używaliśmy tylko czcionki Roboto, ale zobacz, ile czcionek jest teraz dostępnych na fonts.google.com.

W pozostałej części tego laboratorium będziemy używać czcionki Roboto. Na kolejnych kartach dostosujemy typ czcionki na podstawie poprzedniego ćwiczenia.

Skopiuj ten kod zawierający przykładowy interfejs karty do wybranego internetowego środowiska IDE.

<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */


/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {   
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>

Zwróć uwagę na specyfikacje stylu, które ustawiliśmy w ostatnim ćwiczeniu dla nagłówka, tytułu, treści i etykiety. Pamiętając o tym, otwórz stronę Roboto Flex. Ustaw suwaki tak, aby pasowały do specyfikacji ustawionych w Figma, a następnie kliknij Wybierz ten styl dla każdego z nich, aby dodać go do panelu bocznego.
W panelu pod wybranymi stylami poszukaj opcji Użyj w internecie. Czcionkę możesz dodać do kodu na 2 sposoby: za pomocą elementu <link> lub reguły @import. Wystarczy jeden, więc wybierzmy @import.
Skopiuj tekst od @import do średnika i wklej go w tagach stylu po komentarzu importu.
Ponieważ używana jest tylko czcionka Roboto Flex, ustaw treść tak, aby wywoływała rodzinę czcionek, dodając „reguły CSS do określania rodzin”, które są zawarte w kodzie importu.

body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

Spowoduje to zaimportowanie wybranej czcionki i zestawu stylów, ale użycie zakresów osi umożliwi korzystanie z ciągłego zakresu stylów zamiast poszczególnych stylów. Aby utworzyć zakres, połącz 2 wartości za pomocą symbolu .. (np. 100..900). Dodawaj tylko zakresy, które znajdują się na suwakach czcionki. W przeciwnym razie czcionka nie wczyta się prawidłowo.

Najlepiej używać go w przypadku płynnych przejść animacji i eksperymentowania w przeglądarce, ponieważ wczytuje pełny zakres i zwiększa rozmiar żądania pobierania.

9. Właściwości czcionki zmiennej CSS

Po zaimportowaniu czcionki wróćmy do Figmy, aby pobrać niektóre właściwości CSS do stylizacji, i przyjrzyjmy się font-variation-settings właściwości CSS.

Zacznij od wybrania h1 nagłówków w panelu po prawej stronie, a następnie u góry kliknij kartę Zbadaj. Panel przełączy się w tryb sprawdzania kodu, który ułatwia przekazywanie projektu deweloperom. Kod to ostatnia sekcja.
Jeśli jeszcze tego nie zrobiono, zmień format menu na CSS. Wymienione są atrybuty standardowe (font-weight, font-stretch, font-style, font-optical-sizing), a następnie atrybuty niskiego poziomu font-variation-settings, które zawierają niezarejestrowane osie niestandardowe. Najpierw użyj atrybutów standardowych, a dopiero potem atrybutu font-variation-settings.

Figma używa ustawień wariantu czcionki (font-variation-settings) dla szerokości (wdth) zamiast rozciągania czcionki (font-stretch).

Skopiuj ten kod CSS związany z typem, aby nadać styl selektorowi h1.

h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}

Styl tytułu karty opieki można skopiować do elementu h2. To samo zrób z tekstem głównym, kopiując go do pola p. Style etykiet można kopiować do .label

10. Gratulacje

Świetnie, że korzystasz z czcionek zmiennych, wiesz, jak ich używać w projektach, i wdrażasz je w internecie.

Jeśli masz pytania, możesz je zadać w każdej chwili na @MaterialDesign na Twitterze.

Więcej treści i samouczków dotyczących projektowania znajdziesz na youtube.com/MaterialDesign