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

1. Giriş

Last Updated: 05/11/22

Değişken yazı tipleriyle kullanıcı arayüzünüzde dinamik değişkenliği benimseyin. Bu sayede uygulamalarınız daha hızlı çalışırken düzenler, temalar ve erişilebilirlik açısından daha fazla yanıt verebilirliğe sahip olursunuz.

Neler öğreneceksiniz?

Değişken yazı tiplerinin ne olduğu.
Bu yazı tipleriyle türü nasıl özelleştirebileceğiniz.
Tasarımlarınıza değişken yazı tiplerini uygulama
Google Fonts API ve CSS ile değişken yazı tiplerini uygulama

Ön koşullar

Bu laboratuvarda, bazı temel tasarım kavramlarını kullanacağız.

Ölçek türleri hakkında bilgi sahibi olmak.
Figma bilgisi
HTML ve CSS hakkında temel bilgi

İhtiyacınız olanlar

Figma Hesabı
Figma designlab dosyası
Web için tercih edilen kod düzenleyici

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ında yer almaktadır. Dosyayı indirebilir ve içe aktarabilir ya da Figma topluluğundan kopyalayabilirsiniz.

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

Figma Community'den kopyalama

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

Dosya düzeni

Dosyayı incelerken, girişle başlayan ve kendi içinde tutarlı bir dosya olduğunu fark edeceksiniz. Her bölüm, birbirine bağlı bir dizi çalışma yüzeyine ayrılır. Bölümle ilgili bazı temel kavramlar ve ardından alıştırmalar yer alır. Bölümler ve alıştırmalar birbirini tamamlar ve sırayla tamamlanmalıdır.

Bu codelab, söz konusu kavramlar ve alıştırmalar konusunda daha ayrıntılı bilgi sunar. Yeni Material You özellikleri hakkında daha fazla bilgi edinmek için codelab ile birlikte okuyun.

Intro (Giriş) adlı resim taslağından başlayarak, resim taslaklarını sırayla birbirine bağlayan düğmeler bulunur. Bağlantıya erişmek için düğmeyi tıklayın.

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

Başlamadan önce değişken bir yazı tipimizin olduğundan emin olmamız gerekir. Bu dosyada, Figma'da zaten mevcut olan Roboto Flex kullanılıyor. Dilerseniz dosyayı fonts.google.com adresinden de indirebilirsiniz.

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

Değişken yazı tipleri, kullanıcıların yazı tipleri 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 oluşturulmuş yazı tipleridir ve her biri geniş bir eksen aralığına sahiptir.

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. Yazı tipi tasarımcısı isterse yazı tipi tasarımındaki herhangi bir değişken, kullanıcı tarafından kontrol edilebilen bir eksene atanabilir. Sık kullanılan eksenler arasında italik, optik boyut, eğim, ağırlık ve genişlik yer alır. 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. Bu sayede web siteleri daha sürdürülebilir, daha küçük ve daha hızlı hale gelirken tasarımcıya daha fazla ifade kontrolü sağlanır.

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. Sağdaki türü seçin ve eksen kaydırıcılarını açmak için Tür Ayrıntıları kalıcı öğesini (daha fazla simgesi) açıp her bir parametreyi inceleyin.

Ağırlık, bir harfin kalınlığını tanımlar. Tam ve sürekli bir vuruş kalınlığı aralığı sağlar.

Genişlik, bir yazı karakterinin karakterlerinin ne kadar yatay alan kapladığının sonucudur.

Stili dikten eğik hale getirin. Bu stil, tipografi uzmanları tarafından "eğik" olarak da bilinir. Nadiren de olsa Eğik, "ters eğik" veya "ters eğimli" olarak adlandırılan diğer yönde de çalışabilir.

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

Optik Boyut. Stili, punto cinsinden belirtilen belirli metin boyutlarına uyarlayın. Daha küçük boyutlarda harfler genellikle daha fazla okunabilirlik için optimize edilir. Bu durumda, aralık/karakter aralığı genişler ve daha az ayrıntı içeren daha kalın vuruşlar kullanılır. Daha büyük boyutlarda harfler genellikle daha ince vuruşlar ve daha ayrıntılı şekillerle başlıklar için optimize edilir. Ayrıca daha belirgin ağırlıklar ve genişlikler kullanılır.

Figma dışında değişken yazı tipi eksenleriyle oynamak için Variable Fonts demo'ya göz atın.

5. Stilinizi geliştirme

Marka stil kılavuzuyla çalışıyorsanız tipografik kısıtlamaları belirlemek için oluşturulmuş bir tür ölçeğiniz olabilir. Değişken yazı tiplerini kullanmak, bu tutarlılığı bir kenara bırakmak anlamına gelmez. Tek bir dosya içinde, tür ölçeği esnekliğinizde (ör. koyu arka planlarda ağırlığı artırma gibi kullanım alanları için) daha fazla iyileştirme sağlar.

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

Metin gövdesiyle tür ölçeğini özelleştirmeye başlayalım. Bu sayede, sitenin temel tür boyutunu önce ayarlayabilir ve ardından görsel olarak düzenleyebiliriz. Body Large için varsayılan değer 18 punto olup Roboto Flex olarak seçilip ayarlanmıştır. Daha iyi okunabilirlik için yapılan ayarlamalar, yazı tipi boyutunun ve ağırlığının güncellenmesi anlamına geliyordu. Bu da başka bir yazı tipi dosyası gerektiriyordu. Ancak artık bazı eksenlerde ince ayar yapabiliyoruz. Optik boyutu, derecelendirmeyi ve ağırlığı ayarlayın.
Etiket ile devam edin. 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ünmesini sağlamak için derecelendirmeyi optik olarak ayarlayın.
Başlık, Başlık ve Görüntüleme ile iyileştirmeye devam edin. Üçü de sayfa başlıkları ve bölümler gibi orta ile yüksek düzeyde vurgu içeren kısa metinler için kullanılır. Başlık ve Görüntüleme, boyutları ve yüksek vurguları nedeniyle daha etkileyici olabilir. Buradaki tüm eksenlerle oynamaktan çekinmeyin.
Tür seçiliyken 4 noktayı tıklayın ve tutarlı, yeniden kullanılabilir tür ayarları sağlamak için artı işareti (+) ekleyerek metin stili belirleyin.

Varsayılan Material 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 uygulandı

Bir tür ölçeği ayarladığımıza göre, bunu kodda uygulamak için kullanıcı arayüzü öğelerine uygulayalım. Değişken yazı tiplerinin daha fazla ifade gücü ve okunabilirlik sağlamak için nasıl kullanılabileceğini düşünün. Son alıştırmada Figma stilleri oluşturduysanız bunları uygulayabilir ve ardından stilin eksenlerini güncelleyebilirsiniz.

Soldaki kullanıcı arayüzü öğelerine göz atın. İlk kartta bitki türü, açıklaması ve bazı kategori etiketleri yer alırken diğer kartlarda bitki bakımı talimatları açıklanır. Bitki türü, yüksek vurgu rolü için uygundur. Bu nedenle, "başlık" stilimizi kullanın. Bunu daha önce başlık olarak ayarladığımız şekilde ayarlayın. Bakım kartlarının da başlığı vardır ancak aynı vurgu düzeyinde olmadıkları için bunları "başlık" olarak ayarlayın.
Bitki ayrıntısı ve talimat kopyası "body large"a, kategori etiketleri ise "label large"a atanabilir.
Doğru dengeyi bulmak için farklı rollerle denemeler yapın, kullanıcı arayüzü öğelerini ve tür ölçeğinizi ayarlayın.

7. Kodda uygulama

CSS ile kodda değişken yazı tiplerini uygulamak, yazı tipini yüklemek için yazı tipi teslim hizmeti kullanan ve CSS özellikleri ile özelleştirilen herhangi bir web yazı tipine benzer bir yöntemdir.

Uygulama için MWC veya herhangi bir çerçeve değil, temel HTML ve CSS kullanacağız.

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

Web sitenizde değişken yazı tipleri de dahil olmak üzere çok sayıda 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ılabildiğini inceleyin. Filtrelemek için arama bölümünde Yalnızca değişken yazı tiplerini göster'i işaretleyin. Değişken yazı tiplerinde, sayfanın alt kısmına yakın bir yerde, ailede bulunan her eksen için kaydırıcıları ayarlayabileceğiniz bir deneme alanı bulunur.

CSS ile stil oluşturma

Tüm yazı tiplerinde aynı sayıda özelleştirilebilir eksen bulunmaz. Şu anda en yaygın olanlar Ağırlık, Genişlik, Eğiklik, İ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 özelliği 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 italik (ital) güvenilir değildir.

8. Google Fonts API ile içe aktarma

Daha önce yalnızca Roboto'yu kullanıyorduk ancak artık fonts.google.com adresinde kullanabileceğimiz tüm yazı tiplerine göz atın.

Bu codelab'in geri kalanında Roboto'yu kullanmaya devam edeceğiz ve aşağıdaki kartlardaki türü önceki alıştırmamıza göre özelleştireceğiz.

Kart örneği 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>

başlık, başlık, gövde ve etiket için son alıştırmada belirlediğimiz stil özelliklerini not edin. Bu bilgileri göz önünde bulundurarak Roboto Flex sayfasına gidin. Kaydırma çubuklarını Figma'da belirlediğiniz özelliklere göre ayarlayın ve her biri için Bu stili seç'i tıklayarak yan çekmeceye ekleyin.
Ç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 yeterlidir. @import'u seçelim.
@import'tan noktalı virgüle kadar olan kısmı kopyalayın ve içe aktarma yorumundan sonra stil etiketlerinin içine yapıştırın.
Kullanılan tek yazı tipi Roboto Flex olduğundan, içe aktarma kodunun altında yer alan "aileleri belirten CSS kuralları"nı ekleyerek yazı tipi ailesini çağırmak için gövdeyi ayarlayın.

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

Bu işlem, seçilen yazı tipini ve stil kümesini içe aktarır. Ancak Axis aralıklarını kullanarak tek tek stiller yerine sürekli stil aralığını kullanabilirsiniz. Bir aralık oluşturmak için iki değeri .. ile birleştirin (ör. 100..900). Yalnızca yazı tipinin kaydırıcılarında bulunan aralıkları eklediğinizden emin olun. Aksi takdirde yazı tipi düzgün şekilde yüklenmez.

Bu işlev, tam aralıkta yüklendiği ve indirme isteğini büyüttüğü için tarayıcıda sorunsuz animasyon geçişleri ve denemeler için en iyi şekilde kullanılır.

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

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

Sağ panelde seçilen başlıklardan h1 başlayarak üstteki İncele sekmesini seçin. Bu işlem, paneli geliştirici teslimi için kod inceleme moduna geçirir. Kod, son bölümdür.
Henüz yapmadıysanız biçim açılır listesini 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üzeyli font-variation-settings gelir. font-variation-settings özelliğine geçmeden önce standart özellikleri kullanın.

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

h1 seçicimizi stilize etmek için türle ilgili bu CSS kodunu kopyalayın.

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

Bakım kartı başlığının stili h2 içine kopyalanabilir. Aynı işlemi gövde metni için de yapın ve p içine kopyalayın. Etiket stilleri .label içine kopyalanabilir.

10. Tebrikler

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

Sorularınız varsa Twitter'da@MaterialDesign hesabını kullanarak dilediğiniz zaman bize sorabilirsiniz.

youtube.com/MaterialDesign adresinde daha fazla tasarım içeriği ve eğitim bulabilirsiniz.