Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

1. Giriş

Son Güncelleme: 11.05.2022

Değişken yazı tipleriyle kullanıcı arayüzünde dinamik çeşitliliği benimseyin. Bu özellik, uygulamalarınızı hızlandırırken düzenlerde, temalarda ve erişilebilirlikte daha fazla duyarlılık sağlar.

Neler öğreneceksiniz?

Değişken yazı tiplerinin ne olduğu.
Ses düğmeleriyle türü nasıl özelleştirebilirsiniz?
Tasarımlarınıza değişken yazı tipi uygulama.
Google Fonts API ve CSS ile değişken yazı tiplerini uygulama.

Ön koşullar

Bu laboratuvarda bazı temel tasarım kavramlarını geliştireceğiz.

Tür ölçekleri hakkında bilgi.
Figma bilgisi.
Temel HTML ve CSS bilgisi.

Gerekenler

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 şeyi Figma dosyasında bulabilirsiniz. Dosyayı indirip içe aktarabilir veya Figma topluluğundan kopyalayabilirsiniz.

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

Figma Topluluğu'ndan kopyala

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

Dosya düzeni

Dosyaya göz atarken, en başta bir tanıtımdan başlayarak dosyanın bağımsız olduğuna dikkat edin. Her bölüm, birbirine bağlı bir dizi çalışma panosuna ayrılmıştır. Bölüm için bazı temel kavramlar ve alıştırmalar, bunlara dahildir. Bölümler ve alıştırmalar birbirinin üzerine inşa edilmiş ve sırayla tamamlanmalıdır.

Bu codelab'de, bu kavramlar ve alıştırmalar daha ayrıntılı şekilde açıklanmaktadır. Yeni Material You özellikleri hakkında daha fazla bilgi edinmek için codelab'i okuyun.

Giriş çalışma panosundan başlayarak, çalışma yüzeylerini 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 edin

Başlamadan önce, değişken bir yazı tipine sahip olmamız gerekiyor! Bu dosya, zaten Figma'da mevcut olan Roboto Flex'i kullanıyor veya dosyayı fonts.google.com adresinden 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, yenilikçi bir yazı tipi biçimidir. Roboto Serif ve Roboto Flex'in her biri geniş bir eksene sahip, değişken yazı tipi teknolojisi için yenilenmiş yazı tipleridir.

Estetik ifade ve eksenler

Tasarımcılar artık normal, kalın, italik vb. gibi eski sabit ayar stilleriyle sınırlı değil. Değişken yazı tiplerindeki değişkenler eksenler veya örneklerle kontrol edilir. Tür tasarımcısı seçerse tür tasarımındaki herhangi bir değişken kullanıcı tarafından kontrol edilen bir eksene atanabilir. Yaygın eksenler arasında italik, optik boyut, eğim, ağırlık, genişlik yer alır. Bu beş boyut, CSS'de kayıtlı eksenlerdir.

Avantajları

Değişken yazı tipleri, tek bir yazı tipi dosyasında birden fazla stil sunmanıza olanak tanıyarak web sitelerini daha sürdürülebilir, daha küçük ve hızlı hale getirirken tasarımcıya daha etkileyici bir kontrol olanağı sunar.

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

Eksenleri değiştir

Elimizdeki tüm parametreleri (veya eksenleri) ve etkilerini gözden geçirelim. Sağdaki türü seçin ve eksen kaydırma çubuklarını açmak için Tür Ayrıntıları penceresini (diğer simgesi) açın ve her bir parametreyi gözden geçirin.

Ağırlık, bir harfin kalınlığını tanımlar. Çizgi kalınlığı için eksiksiz ve kesintisiz bir aralık sunar.

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

Stil, yazımcılar tarafından 'eğik' olarak da bilinen, dik görünümden eğimliye doğru ayarlanır. stiline sahip. Nadiren de olsa Eğim, "ters eğimli" olarak adlandırılan diğer yönde çalışabilir veya "ters eğik" stiline sahip.

Derece, bir yazı karakterinin optik ağırlığının ikincil değiştiricisidir ve Ağırlık ekseninden bağımsızdır. Hem Ağırlık hem de Not bir harfin kalınlığını etkiler ancak Notla ilgili düzenlemeler çok daha ayrıntılıdır.

Optik Boyut. Stili, puntolarla belirtilen belirli metin boyutlarına uyarlayın. Harfler küçük boyutlarda genellikle daha rahat okunması için optimize edilir. Boşluklar/aralık daha gevşek, kalın çizgiler ise daha az ayrıntı içerir. Büyük boyutlarda, harfler genellikle daha ince çizgileri ve daha ayrıntılı biçimleri olan, daha aşırı ağırlık ve genişliklere sahip başlıklar için optimize edilir.

Figma dışındaki değişken yazı tipi eksenleriyle oynamak için Değişken Yazı Tipleri demosu bölümüne göz atın.

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

Bir marka stil kılavuzuyla çalışıyorsanız, tipografik kısıtlamaları bildirmek için yerleşik bir tür ölçeğiniz olabilir. Değişken yazı tipleri kullanmak, bu tutarlılığı bir kenara bırakmak anlamına gelmez. Tek bir dosyada tür ölçeği esnekliğini (koyu arka planlar üzerinde, kaliteyi artırmak gibi kullanım alanları için) daha da fazla ayrıntılandırmanızı sağlar.

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

Gövde metniyle tür ölçeğini özelleştirmeye başlayalım. Bu, önce sitenin temel türü boyutunu ayarlamamıza ve oradan optik olarak ayarlama yapmamıza olanak tanır. Body Large için varsayılan değer 18pt'dir ve seçili Roboto Flex olarak ayarlanmıştır. Daha okunaklı olacak şekilde ayarlama yapmak, eskiden yazı tipi boyutunu ve ağırlığını güncellemek anlamına geliyordu. Bu başka bir yazı tipi dosyası anlamına geliyordu, ancak artık bazı eksenlerde ince ayar yapabiliyoruz. Optik boyutu, eğimi ve ağırlığı ayarlayın.
Etiketle devam edin. Etiketler daha pratiktir ve düğmeler gibi daha kısa, daha kısa bağlamlarda kullanılır. Etiketin düğme kapsayıcılarında ve çiplerde doğru şekilde görünmesini sağlamak için dereceyi optik olarak ayarlayın.
Başlık, Başlık ve Görüntülü Reklam Ağı ile daraltmaya devam edin. Üçü de sayfa başlıkları ve bölümler gibi daha kısa ve orta ila yüksek vurgulu metinler için kullanılır. Başlık ve Görüntülü Reklam, boyutları ve yüksek vurgudan dolayı daha etkileyici olabilir. Buradaki tüm eksenlerle oynayabilirsiniz.
Tür seçildikten sonra, tutarlı yeniden kullanılabilir tür ayarları için metin stili belirlemek üzere 4 noktayı tıklayıp (+) ekleyin.

Materyal Tema Oluşturucu'yu kullanarak veya M3 tasarım kitini kopyalayarak, varsayılan Malzeme türü ölçeğini Figma stilleri olarak oluşturabilirsiniz.

6. Kullanıcı arayüzüne uygulandı

Tür ölçeği ayarlandığında bunu kodda uygulanacak kullanıcı arayüzü öğelerine uygulayalım. Değişken yazı tiplerinin daha fazla ifade gücü ve okunabilirlik katmak için nasıl kullanılabileceğini düşünün. Son alıştırmada Figma stillerini ayarlarsanız bu stiller uygulanabilir ve ardından stilin eksenlerini güncelleyebilirsiniz.

Soldaki kullanıcı arayüzü öğelerine bakın. İlk kart bir bitki türü, açıklama ve bazı kategori etiketleri içeriyor, diğer kartlarda bitki bakımı talimatları açıklanıyor. Bitki türü, bu rolün yüksek derecede vurgulanması açısından mantıklı. Bu nedenle, stiline sahip. Bu URL'yi, daha önce başlık olarak belirlediğimiz değere ayarlayın. Bakım kartlarının da başlığı vardır ancak aynı vurguya sahip olmadığından bunları "başlık" olarak ayarlayın.
Bitki ayrıntısı ve talimat metni "büyük gövde"ye, kategori etiketleri ise "büyük etiket"e atanabilir.
Farklı rollerle denemeler yapın ve doğru dengeyi bulmak için kullanıcı arayüzü öğeleri ile tip ölçeğinizi ayarlayın.

7. Koda uygulayın

Kodda değişken yazı tiplerini CSS ile uygulamak, yazı tipini yüklemek için yazı tipi yayınlama hizmeti kullanan ve CSS özellikleriyle özelleştirme yapan 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'ta değişken yazı tipleri

Değişken yazı tipleri de dahil olmak üzere çok sayıda yazı tipini web sitenize kolayca uygulayabilmek için yazı tipi iletim hizmetiniz olarak Google Fonts'u kullanın.

fonts.google.com adresine giderek hangi değişken yazı tiplerinin kullanılabildiğini keşfedin. Arama bölümünde, filtrelenecek Yalnızca değişken yazı tiplerini göster seçeneğini işaretleyin. Değişken yazı tipleri, sayfanın alt kısmına yakın bir yerde bulunan ve ailedeki her bir eksen için kaydırma çubuklarını ayarlayabileceğiniz bir oyun alanı içerir.

CSS ile stil

Tüm yazı tipleri aynı sayıda eksene sahip değildir. Şu anda en yaygın kullanılanlar Ağırlık, Genişlik, Eğim, İtalik ve Optik Boyuttur.

Bunlar, değişken yazı tiplerinden önce var olan temel CSS yazı tipi özellikleriyle ayarlanabilir. Her şey henüz geniş çapta desteklenmemektedir (Mayıs 2022 itibarıyla), tüm eksenler yeni font-variation-settings mülkü kullanılarak güvenilir ş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ğim (slnt) ve İtalik (İtalya) güvenilir değildir.

8. Google Fonts API'si ile içe aktar

Sadece Roboto'yu kullanıyoruz ama şu anda yazı tipleri.google.com'da kullanabileceğimiz tüm yazı tiplerine göz atın.

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

Kart örneği kullanıcı arayüzünü içeren bu kodu, seçtiğiniz web IDE'sine 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 ile ilgili son alıştırmada belirlediğimiz stil özelliklerini not edin. Bunları göz önünde bulundurarak Roboto Flex sayfasına gidin. Kaydırma çubuklarını Figma'da ayarladığınız özelliklerle eşleşecek şekilde ayarlayın, ardından kenar çekmecesine eklemek üzere her biri için Bu stili seçin.
Çekmecede, seçilen stillerin altında Web'de Kullan seçeneğini bulun. Yazı tipini kodunuza eklemenin iki yolu vardır: <link> veya @import yazın. Yalnızca bir tane olması gerekiyor. @Import'u seçelim.
@import kodundan noktalı virgüle kopyalayın ve bunu içe aktarma yorumundan sonraki stil etiketlerine yapıştırın.
Roboto Flex kullanılan tek yazı tipi olduğundan, "Aileleri belirtmek için CSS kuralları" ekleyerek gövdeyi yazı tipi ailesini çağıracak şekilde ayarlayın. içe aktarma kodunun altında bulunur.

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

Bu işlemle seçili yazı tipi ve stiller grubu içe aktarılır, ancak Eksen aralıklarının kullanılması ayrı ayrı stiller yerine sürekli stil aralığını kullanmanıza olanak tanır. Bir 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, düzgün şekilde yüklenmez.

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

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

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

Şu başlıklarla başlayalım: Sağ panelde h1 seçiliyken 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.
Henüz yapmadıysanız biçim açılır menüsünü CSS olarak değiştirin. Kullanılması durumunda standart özellikler (font-weight, font-stretch, font-style, font-optical-sizing) ve kayıtlı olmayan özel eksenler içeren alt düzey font-variation-settings listelenir. font-variation-settings özelliğine geçmeden önce standart özellikleri kullanın.

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

h1 seçicimizin stilini belirlemek 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 öğesine kopyalanabilir. Aynı işlemi p e-posta adresine kopyalayarak gövde kopyası için de yapın. Etiket stilleri .label aralığına kopyalanabilir

10. Tebrikler

Değişken yazı tiplerini benimseme, bunları tasarımlarınızda nasıl kullanacağınızı öğrenme ve web'de uygulama konusunda harika bir iş çıkardınız.

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

youtube.com/MaterialDesign adresinden daha fazla tasarım içeriği ve eğitici içerik için bizi takip etmeye devam edin.