Değişken yazı tiplerine taşıma

1. Giriş

Son Güncelleme: 11.05.2022

269e1597309e5d7a.png

Değişken yazı tipleri sayesinde kullanıcı arayüzünüzde dinamik çeşitlilik elde edin. Bu sayede, düzenlerde, temalarda ve erişilebilirlikte daha fazla duyarlılığa sahip olurken uygulamalarınızı daha da hızlandırabilirsiniz.

Neler öğreneceksiniz?

  • Değişken yazı tipleri nedir?
  • Bu öğelerle yazı tipini nasıl özelleştirebileceğinizi öğrenin.
  • Değişken yazı tiplerini tasarımlarınıza uygulama.
  • Değişken yazı tiplerini Google Fonts API ile ve CSS'de uygulama.

Ön koşullar

Bu laboratuvarda bazı temel tasarım kavramlarını ele alacağız.

  • Yazı tipi ölçekleri hakkında bilgi sahibi olmak.
  • Figma hakkında bilgi sahibi olma
  • HTML ve CSS hakkında temel düzeyde bilgi

İhtiyacınız olanlar

2. Başlayın

Kurulum

Başlamak için Designlab Figma dosyasına erişmeniz gerekir. Laboratuvar için ihtiyacınız olan her şey Figma dosyasındadır. Dosyayı indirip içe aktarabilir veya Figma topluluğundan kopyalayabilirsiniz.

Öncelikle Figma'da oturum açın veya hesap oluşturun.

Figma Topluluğu'ndan kopyala

Değişken yazı tiplerine geçme dosyasına gidin veya Figma Topluluğu'nda Değişken yazı tiplerine geçmeyi arayın. Dosyayı dosyalarınıza kopyalamak için sağ üst köşedeki Kopyala'yı tıklayın.

2cb1a5f77aab6012.png

Dosya düzeni

Dosyayı incelerken, dosyanın bir girişle başlayan bağımsız bir dosya olduğunu fark edin. Her bölüm, birbirine bağlı birer artboard satırına ayrılmıştır. Bu bölümlerde, bölümle ilgili bazı temel kavramlar ve ardından alıştırmalar yer alır. Bölümler ve alıştırmalar birbirini temel alır ve sırayla tamamlanmalıdır.

Bu kod laboratuvarı, bu kavramlar ve alıştırmalar hakkında daha ayrıntılı bilgi sağlar. Yeni Material You özellikleri hakkında daha fazla bilgi edinmek için codelab'i okuyun.

Giriş resim tahtasından başlayarak resim tahtalarını sırayla birbirine bağlayan düğmeler bulunur. Bağlantıya erişmek için düğmeyi tıklayın.

289defd9d067d2f0.png

Değişken yazı tipi olup olmadığını kontrol etme

Başlamadan önce değişken bir yazı tipimiz olduğundan emin olmamız gerekiyor. Bu dosyada, Figma'da zaten mevcut olan Roboto Flex kullanılmaktadır. Roboto Flex'i fonts.google.com adresinden de indirebilirsiniz.

3. Değişken yazı tipleri nedir?

Değişken yazı tipleri, kullanıcıların yazı tipi ve simgeleri üzerinde kontrol sahibi olmasını sağlayan yeni ve yenilikçi bir yazı tipi biçimidir. Roboto Serif ve Roboto Flex, değişken yazı tipi teknolojisi için yeni tasarlanmış, her biri çok çeşitli eksenlere sahip yeni yazı tipleridir. 64c74a7d7844423.png

Estetik ifade ve eksenler

Tasarımcılar artık normal, kalın, italik gibi eski sabit stillerle sınırlı değil. Değişken yazı tiplerindeki değişkenler eksenler veya örnekler tarafından kontrol edilir. Tür tasarımcısı isterse tür tasarımındaki herhangi bir değişken kullanıcı tarafından kontrol edilebilen bir eksene atanabilir. Yaygın eksenler arasında italik, optik boyut, eğiklik, kalınlık ve genişlik bulunur. Bu beş eksen, CSS'de kayıtlı eksenlerdir.

Avantajları

Değişken yazı tipleri, tek bir yazı tipi dosyasında birden fazla stil sunmanıza olanak tanır. Böylece web siteleri daha sürdürülebilir, daha küçük ve daha hızlı hale gelir. Ayrıca tasarımcıya daha fazla ifade gücü sunar.

77346d3812d79acc.png

4. Tasarımda değişken yazı tiplerini kullanma

Eksenleri değiştirme

Kullanabileceğimiz tüm parametreleri (veya eksenleri) ve bunların etkilerini inceleyelim. Eksen kaydırma çubuklarını açmak için sağ taraftaki türü seçin ve Tür Ayrıntıları modunu (üç nokta simgesi) açın. Ardından her parametreyi inceleyin.

  1. Kalınlık, bir harfin kalınlığını tanımlar. Tam ve kesintisiz bir çizgi kalınlığı aralığı sağlar.

5f18f2f50f6dc4da.gif

  1. Genişlik, bir yazı tipinin karakterlerinin kapladığı yatay alanın sonucudur.

dddc87cccfcb47f9.gif

  1. Yazı stilini dik yerine eğik olarak ayarlayın. Yazı tipleri uzmanları bu stili "eğik" olarak da bilir. Nadir olmakla birlikte, Eğik diğer yönde de kullanılabilir. Buna "geri eğik" veya "ters eğik" stil denir.

1b7fbf03fcbf16dc.gif

  1. Sınıf, bir yazı tipinin optik ağırlığının ikincil bir değiştiricisidir ve Ağırlık ekseninden bağımsızdır. Hem Kalınlık hem de Sınıf, bir harfin kalınlığını etkiler ancak Sınıf ile yapılan ayarlamalar çok daha ayrıntılıdır.

35705cb05c8df559.gif

  1. Optik Boyut. Stili, puan cinsinden belirtilen belirli metin boyutlarına uyarlayın. Daha küçük boyutlarda harfler genellikle daha okunaklı olması için optimize edilir. Bu optimizasyonda, harflerin aralıkları/kerning'i artırılır ve daha kalın harf vuruşları kullanılır. Daha büyük boyutlarda harfler genellikle daha ince çizgiler ve daha ayrıntılı biçimler, daha uç ağırlıklar ve genişlikler içeren başlıklar için optimize edilir.

ed569d469ebd40d6.gif

Figma dışında değişken yazı tipi eksenleriyle oynamak için Değişken Yazı Tipleri demosuna göz atın.

5. Tarzınızı öne çıkarın

Marka stil kılavuzu kullanıyorsanız yazım kısıtlamalarını bildirmek için belirlenmiş bir yazı tipi ölçeğiniz olabilir. Değişken yazı tipleri kullanmak, bu tutarlılığı bir kenara atmak anlamına gelmez. Tek bir dosya içinde yazı ölçeği esnekliğinizde daha da hassas ayar yapmanıza olanak tanır (koyu arka planlarda notun ağırlığını artırma gibi kullanım alanları için).

ecb7c0b0056fc315.png

Bir yazı tipi ölçeği birden fazla yazı tipi ailesinden oluşabilir. Ancak burada, Material varsayılan yazı tipi ölçeğinin sıkıştırılmış bir sürümünü özelleştirmek için yalnızca bir yazı tipi ailesi kullanacağız.

  1. Yazı ölçeğini, gövde metniyle özelleştirmeye başlayalım. Bu sayede, önce sitenin temel yazı tipi boyutunu ayarlayabilir ve oradan optik olarak ayarlama yapabiliriz. Büyük gövde için varsayılan değer 18 puntodur. Bu değer Roboto Flex olarak seçili ve ayarlıdır. Daha okunaklı olması için ayarlama yapmak eskiden yazı tipi boyutunu ve ağırlığını güncellemek anlamına geliyordu. Bu da başka bir yazı tipi dosyası anlamına geliyordu. Ancak artık bazı eksenlerde ince ayar yapabiliyoruz. Optik boyutu, notu ve ağırlığı ayarlayın.
  2. Etiket'e gidin. Etiketler daha işlevseldir ve düğmeler gibi daha kısa ve küçük bağlamlarda kullanılır. Etiketin düğme kapsayıcılarında ve çiplerde doğru şekilde görünmesi için notu optik olarak ayarlayın.
  3. Başlık, Başlık ve Görünen seçeneklerini kullanarak düzenlemeye devam edin. Her üçü de sayfa başlıkları ve bölümler gibi orta ve yüksek düzeyde vurgu gerektiren kısa metinler için kullanılır. Başlık ve Görüntülü, boyutları ve yüksek vurguları nedeniyle daha etkileyici olabilir. Buradaki tüm eksenlerle dilediğiniz gibi oynayabilirsiniz.
  4. Tür seçiliyken 4 noktayı tıklayın ve metin stili ayarlamak için (+) işaretini ekleyin. Bu işlem, tutarlı ve yeniden kullanılabilir yazı tipi ayarları sağlar.

Varsayılan materyal türü ölçeğini, Material Theme Builder ile veya M3 tasarım kitini kopyalayarak Figma stilleri olarak oluşturabilirsiniz.

6. Kullanıcı arayüzüne uygulanır.

Türü ölçeklendirdikten sonra, kodun içine uygulamak için kullanıcı arayüzü öğelerine uygulayalım. Değişken yazı tiplerini kullanarak daha etkileyici ve okunaklı içerikler oluşturabilirsiniz. Son alıştırmada Figma stilleri oluşturduysanız bunları uygulayabilir ve ardından stilin eksenlerini güncelleyebilirsiniz.

18efaa2c7bc6ecac.png

  1. Soldaki kullanıcı arayüzü öğelerine göz atın. İlk kartta bitki türü, açıklama ve bazı kategori etiketleri bulunur. Diğer kartlarda ise bitki bakımı talimatları açıklanır. Bitki türü, yüksek öneme sahip bir rol olarak anlamlı olduğundan "başlık" stilimizi kullanın. Daha önce başlık olarak ayarladığımız değere ayarlayın. Bakım kartlarının da bir başlığı vardır ancak aynı öneme sahip değildir. Bu nedenle, bakım kartlarını "title" olarak ayarlayın.
  2. Bitki ayrıntısı ve talimat metni "body large", kategori etiketleri ise "label large" olarak atanabilir.
  3. Farklı rollerle denemeler yapın ve doğru dengeyi bulmak için kullanıcı arayüzü öğelerini ve yazı ölçeğinizi ayarlayın.

f646755b99db0161.png

7. Kodda uygulama

789408aab925944f.png

Değişken yazı tiplerini CSS ile koda uygulamak, yazı tipini yüklemek ve CSS özellikleriyle özelleştirmek için yazı tipi yayınlama hizmeti kullanan herhangi bir web yazı tipiyle benzer bir yöntemdir.

Uygulama için MWC veya herhangi bir çerçeve yerine temel HTML ve CSS'yi kullanacağız.

Google Fonts'taki değişken yazı tipleri

Değişken yazı tipleri de dahil olmak üzere web sitenize birçok yazı tipini kolayca uygulamak için yazı tipi yayınlama hizmetiniz olarak Google Fonts'u kullanın.

fonts.google.com adresine giderek hangi değişken yazı tiplerinin kullanılabileceğini keşfedin. Filtrelemek için aramanın altında Yalnızca değişken yazı tiplerini göster'i işaretleyin. Değişken yazı tipleri, sayfanın alt kısmında ailede bulunan her eksen için kaydırma çubuklarını ayarlayabileceğiniz bir oyun alanı içerir.

9ecb4721afd8faa2.png

CSS ile stil uygulama

Tüm yazı tiplerinde özelleştirilebilecek aynı sayıda eksen yoktur. Şu anda en yaygın olanlar Kalınlık, Genişlik, Eğik, İtalik ve Optik Boyut'tur.

Bunlar, değişken yazı tiplerinden önce var olan temel CSS yazı tipi özellikleriyle ayarlanabilir. Her şey henüz yaygın olarak desteklenmese de (Mayıs 2022 itibarıyla), tüm eksenler yeni font-variation-settings mülkü kullanılarak güvenilir bir şekilde ayarlanabilir.

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

*Yazı tipi stilindeki Eğik (slnt) ve İtalik (ital) güvenilir değildir.

8. Google Fonts API ile içe aktarma

Yalnızca Roboto'yu kullanıyorduk ancak şu anda fonts.google.com adresinde kullanabileceğimiz tüm yazı tiplerine göz atabilirsiniz.

Kodlab'ın geri kalanında Roboto'yu kullanacağız ve aşağıdaki kartlardaki yazı tipini önceki alıştırmamıza göre özelleştireceğiz.

  1. Kart örnek kullanıcı arayüzünü içeren bu kodu, tercih ettiğiniz web IDE'nize kopyalayın.
<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>
  1. Son alıştırmada başlık, başlık, gövde ve etiket için belirlediğimiz stil özelliklerini not edin. Bu bilgilerle Roboto Flex sayfasına gidin. Kaydırıcıları Figma'da belirlediğiniz özelliklere uyacak şekilde ayarlayın ve ardından her birinin yan çekmeceye eklenmesi için Bu stili seçin'i tıklayın.
  2. Çekmecede, seçili stillerin altında Web'de kullan'ı bulun. Yazı tipini kodunuza eklemenin iki yolu vardır: <link> veya @import. Yalnızca bir tane seçmeniz gerekir. @import'ı seçelim.
  3. @import'ten noktalı virgüle kadar olan kısmı kopyalayıp içe aktarma yorumundan sonra stil etiketleri arasına yapıştırın.
  4. Kullanılan tek yazı tipi Roboto Flex olduğundan, içe aktarma kodunun altına "aileleri belirtmek için CSS kuralları"nı ekleyerek body öğesini font-family'yi çağıracak şekilde ayarlayın.
body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

Bu işlem, seçili yazı tipini ve stil grubunu içe aktarır ancak eksen aralıkları kullanmak, tek tek stiller yerine sürekli stil aralığını kullanmanıza olanak tanır. Aralık oluşturmak için iki değeri .. ile birleştirin (ör. 100..900). Yalnızca yazı tipinin kaydırma çubuklarında bulunan aralıkları eklediğinizden emin olun. Aksi takdirde yazı tipi düzgün şekilde yüklenmez.

Bu seçenek, tam aralıkta yüklenerek indirme isteğini büyüttüğü için en iyi şekilde pürüzsüz animasyon geçişleri ve tarayıcıda deneme yapmak için kullanılır.

9. CSS değişken yazı tipi özellikleri

Yazı tipiniz içe aktarıldıktan sonra, stil verilecek bazı CSS özelliklerini almak için Figma'ya geri dönelim ve font-variation-settings CSS özelliğine göz atalım.

  1. Sağ panelde başlıkların h1 seçili olmasından başlayarak en üstteki İncele sekmesini seçin. Bu işlem, paneli geliştirici aktarımı için kod inceleme moduna geçirir. Kod, son bölümdür.
  2. Henüz yapmadıysanız biçimi açılır menüden CSS olarak değiştirin. Kullanılıyorsa standart özellikler listelenir (font-weight, font-stretch, font-style, font-optical-sizing), ardından kayıtlı olmayan özel eksenleri içeren düşük düzey font-variation-settings gelir. font-variation-settings özelliğine geçmeden önce standart özellikleri kullanın.

Figma, font-stretch yerine genişlik (wdth) için font-variation-settings kullanır.

62fbb715711beb75.png

  1. h1 seçicimize stil uygulamak için türle ilgili bu CSS kodunu kopyalayın.
h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}
  1. Bakım kartı başlığının stili h2 alanına kopyalanabilir. Ana metin için de aynı işlemi yapın ve p alanına kopyalayın. Etiket stilleri .label

73252104c94e2053.png

10. Tebrikler

62930ad88ed65971.png

Değişken yazı tiplerini kullanmaya başlamanız, bunları tasarımlarınızda nasıl kullanacağınızı öğrenmeniz ve web'de uygulamanız harika.

Sorularınız varsa Twitter'daki@MaterialDesign hesabını kullanarak dilediğiniz zaman bize ulaşabilirsiniz.

Daha fazla tasarım içeriği ve eğitim için youtube.com/MaterialDesign adresini takip edin.