Melakukan migrasi ke Font variabel

1. Pengantar

Terakhir Diperbarui: 04/04/22

Buat variabilitas dinamis di UI Anda dengan font variabel. Font ini akan meningkatkan responsivitas tata letak, tema, dan aksesibilitas sekaligus membuat aplikasi Anda beroperasi lebih cepat.

Yang akan Anda pelajari

Pengertian font variabel.
Cara menyesuaikan huruf dengan font variabel.
Cara menerapkan font variabel ke desain Anda.
Cara mengimplementasikan font variabel dengan Google Fonts API dan di CSS.

Prasyarat

Untuk lab ini, kita akan menggunakan beberapa konsep desain dasar.

Pengetahuan tentang skala huruf.
Pengetahuan tentang Figma.
Pengetahuan dasar tentang HTML dan CSS.

Yang akan Anda butuhkan

Akun Figma
File Figma Designlab
Editor kode pilihan untuk web

2. Memulai

Penyiapan

Untuk memulai, Anda harus mengakses file Figma Designlab. Semua yang Anda perlukan untuk mengikuti lab tersedia di file Figma. Anda dapat mendownload dan mengimpor file atau menduplikasinya dari Figma Community.

Pertama, login ke Figma atau buat akun.

Menduplikasi file dari Figma Community

Buka file Migrating to Variable fonts atau telusuri Migrating to Variable fonts di Figma Community. Klik Duplicate di pojok kanan atas untuk menyalin file tersebut ke dalam file Anda.

Tata letak file

File yang Anda pelajari berisi sejumlah materi khusus yang dimulai dengan pengantar. Setiap bagian dibagi menjadi deretan artboard yang saling ditautkan, yang berisi beberapa konsep inti untuk bagian terkait dan diikuti dengan latihan. Setiap bagian dan latihan yang menyertainya bersifat saling melengkapi dan harus diselesaikan secara berurutan.

Codelab ini memandu Anda memahami konsep dan latihan tersebut secara lebih mendetail. Baca materi tersebut sambil mengikuti codelab untuk mempelajari lebih lanjut fitur Material You yang baru.

Dimulai dengan artboard Pengantar, terdapat tombol yang menautkan artboard secara berurutan. Untuk mengakses link, klik tombol tersebut.

Memeriksa font variabel

Sebelum memulai, kita harus memastikan bahwa font variabel sudah tersedia. File ini menggunakan Roboto Flex, yang sudah tersedia di Figma, atau Anda dapat mendownloadnya dari fonts.google.com

3 Apa yang dimaksud dengan font variabel?

Font variabel adalah format font inovatif baru yang memungkinkan pengguna mengontrol huruf dan ikonnya. Roboto Serif dan Roboto Flex adalah jenis huruf baru yang dibuat perdana untuk teknologi font variabel, masing-masing dengan berbagai sumbu.

Sumbu dan ekspresi estetik

Gaya yang digunakan desainer tidak lagi terbatas pada gaya font bawaan yang lama, seperti reguler, tebal, miring, dll. Variabel dalam font variabel dikontrol oleh sumbu atau instance. Saat desainer memilih suatu jenis huruf, variabel apa pun dalam desain huruf dapat ditetapkan ke sumbu yang dapat dikontrol pengguna. Sumbu umum mencakup miring, ukuran optik, landai, ketebalan, lebar. Kelima sumbu ini adalah sumbu yang terdaftar di CSS.

Manfaat

Dengan font variabel, Anda dapat menghadirkan beberapa gaya dalam satu file font, sehingga menjadikan situs lebih berkelanjutan, lebih kecil, dan lebih cepat, serta memberi desainer kontrol yang lebih ekspresif.

4. Menggunakan font variabel dalam desain

Mengubah sumbu

Mari kita pelajari semua parameter (atau sumbu) yang tersedia dan efeknya. Pilih huruf di sebelah kanan dan buka modal Detail Huruf (ikon lainnya) untuk membuka penggeser sumbu, lalu lihat setiap parameter.

Ketebalan menentukan tingkat ketebalan huruf. Parameter ini memberikan rangkaian ketebalan goresan yang utuh dan berkelanjutan.

Lebar adalah hasil dari besaran ruang horizontal yang digunakan oleh karakter jenis huruf.

Sesuaikan gaya dari tegak ke landai, yang juga dikenal sebagai gaya 'oblique' di dunia tipografi. Meskipun jarang, gaya Landai dapat dimiringkan ke arah belakang, yang disebut gaya 'backslanted' atau 'reverse oblique'.

Gradasi adalah pengubah sekunder ketebalan optik jenis huruf dan tidak bergantung pada sumbu Ketebalan. Ketebalan dan Gradasi memengaruhi ketebalan huruf, tetapi penyesuaian dengan Gradasi bersifat lebih terperinci.

Ukuran Optik. Sesuaikan gaya ke ukuran teks tertentu, yang ditentukan dalam sejumlah titik. Pada ukuran yang lebih kecil, huruf biasanya dioptimalkan agar lebih mudah dikenali, dengan spasi/kerning yang longgar dan goresan yang lebih tebal dengan lebih sedikit detail. Pada ukuran yang lebih besar, huruf biasanya dioptimalkan untuk judul utama dengan guratan yang lebih tipis dan bentuk yang lebih detail, serta ketebalan dan lebar yang lebih mencolok.

Lihat demo Font Variabel untuk berkreasi dengan sumbu font variabel di luar Figma.

5. Meningkatkan variasi gaya

Jika menggunakan panduan gaya brand, Anda mungkin memiliki skala huruf yang telah ditetapkan sebagai dasar batasan tipografi. Menggunakan font variabel tidak berarti mengesampingkan aspek konsistensi ini. Font variabel memberikan penyesuaian lebih lanjut dalam fleksibilitas skala huruf Anda (untuk kasus penggunaan seperti meningkatkan ketebalan pada gradasi di latar belakang gelap) dalam satu file.

Meskipun skala huruf dapat terdiri dari lebih dari satu jenis font, di sini kita hanya akan menggunakan satu jenis font untuk menyesuaikan versi ringkas dari skala huruf default Material.

Mari kita mulai menyesuaikan skala huruf pada teks isi. Dengan begitu, kita dapat menetapkan ukuran huruf dasar situs terlebih dahulu dan melakukan penyesuaian secara optik dari sana. Ukuran default untuk Body Large adalah 18 pt, yang dipilih dan ditetapkan ke Roboto Flex. Untuk meningkatkan keterbacaan, sebelumnya penyesuaian mengharuskan pembaruan ukuran dan ketebalan font, sehingga diperlukan file font lain. Namun, kini kita dapat melakukannya dengan menyesuaikan beberapa sumbu. Sesuaikan ukuran optik, gradasi, dan ketebalan.
Lanjutkan dengan Label. Label lebih praktis dan digunakan dalam konteks yang lebih kecil dan singkat, seperti tombol. Sesuaikan gradasi secara optik agar label dapat muncul dengan benar pada penampung dan chip tombol.
Lanjutkan penyesuaian pada bagian Judul, Judul Utama, dan Tampilan. Ketiganya digunakan untuk teks dengan penekanan lebih sedikit, sedang hingga tinggi, seperti judul dan bagian halaman. Judul Utama dan Tampilan dapat lebih ekspresif karena ukuran dan tingkat penekanannya yang tinggi. Jangan ragu untuk berkreasi dengan semua sumbu di sini.
Setelah memilih huruf, klik 4 titik dan tambahkan (+) untuk menetapkan gaya teks, yang memastikan setelan huruf dapat digunakan kembali secara konsisten.

Anda dapat membuat skala huruf Material default sebagai gaya Figma dengan Builder Tema Material, atau dengan menduplikasi kit desain M3.

6. Menerapkan ke UI

Setelah menyiapkan skala huruf, mari kita terapkan ke elemen UI untuk diimplementasikan dalam kode. Pertimbangkan berbagai cara penggunaan font variabel untuk menambahkan tingkat kejelasan dan keunikan. Jika Anda telah menyiapkan gaya Figma pada latihan terakhir, gaya tersebut dapat diterapkan, lalu perbarui sumbu gaya.

Lihat elemen UI di sebelah kiri. Kartu pertama berisi jenis tanaman, deskripsi, dan beberapa tag kategori, sedangkan kartu lainnya menjelaskan petunjuk perawatan tanaman. Karena jenis tanaman cocok untuk diberikan penekanan tinggi, sebaiknya gunakan gaya 'judul utama'. Tetapkan kartu ini ke gaya yang sebelumnya kita siapkan sebagai judul utama. Kartu perawatan juga memiliki judul, tetapi tidak memiliki penekanan yang sama. Jadi, tetapkan kartu tersebut ke gaya 'judul'.
Detail tanaman dan teks petunjuk dapat ditetapkan ke 'body large', sedangkan label kategori ditetapkan ke 'label large'.
Lakukan eksperimen dengan berbagai peran dan sesuaikan elemen UI serta skala huruf untuk menemukan keseimbangan yang tepat.

7. Mengimplementasikan dalam kode

Mengimplementasikan font variabel dalam kode dengan CSS adalah metode yang mirip dengan font web apa pun yang menggunakan layanan penayangan font untuk memuat font dan melakukan penyesuaian dengan properti CSS.

Kita akan menggunakan HTML dan CSS dasar untuk implementasi, bukan MWC atau framework khusus.

Font variabel di Google Fonts

Gunakan Google Fonts sebagai layanan penayangan font Anda untuk mempermudah proses implementasi berbagai jenis font, termasuk font variabel, di situs Anda.

Jelajahi font variabel yang tersedia dengan membuka fonts.google.com. Di bagian penelusuran, centang Hanya tampilkan font variabel untuk memfilter. Font variabel menyertakan playground di dekat bagian bawah halaman tempat Anda dapat menyetel penggeser untuk setiap sumbu yang tersedia di jenis font.

Menyesuaikan gaya dengan CSS

Tidak semua font memiliki jumlah sumbu yang sama yang dapat disesuaikan. Saat ini, Ketebalan, Lebar, Landai, Miring, dan Ukuran Optik adalah sumbu yang paling umum.

Sumbu ini dapat ditetapkan dengan properti font CSS dasar yang sudah ada sebelum font variabel. Meskipun semuanya belum didukung secara luas (per Mei 2022), semua sumbu dapat ditetapkan dengan andal menggunakan properti baru 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`

*Landai (slnt) dan Miring (ital) dalam properti font-style tidak dapat diandalkan.

8 Mengimpor dengan Google Fonts API

Sejauh ini kita hanya menggunakan Roboto. Namun, Anda dapat memeriksa semua font yang sekarang tersedia di fonts.google.com.

Kita akan tetap menggunakan Roboto hingga akhir codelab ini dan menyesuaikan huruf di kartu berikut berdasarkan latihan sebelumnya.

Salin kode ini yang berisi UI contoh kartu ke dalam IDE web pilihan Anda.

<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>

Catat spesifikasi gaya yang telah ditetapkan di latihan terakhir untuk judul utama, judul, isi, dan label. Dengan mempertimbangkan hal tersebut, buka halaman dan cari Roboto Flex. Setel penggeser agar sesuai dengan spesifikasi yang Anda tetapkan di Figma, lalu Pilih gaya ini untuk semuanya guna menambahkannya ke panel samping.
Di dalam panel samping, pada gaya yang dipilih, cari opsi Gunakan di Web. Ada dua cara untuk menambahkan font ke kode Anda: dengan <link> atau @import. Anda hanya memerlukan salah satunya. Jadi, mari kita pilih @import.
Salin dari @import hingga ke titik koma, lalu tempel ke dalam tag gaya setelah komentar impor.
Karena Roboto Flex adalah satu-satunya font yang digunakan, setel bagian isi untuk memanggil jenis font dengan menambahkan "Aturan CSS untuk menentukan jenis font" yang disertakan dalam kode impor.

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

Tindakan ini akan mengimpor font dan gaya yang dipilih, tetapi menggunakan rentang Sumbu memungkinkan Anda menggunakan rentang gaya yang berkelanjutan, bukan gaya tersendiri. Untuk membuat rentang, gabungkan dua nilai dengan .. (misalnya, 100..900). Pastikan Anda hanya menambahkan rentang yang ada di penggeser font. Jika tidak, rentang tersebut tidak akan dimuat dengan benar.

Cara ini paling tepat digunakan untuk menghasilkan transisi animasi yang lancar dan bereksperimen di browser, karena pemuatan ini dilakukan dalam rentang penuh dan membuat permintaan download lebih besar.

9. Properti font variabel CSS

Setelah font diimpor, mari kita kembali ke Figma untuk menarik beberapa properti CSS yang akan disesuaikan gayanya, dan perhatikan properti CSS font-variation-settings.

Dimulai dengan h1 judul utama yang dipilih di panel kanan, pilih tab Inspect di bagian atas. Tindakan ini mengalihkan panel ke mode pemeriksaan kode untuk handoff developer. Kode adalah bagian terakhir.
Jika Anda belum melakukannya, ubah format dropdown menjadi CSS. Atribut standar, jika digunakan, akan dicantumkan (font-weight, font-stretch, font-style, font-optical-sizing), diikuti dengan font-variation-settings tingkat rendah yang berisi sumbu kustom yang tidak terdaftar. Gunakan atribut standar terlebih dahulu, sebelum beralih ke font-variation-settings.

Figma menggunakan setelan font-variation untuk lebar (wdth), bukan font-stretch.

Salin kode CSS ini yang terkait dengan huruf untuk menyesuaikan gaya pada pemilih h1.

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

Gaya judul kartu perawatan dapat disalin ke h2. Lakukan hal yang sama untuk teks isi, yakni disalin ke p. Gaya label dapat disalin ke .label

10. Selamat

Anda telah bereksperimen dengan font variabel dengan baik, mempelajari cara menggunakannya dalam desain, dan mengimplementasikannya untuk web.

Jika ada pertanyaan, silakan hubungi kami kapan saja menggunakan @MaterialDesign di Twitter.

Nantikan konten desain dan tutorial lainnya di youtube.com/MaterialDesign