Bu öğrenme içeriğinde, Styling panelindeki Text alanı ve yazı tiplerini yakından inceleyeceğiz.
Text paneli ile seçili elementte bulunan yazı üzerinde değişiklik ve düzenlemeleri yapabilirsiniz. Text paneli aracılığıyla, kullanılacak font'u seçebilir ve stil, boyut, renk, satır yüksekliği gibi diğer tipografik seçenekleri düzenleyebilirsiniz. Ön tanımlı olarak gelen hazır stilleri seçebilir, düzenleyebilir veya yeni stillerde oluşturabilirsiniz.
Ön tanımlı stiller hem ekrana eklenmiş elementleri hem de yeni eklenecek elementleri etkiler. Ayrıca ön tanımlı stiller elementler için temel referans stiller olduğu için silemezsiniz, ancak özelliklerini değiştirebilir veya çoğaltarak kullanabilirsiniz. Bir element üzerine birden fazla stil eklenebilir. Bir stilde yazı tipine ait özellikleri tanımlayabilir, diğer bir stilde ise sadece renk bazında eklemeler yapabilirsiniz. Mevcut bir stilin üzerine başka bir stil eklendiğinde, öncesinde eklenmiş stilin denk gelen özelliklerini değiştirecektir.
Şimdi kısaca yazı birimlerine göz atalım. Piksel (px), punto'lar (pt), Remler (kök ems) ve EMS olmak üzere 4 birim vardır.
- Piksel (px)
Metin boyutunu piksellerle ayarlamanızı sağlar.
- Punto
Baskı yazılarının genel ölçü birimidir. Metin boyutunu punto ile ayarlamanızı sağlar.
- EMS
EMS, ana öğeye bakarak yazı tipi boyutlarını orantılı olarak ölçeklendirilir. Bir em, bir yazı tipinin büyük M harfinin genişliğine dayanmaktadır.
Örneğin bir yazı tipi 12 piksel ise:
- Remler
Bir rem, rem değerinizi alıp HTML yazı tipi boyutuyla çarparak hesaplanır. Manuel olarak kodda değiştirmediğiniz sürece, tarayıcının yazı tipi boyutuna uyum sağlar.
Ön tanımlı olarak gelen toplamda 12 adet stil vardır. Bu yazı stillerinin ortak özelliği hepsinin Poppins font ailesi ile gelmesidir. Her yazı stili kullanıldığı alana göre font stili, font boyutu ve renk olarak değişmektedir.
Button elementini ikincil tip olarak kullanmak istediğinde seçebileceğin font stilidir. Medium, 16 px font boyutu ile 22 px satır aralığına sahip, mavi renkli olarak gelir.
Kuika’da sürükle-bırak ile eklediğin her Button elementi ön tanımlı olarak mavi renkli arka plana sahip olarak gelmektedir. Bu yüzden medium, 16px font boyutu, 22px satır aralığına sahip ve beyaz renkli olarak gelir.
Ana başlıkları ve alt başlıkları tanımlamak için kullanılan HTML etiketlerini ifade eder. H1, H2, H3, H4, H5, H6, H6_white olarak Kuika’da karşınıza çıkar. Ana başlık H1 şeklinde ifade edilir. Tasarımını detaylandırmak için H2, H3 şeklinde diğer stilleri kullanabilirsiniz.
Icon elementini ekrana sürükle-bırak ile ekrana eklediğinde gelen stildir. Icon'un 20px boyuta sahip ve gri renkli olmasını sağlar.
Icon'un 20px boyutlu ve mavi renkli olmasını sağlar.
Ön tanımlı stilleri öğrendik şimdi Text panelinde sunulan diğer alanları inceleyeceğiz. Bu alanları sırayla font ailesi, stil, boyut ve renk, boşluk ve opsiyonlar olarak belirtebiliriz.
Platformda ön tanımlı olarak gelen 19 fonttan dilediğini kullanabilirsiniz. Ön tanımlı gelen fontlara örnek olarak Poppins, Montserrat, Roboto fontlarını sıralayabilirsiniz.
Seçmiş olduğun font ailesine bağlı olarak light, regular, medium, bold gibi farklı font stilleri karşınıza çıkacaktır.
Size bölümünden hangi yazı boyutunu kullanmak istediğinizi belirleyebilir ve birimini değiştirebilirsiniz. Color Picker yardımıyla yazı rengini güncelleyebilirsiniz.
Satır yüksekliği (Leading) ve harf aralığını (Kearning) ayarlanan alandır. Metinde satırlar arasındaki boşluğa satır yüksekliği denir. İdeal satır yüksekliği, paragraflar ve metin blokları için yazı tipi boyutunun en az 1,5 katı olmalıdır.
Harf aralıkları (Kearning) ise kullandığınız fonta veya hazırlamak istediğiniz stile bağlı olarak ayarlayabilirsiniz.
Mobil sistem, altı çizili metin, üstü çizili metin, tümü büyük harf gibi farklı seçenekler bulunmaktadır.
Kuika’da fontlarla çalışmaya hazırsınız!
Bu öğrenme içeriğinde, Styling panelindeki Text alanı ve yazı tiplerini yakından inceleyeceğiz.
Text paneli ile seçili elementte bulunan yazı üzerinde değişiklik ve düzenlemeleri yapabilirsiniz. Text paneli aracılığıyla, kullanılacak font'u seçebilir ve stil, boyut, renk, satır yüksekliği gibi diğer tipografik seçenekleri düzenleyebilirsiniz. Ön tanımlı olarak gelen hazır stilleri seçebilir, düzenleyebilir veya yeni stillerde oluşturabilirsiniz.
Ön tanımlı stiller hem ekrana eklenmiş elementleri hem de yeni eklenecek elementleri etkiler. Ayrıca ön tanımlı stiller elementler için temel referans stiller olduğu için silemezsiniz, ancak özelliklerini değiştirebilir veya çoğaltarak kullanabilirsiniz. Bir element üzerine birden fazla stil eklenebilir. Bir stilde yazı tipine ait özellikleri tanımlayabilir, diğer bir stilde ise sadece renk bazında eklemeler yapabilirsiniz. Mevcut bir stilin üzerine başka bir stil eklendiğinde, öncesinde eklenmiş stilin denk gelen özelliklerini değiştirecektir.
Şimdi kısaca yazı birimlerine göz atalım. Piksel (px), punto'lar (pt), Remler (kök ems) ve EMS olmak üzere 4 birim vardır.
- Piksel (px)
Metin boyutunu piksellerle ayarlamanızı sağlar.
- Punto
Baskı yazılarının genel ölçü birimidir. Metin boyutunu punto ile ayarlamanızı sağlar.
- EMS
EMS, ana öğeye bakarak yazı tipi boyutlarını orantılı olarak ölçeklendirilir. Bir em, bir yazı tipinin büyük M harfinin genişliğine dayanmaktadır.
Örneğin bir yazı tipi 12 piksel ise:
- Remler
Bir rem, rem değerinizi alıp HTML yazı tipi boyutuyla çarparak hesaplanır. Manuel olarak kodda değiştirmediğiniz sürece, tarayıcının yazı tipi boyutuna uyum sağlar.
Ön tanımlı olarak gelen toplamda 12 adet stil vardır. Bu yazı stillerinin ortak özelliği hepsinin Poppins font ailesi ile gelmesidir. Her yazı stili kullanıldığı alana göre font stili, font boyutu ve renk olarak değişmektedir.
Button elementini ikincil tip olarak kullanmak istediğinde seçebileceğin font stilidir. Medium, 16 px font boyutu ile 22 px satır aralığına sahip, mavi renkli olarak gelir.
Kuika’da sürükle-bırak ile eklediğin her Button elementi ön tanımlı olarak mavi renkli arka plana sahip olarak gelmektedir. Bu yüzden medium, 16px font boyutu, 22px satır aralığına sahip ve beyaz renkli olarak gelir.
Ana başlıkları ve alt başlıkları tanımlamak için kullanılan HTML etiketlerini ifade eder. H1, H2, H3, H4, H5, H6, H6_white olarak Kuika’da karşınıza çıkar. Ana başlık H1 şeklinde ifade edilir. Tasarımını detaylandırmak için H2, H3 şeklinde diğer stilleri kullanabilirsiniz.
Icon elementini ekrana sürükle-bırak ile ekrana eklediğinde gelen stildir. Icon'un 20px boyuta sahip ve gri renkli olmasını sağlar.
Icon'un 20px boyutlu ve mavi renkli olmasını sağlar.
Ön tanımlı stilleri öğrendik şimdi Text panelinde sunulan diğer alanları inceleyeceğiz. Bu alanları sırayla font ailesi, stil, boyut ve renk, boşluk ve opsiyonlar olarak belirtebiliriz.
Platformda ön tanımlı olarak gelen 19 fonttan dilediğini kullanabilirsiniz. Ön tanımlı gelen fontlara örnek olarak Poppins, Montserrat, Roboto fontlarını sıralayabilirsiniz.
Seçmiş olduğun font ailesine bağlı olarak light, regular, medium, bold gibi farklı font stilleri karşınıza çıkacaktır.
Size bölümünden hangi yazı boyutunu kullanmak istediğinizi belirleyebilir ve birimini değiştirebilirsiniz. Color Picker yardımıyla yazı rengini güncelleyebilirsiniz.
Satır yüksekliği (Leading) ve harf aralığını (Kearning) ayarlanan alandır. Metinde satırlar arasındaki boşluğa satır yüksekliği denir. İdeal satır yüksekliği, paragraflar ve metin blokları için yazı tipi boyutunun en az 1,5 katı olmalıdır.
Harf aralıkları (Kearning) ise kullandığınız fonta veya hazırlamak istediğiniz stile bağlı olarak ayarlayabilirsiniz.
Mobil sistem, altı çizili metin, üstü çizili metin, tümü büyük harf gibi farklı seçenekler bulunmaktadır.
Kuika’da fontlarla çalışmaya hazırsınız!
