Text (Metin)

Elementlere Text (Metin) ekleyin.

Workspace üzerine eklenen elementlere tıklanınca styling panelinden Text(metin) düzenlemelerine erişebilirsiniz. Font boyutu, renk veya harf aralıkları gibi ayarları yapabilirsiniz. Yazı içeriğine sahip elementler (Label veya Button gibi) ön tanımlı bir stil ile gelirler. Bu stil üzerinde yapacağınız düzenlemeler stilin eklendiği tüm elemenlerde geçerli olacaktır. Ön tanımlı stillerin yanında kendi stillerinizi de oluşturabilir elementler üzerinde kullanabilirisniz.

Icon elementi, bir fonttan beslenmektedir. Icon elementi üzerinde boyut ve renk düzenlemelerini bu bölümden yapabilirsiniz.

Font Family (Yazı Tipi Ailesi)

Platformdaki varsayılan yazı tiplerinden herhangi birini kullanabilirsiniz.

Style (Stil)

Seçmiş olduğunuz font ailesine göre thin (ince), light (hafif), regular (normal), medium (orta), bold (kalın) gibi font stilerini seçebilirsiniz.

Size and Color (Boyut ve Renk)

Yazı boyutu (x yüksekliği) birimini Size bölümünden değiştirebilirsiniz. Color Picker yardımıyla metnin rengini belirleyebilirsiniz. Web'de en çok kullanılan yazı tipi boyutu (x yüksekliği) birimi piksel olmasına rağmen, başka seçenekler de vardır:

  • points (pt)

  • Rems (root ems)

  • EMS

Point

Basılı metinler için genel ölçü birimidir.

EMS

EMS, ana öğeye bakarak yazı tipi boyutlarını orantılı olarak ölçeklendirir. Bir em, bir yazı tipinin büyük harfi M'nin genişliğini temel alır.

Örneğin, bir yazı tipi 12 piksel ise:

  • 1 em 12 pikseldir.

  • 2 ems 24 pikseldir.

  • 1,5 ems 18 pikseldir.

Rems

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.

Color (Renk)

Metnin rengini Color picker aracılığıyla seçerek, RGB değerini girerek veya Hex kodunu girerek belirleyebilirsiniz.

Options (Seçenekler)

Mobil sistem yazı boyutundan etkilenmeyen metin, altı çizili metin, üstü çizili metin, tümü büyük harf, tümü küçük harf gibi farklı seçenekler bulunmaktadır.

All Caps (Tümü Büyük Harf)

Yazılı metni veya girilecek metni büyük harflerle gösterir. Büyük harfler, özellikle uzun paragraflarda okuyucuya ağır bir yük getirebilir. Okuyucular, tüm büyük harfleri ayrı harflerle anons ederek akışı keser ve bu da anlaşılmasını zorlaştırır. Daha uzun metinler için, tüm büyük harflerin kullanımını sınırlamayı düşünebilirsiniz.

All Lowercase (Hepsi Küçük Harf)

Yazılı metni veya girilecek metni küçük harfle gösterir. Tüm küçük harfler, okuyucuların uzun paragraflar yazmasını kolaylaştırır. İnce yazı tiplerini okumak, özellikle uzun paragraflarda son derece zordur. Bazı karakterler çok okunaklı değil, bir yazı tipindeki eşit olmayan ağırlık dağılımı için geçerlidir. Bu nedenle, gövde metni yazı tipiniz için kaç piksel seçtiğiniz çok önemlidir.

Underline Text-Bold-Italic (Altı Çizili Metin-Kalın-İtalik)

Web'de altı çizili metnin bir köprüyü gösterdiği beklentisi vardır. Vurgulamaya çalışıyorsanız, italik veya kalın metin kullanmayı düşünün (veya bir aralıktaki öğeleri kaydırarak stil değişiklikleri yapın). Metninizi vurgulamak için (bir köprüyle karıştırılabilecek) altını çizmek yerine italik (solda) veya kalın metin (sağda) kullanın.

Spacing (Aralık)

Aralık Harf/Satır boşluklarını ayarladığınız 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ığını (Kerning) kullandığınız yazı tipine veya hazırlamak istediğiniz stile göre ayarlayabilirsiniz.

Elementlerde Text Ayarları Yapma

Metin (Text) ayarlarını yapmak için aşağıdaki adımları izleyebilirsiniz:

  1. UI Design görünümünde, metin ayarlarını yapmak istediğiniz elementi seçin.

  2. Styling paneline tıklayın.

  3. Styling panelinde Text bölümüne tıklayın

  4. Styles alanında yer alan üç nokta ikonuna tıklayınca gelen Add New Style’a tıklayarak farklı elementlerde ya da yerlerde kullanmak üzere Text stillerinizi oluşturup kaydedebilirsiniz.

  5. Custom Style ile Font ailesi, Stil, Boyut ve Renk gibi özellikleri bulunmaktadır.

  6. Font ailesi seçmek için, Font Family seçeneğini kullanabilirsiniz.

  7. Metin stilini ayarlamak için, Style seçeneğini kullanın. İnce, hafif, düzenli, orta veya kalın gibi stil seçenekleri mevcuttur.

  8. Metin boyutunu ayarlamak için, Size seçeneğini kullanın. Piksel (px), nokta (pt) veya em (em) gibi farklı birimleri mevcuttur.

  9. Metin rengini ayarlamak için, Color seçeneğini kullanın. Renk seçici aracını kullanarak istediğiniz rengi belirleyin.

Text içerisinde yer alan stiller elementlere göre değişmektedir. Bazı elementlerde Text içerisinde yer alan bütün özellikleri kullanabilirken bazı elementlerde ise sınırlı özellikler kullanılmaktadır.

Last updated