Divi 5 ile yazı tipi ve yazı tipi boyutlarını yönetme

Yazı tipleri ve tipografi, sitenizin tonu belirler. Doğru yapmak, markanıza yardımcı olabilir ve okunabilirliği geliştirebilir. Divi 5, yazı tipleriyle çalışmayı hızlı ve kolay hale getirir. Divi'nin tasarım değişkenleri ve seçenek grup ön ayarları gibi yeni özellikleri ile yazı tiplerini ayarlama kolay hale gelir.

Bu yazı size Divi 5'teki yazı tiplerini ve yazı tipi boyutlarını nasıl yöneteceğinizi öğretir ve cihazlar arasında güzel bir şekilde ölçeklenen duyarlı tipografi oluşturur.

Divi 5 yeni web sitesi yapılarına hazır, ancak son rötuşları geriye dönük uyumluluk sistemine koyuyoruz. Bu arada, D4 üzerine inşa edilmiş siteleri güncelleme. Bu değişikliğin ne zaman gerçekleştiğini size bildireceğiz.

Yeni bir web sitesi için yazı tipleri aracılığıyla düşünürken hususlar

Yeni bir siteye başlarken, yazı tipi seçenekleri kullanıcının ilk izlenimini şekillendirir. Tipografinizin içeriğinizi desteklediğinden emin olmak için bu noktaları göz önünde bulundurun:

• Okunabilirlik : Özellikle gövde metni için açık yazı tiplerini seçin.
• Tutarlılık : Yazı tiplerinizi sınırlandırın - En iyi iki veya üç, başlıklar için en az bir ve bir tane vücut metni için.
• Duyarlılık : Yazı tiplerinin farklı ekran boyutlarına uyum sağladığından emin olun (ideal olarak 320px'den 1440px'e).
• Uyumluluk : Ekran sorunlarını önlemek için web güvenli veya popüler yazı tiplerini tercih edin.

Divi 5'te yazı tipi ve yazı tipi boyutları nasıl yönetilir

Divi Kütüphanesi'nden önceden hazırlanmış bir düzen kullanalım. “Business CV” paketinden açılış sayfası düzenini seçeceğiz ve Divi 5'in yeni özelliklerini kullanarak tipografiyi yenileyeceğiz. Mevcut bir Divi 5 siteniz varsa, ancak tipografisini geliştirmek istiyorsanız, bu düzeni kullanmadan aynı adımları izleyebilirsiniz.

1. Adım: Yazı Tipi Eşleştirmeleri Seçimi

İyi yazı tipi eşleşmeleri stil ve okunabilirlik harmanlanır. Google yazı tipleri de Divi'ye yerleştirildikleri ve kullanımı kolay oldukları için güvenli bir bahis.

Aşağıdaki örneklerde, Düzen Paketi'nin başlıklar ve gövde metni için poppin kullanımına bağlı kalacağız. Lora ve Roboto'yu da eşleştirmeyi deneyebilirsiniz.

Adım 2: Birincil başlık ve gövde için yazı tipleri ayarlama

Artık yazı tiplerini seçtiğinize göre, bunları Divi'yi kullanarak web sitesine ekleyebiliriz. Visual Editor'da sol üstteki değişken yöneticiyi açın. Divi'nin tasarım değişkenleri, web sitenizdeki yazı tiplerini küresel olarak kontrol etmenizi sağlar.

Birincil başlık ve gövde yazı tipleriniz için iki varsayılan yazı tipi değişkeni vardır. Yazı tipleri bölümüne gidin ve başlık yazı tipi olarak “ Poppins ” i ve vücut yazı tipi olarak “ Roboto ” yu ayarlayın.

Yazı tiplerinizi tasarım ve marka gereksinimlerinize uygun olana ayarlayın

Bu noktada, özellikle bu renklerin bazılarını metinde kullanmayı planlıyorsanız, marka renklerinizin tasarım değişkenleri olarak da ayarlandığından emin olmak da iyi bir fikir olabilir.

Değişkenlerinizi girerken kaydettiğinizden emin olun

Adım 3: Yazı Tipi Boyutları Oluşturma

Şimdi daha çok ilgili kısım için. Tipografinizin her cihaz boyutunda nasıl iyi görünmesini düşünmek en iyisidir. Divi 5 ile iki seçeneğiniz var. İlk ve tercih edilen seçenek CLAMP () kullanmaktır ve ikincisi, yazı tipini çeşitli kesme noktalarında birden çok kez ayarlamaktır.

Her başlık seviyesi, gövde metni ve diğer metin durumları için yazı tipi boyutlandırmanızı nasıl oluşturduğunuz tamamen size bağlıdır.

Kelepçe ile sıvı tipogrfisi ()

CLAMP () minimum bir değer, tercih edilen bir değer ve maksimum değer ayarlamanızı sağlar. Başka bir yazıda, CLAMP () hakkında derinliğe giriyoruz ve bu değerleri anlamanın kolay bir yolunu sunuyoruz. Ama işte bir örnek:

Bu düzen, ilk bölümdeki kişinin adı için varsayılan bir H1 boyutuna ve benzersiz (ve daha büyük) bir H1 boyutuna sahiptir. Aynı prensibi yukarıdaki boyutlandırma grafiğinde gerçekleştirdik ve daha küçük bir gövde yazı tipi varyasyonu ekledik.

İşleri tek başına görmek için yazı tipi boyutlandırmanızı basit bir HTML belgesinde test edebilirsiniz (bu, Divi'nin içinde de yapılabilir). Yazı tipi eşleştirmesiyle yukarıdaki yazı tipi boyutlandırması nasıl görünüyor.

Yazı tipi boyutlarınızla rahat olduğunuzda, bunları tasarım değişkenleri olarak ekleyebilirsiniz. Her birine fark edilebilir bir isim verin ve sağdaki değeri yapıştırın.

Kesme noktaları olan sabit birimler

Clamp () yazı tipi boyutlandırma için en çok yönlü seçenektir, ancak birçok kullanıcı hala piksel veya REM gibi sabit değerler kullanır. Bunları, yazı tipinizi gerektiğinde yukarı ve aşağı ölçeklendirmek için Divi'nin özelleştirilebilir kesme noktalarının yanında kullanabilirsiniz.

Benzer bir etki için değer sayısınız bu şekilde kullanılırken üç katına çıktığından (yukarıdaki 10 CLAMP () değeri yerine, bu 30 ayrı değer olacaktır). Değişken yöneticiyi bu değerlerle doldurmanız önerilmez, ancak isterseniz,

Boyutlandırma yapınızı her kesme noktası için oluşturabilir ve bir sonraki adıma taşıyabilirsiniz. Bunları tasarım değişkenleri olarak yerleştirmek yerine, bunları doğrudan seçenek grubuna ve öğe ön ayarlarına uygulayabilirsiniz.

Adım 5: Değişken yöneticiden ön ayarlara yazı tipi boyutları ekleme

Sayı değişkenleriniz ayarlandığında (veya en azından formüle edilmiş), bunları ön ayarlara uygulamanın zamanı geldi. Seçenek grup ön ayarları için en iyi kullanım durumlarından biri tipografidir. Başlık/başlık alanını kullanan herhangi bir modül için kullanabileceğiniz yedi (7) başlık/başlık seçenek grubu ön ayarları oluşturabilirsiniz (örneğin, başlık, bulanıklık, akordeon ve kişi modülleri gibi).

Aynı şey metin seçeneği grubu için de geçerlidir. İki (2) ön ayar ayarlayabilirim (biri normal ve diğeri küçük vücut metnim için) ve metin seçeneği grubunu kullanan herhangi bir modül bu stilleri kullanabilir. Başlık ve metin stilleri için bu, bu stilleri tüm web sitenizde kullanabileceğiniz çeşitli modüllere öğe ön ayarları olarak uygulamaktan çok daha verimlidir.

Kesme noktalarına sabit değerler atama

Sabit değerleri birden çok kesme noktasında seçtiyseniz, aşağıdaki video temel adımları göstermektedir. Bir metin modülüne tıklayın, Tasarım sekmesine gidin, metin seçenek grubunun üzerine gelin, OG simgesini tıklayın, yeni bir ön ayar oluşturun ve stillerinizi her kırma noktasına uygulayın. Sağ kenar çubuğunun altına gidin ve ön ayarınızı kaydedin ( çok önemli ). Bunu ortaya çıkardığınız kadar çok metin varyasyonu için tekrarlayın (küçük, düzenli ve büyük seçenekler gibi).

Bu seçenek grubu için en çok varsayılan ön ayarı olarak kullanmayı beklediğiniz OG ön ayarını atayın. Yanında bir yıldız görürseniz, geçerli varsayılanınızdır (bu, başka hiçbir modül stili veya öğe ön ayarlarının uygulanmadığını varsayarak, sitenizde geçerli olacaktır).

Clamp () işlevlerini atama (daha kolay)

Clamp () işleviyle tasarım değişkeni kullanılırken işlem benzerdir, ancak çok daha kolaydır. Aşağıdaki örnek videoda, opsiyon grubu düzeyinde iki başlık boyutu ayarladık. Yukarıdakilerden tek fark, değerleri yapıştırmamamız, daha önce kurduğumuz değişkenleri kullanmamızdır. OG ön ayarlarınızı kurarken, varsayılan yazı tiplerinin seçildiğinden emin olun ve renkleri istediğiniz gibi ayarlayın. Bazı insanlar bunun yerine modül seviyesinde renk ayarlamayı sever, ancak size kalmış.

Her H1-H6 başlık seviyesini yeni bir özel seçenek grup ön ayar olarak ayarlayacaksınız.

Bu ön ayarları, oluşturduğunuz seçenek grup ön ayarlarını kullanarak düzeninizin başlıklarına uygulayın. Seçenek grup ön ayarlarının güzelliği, metin, bulanıklık ve başlık modülleri gibi bu seçenek grubundaki modüller arasında çalışmalarıdır.

Divi 5'teki yazı tipleri için en iyi uygulamalar

Tipografinizi en üst düzeye çıkarmak için bu ipuçlarını aklınızda bulundurun:

• Her zaman küresel yazı tipi değişkenlerini erken ayarlayın.
• Tutarlı boşluk ve boyutlar kullanın (evet, harf aralığı ve çizgi yüksekliğini tasarım değişkenleri olarak ayarlayabilirsiniz).
• Ekran boyutları arasında düzenli olarak duyarlı görünümleri önizleyin.
• Çok fazla yazı tipinden veya yazı tipi ağırlığından kaçının.

Divi 5'teki tipografi temiz bir nefesdir

Artık Divi'nin en yeni özellikleri sayesinde tam bir tipografi sistemine sahipsiniz.

Yazı tipleri tasarım değişkenleri olarak yaşarlar. Clamp () kullandığınızda yazı tipi boyutları ile aynı. Veya bu özelleştirilebilir kesme noktalarının yedisini de egzersiz yapmak istiyorsanız, bu rotayı da alabilirsiniz.

Seçenek Grubu Ön Ayarları Bu seçenekleri tüm sitenizde zahmetsizce uygulayın. Bir yapı boyunca yazı tipi boyutlarını ayarlamak, tasarım değişkenleri olarak ayarlandıkları için çok kolaydır. Ne olursa olsun, tasarımlarınız keskin kalacak ve yapım süreniz azalacak.

Divi 5, tasarım sisteminizi yükselten birçok yeni özellik başlattı. En son özelliklerden yararlanmak için bugün Divi 5'te yeni siteler oluşturmaya başlayın. Mevcut web sitelerini Divi 5'e taşımak için biraz daha uzun süre beklemenizi öneririz.