Modüler Tipografi Ölçeği: Tutarlı Bir Tipografi Sistemi Nasıl Oluşturulur?

Modüler bir ölçek, üründeki her yazı tipi boyutunu oluşturan tek bir temel boyuta uygulanan tek bir orandır. Tüm fikir budur. Oranı seçersiniz, tabanı kilitlersiniz, adımları oluşturursunuz, bunları belirteçler olarak gönderirsiniz ve tek seferlik piksel değerleri yerine her yerde bu belirteçleri kullanırsınız. İyi yapıldığında, üründeki her boyut diğer her boyutla ilişkiliymiş gibi hissettirir, çünkü matematiksel olarak öyledirler.

Kötü yapıldığında ise, kimsenin savunamayacağı on yedi yazı tipi boyutu, hiyerarşi için gövde metniyle çatışan başlıklar ve her çeyrekte birinin "boyutları standartlaştıralım" diye önerdiği ve kimsenin neye göre standartlaştırılacağını bilmediği bir yeniden tasarım toplantısıyla sonuçlanırsınız. Ölçek, standartlaştırdığınız şeydir. Bu yazı, gerçek oranlara, gerçek bir belirteç yapısına ve onu çalıştırılabilir kılan Figma ve Tailwind çevirilerine sahip gerçek bir üründe nasıl ayakta kalacağını anlatmaktadır.

Modüler Tip Ölçeği Aslında Nedir?

Modüler tip ölçeği, üründeki her yazı tipi boyutunu üreten, temel boyuta uygulanan tek bir orandır ve bu tek oran asıl noktadır.

Örneğin, 16 piksel gibi bir temel boyut ve 1,25 gibi bir oran seçin. 16'yı 1,25 ile çarpın, 20 elde edersiniz. 20'yi 1,25 ile çarpın, 25 elde edersiniz. Devam edin ve 31, 39, 49, 61 elde edersiniz. 16'yı 1,25'e bölün, 12,8 elde edersiniz. Bunu 1,25'e bölün, 10,24 elde edersiniz. İşte ölçek budur. Sekiz boyut, bir temel, bir oran, tam matematiksel tutarlılık.

Bunun işe yaramasının nedeni psikofiziktir. İnsan görsel algısı, mutlak farklılıklara değil, oranlara tepki verir. 12'den 14'e sıçrama, 24'ten 28'e sıçramayla yaklaşık olarak aynı algısal adımı temsil eder, çünkü her ikisi de kabaca aynıdır. Doğrusal bir ölçek (12, 14, 16, 18, 20, 22) üstte sıkışık, altta ise aşırı geniş hissettirir. Modüler bir ölçek ise, göreli olarak eşit olduğu için, dengeli hissettirir.

Aynı mantık, müzik aralıklarını (oktavlar 2x, beşliler 1.5x, dörtlüler 1.333x), fotoğraf diyaframlarını ve mimari oran teorisinin çoğunu destekler. Sadece Type'tan ödünç alınmıştır. Bu makalede göreceğiniz adlandırılmış oranlar (minör ikinci, mükemmel dörtlü, altın oran) bir nedenden dolayı müzikten alınmıştır: aynı tür algısal ilişkiyi tanımlarlar.

Gerçek ürünleri kapsayan beş oran

Çoğu ürün 1.125 ile 1.618 arasında yer alır ve her oran belirli bir yoğunluk sinyali taşır.

Hemen hemen her gerçek arayüzü kapsayan beş oran:

| Oran | Ad | Yoğunluk sinyali | Gerçek uygulama |

|------:|------|----------------|---------------------|

| 1.125 | Küçük ikinci oran | Sıkı, yoğun, veri ağırlıklı | Vercel, Geist, çoğu yönetici paneli |

| 1.2 | Küçük üçüncü oran | Kompakt, dengeli | Tailwind varsayılan ölçeği |

| 1.25 | Büyük üçüncü oran | Standart editoryal | Stripe, Material 3 gövde rolleri |

| 1.333 | Mükemmel dördüncü oran | Cömert, dergi hissi | Editoryal siteler, uzun formatlı bloglar |

| 1.618 | Altın oran | Dramatik, görüntü odaklı | Pazarlama sayfaları, kahraman odaklı siteler |

Bazen iki oran daha ortaya çıkar. 1.414 (artırılmış dördüncü, yani 2'nin karekökü ve A4 kağıdının arkasındaki oran), mükemmel dördüncü ve mükemmel beşinci arasında yer alır ve 1.333'ün verdiğinden bir adım daha dramatik bir etki isteyen dergi tarzı ürünler için makul bir seçimdir. 1.5 (mükemmel beşinci), 1.333'ten daha yüksek sesli ve 1.618'den daha sessizdir ve birçok pazarlama sayfası oluşturucusunda varsayılan değerdir.

Bu aralığın dışında oranlar kullanabilirsiniz, ancak genellikle kullanmamalısınız. 1.1'in altında, adımlar o kadar küçüktür ki birbirine karışır, bir bakışta başlık 3 ile başlık 4'ü ayırt edemezsiniz. 1.7'nin üzerinde, ölçek o kadar hızlı yükselir ki kullanılabilir orta boyutlar tükenir. 1.618'in verdiğinden daha geniş bir aralık isteyen tasarımcılar genellikle yanlış problemi çözüyorlar, iki ölçek istiyorlar, daha büyük bir ölçek değil.

Yoğunluğunuza Uygun Oranı Seçin

Yoğun veri içeren bir uygulama dar bir oran isterken, bir yayın sitesi geniş bir oran ister ve yanlış seçim her yerde kendini gösterir.

Ürün bir kontrol paneli, yönetici paneli, CRM, analiz aracı veya kullanıcının saatlerce yoğun bilgi satırlarını okuduğu herhangi bir şey ise, varsayılan olarak 1.125 veya 1.2'yi seçin. Dar oran, başlık boyutlarının verilerden dikkati dağıtmamasını sağlar. Hiyerarşi hala çalışır çünkü bu ölçekteki hiyerarşi çoğunlukla boyuttan değil, ağırlık, renk ve aralıktan kaynaklanır.

Ürün bir SaaS pazarlama sayfası, içerik sitesi, ürün sayfası veya dokümantasyon yüzeyi ise, varsayılan olarak 1.25 veya 1.333'ü seçin. Orta oranlar, gövde metninin karşılaştırmalı olarak küçük görünmesini engellemeden bölümleri birbirinden ayırmak için yeterli başlık draması sağlar. Çoğu B2B ürünü burada yer alır ve Tailwind, Material ve Stripe'nın birleştiği yer burasıdır.

Eğer ürün editoryal, dergi tarzı veya görsel odaklıysa, örneğin uzun metinli bir yayın, moda sitesi veya kampanya mikro sitesi gibi, varsayılan olarak 1.414 veya 1.618 oranını kullanın. Geniş oran, başlıkların tam bir kahraman bloğunu hak eden türden başlıklar gibi görünmesini sağlar. Gövde metni makul kalabilir çünkü kahraman bloğu ile gövde metni arasındaki boşluk işi halleder.

Hata, etkileyici göründüğü için (altın oran ünlü bir örnektir) bir oran seçmek ve bunu o dramaya ihtiyaç duymayan bir ürüne zorla uygulamaktır. Bir CRM'de 1.618 oranı okunaksız bir gürültüdür. Bir editoryal sitede 1.125 oranı zayıf görünür. Ürününüzün gerçekten ihtiyaç duyduğu oranı seçin ve ardından buna bağlı kalın.

Ölçeklendirmeden önce temel boyutu kilitleyin

Temel yazı tipi boyutu, her adımın ölçüldüğü çapa noktasıdır; yanlış yaparsanız her adım yanlış olur.

Web'de gövde metni için varsayılan olarak 16 piksel kullanın. Tarayıcı varsayılanı 16'dır, kullanıcı aracısı stil sayfası 16'dır, yetişkinler için tercih edilen ortalama okuma boyutu 16'dır ve WCAG ve Apple İnsan Arayüzü Yönergeleri'nden gelen erişilebilirlik kılavuzları, gövde metni için 16'yı taban olarak kabul eder. Hedef kitle daha yaşlıysa veya ürün okuma ağırlıklıysa 17 veya 18'e çıkabilirsiniz, ancak gövde metninde asla 16'nın altına inmemelisiniz.

Bu taban, çarpan noktasıdır. Her üst adım, tabanın oranın bir kuvvetiyle çarpılmasıdır. Her alt adım, tabanın oranın bir kuvvetine bölünmesidir. Tabanı değiştirirseniz, her adım kayar. Bu sorun değil, sistem böyle çalışıyor. Ancak bu, tabanı değiştirmenin yapısal bir değişiklik olduğu, ekran başına bir ince ayar olmadığı ve ölçek piyasaya sürülmeden önce bir kez, kasıtlı olarak yapılması gerektiği anlamına gelir.

Mobil için, tabanı küçültebilir (15 veya 16) ve göreceli birimlere güvenebilirsiniz. Baskı için taban genellikle 11 veya 12 punto olur ve oranlar aynı kalır. Kod bloklu dokümantasyon yüzeyleri için, gövdeyi 16, kod mono'yu ise 14 olarak ayarlayın ve kod ölçeğine de aynı oranı uygulayın. Taban, ortam başına, oran ise ürün başına belirlenir ve her ikisi de bir kez verdiğiniz kararlardır.

Bir kural daha. Web'de tabanı piksel değil, rem olarak ayarlayın. Kullanıcı yazı tipi boyutu tercihleri ​​ve erişilebilirlik araçlarının (yakınlaştırma, okuma modu, tarayıcı ölçeklendirme) doğru şekilde yayılması için tüm ölçek rem cinsinden ifade edilmelidir. Tailwind bunu zaten yapıyor. Material bunu yapıyor. Apple'in iOS dinamik yazı tipi de bunun eşdeğerini yapıyor. Ölçeğiniz piksel cinsinden sabit kodlanmışsa, platformla mücadele ediyorsunuz demektir.

Adımları oluşturun, rolüne göre etiketleyin

Yedi ila dokuz adımdan oluşan bir ölçek, bir ürünün ihtiyaç duyduğu her boyutu kapsar; bunları boyuta göre değil, role göre adlandırın.

16 piksel taban ve 1,25 oran alın. Adımlar şunlardır:

• 10 (ekstra küçük başlık, dipnot)
• 13 (küçük, ikincil metin)
• 16 (gövde, temel)
• 20 (giriş, büyük gövde)
• 25 (h4, küçük başlık)
• 31 (h3, orta başlık)
• 39 (h2, büyük başlık)
• 49 (h1, sayfa başlığı)
• 61 (görüntüleme, kahraman)

Dokuz adım. Bu, ürünün tamamıdır. Bazı ürünler yedi veya sekiz adım kullanır, bazıları ona kadar çıkar, ancak ondan sonra ölçek incelmeye başlar ve kimsenin kullanmadığı boyutlar elde edersiniz.

Şimdi bunları adlandırın. "metin-31" veya "39px" değil. Bunları role göre adlandırın: başlık, küçük, gövde, giriş, h4, h3, h2, h1, görüntüleme. Rol adları, piksel değerleri değil, mühendislikle yapılan sözleşmedir. Temel veya oran değişirse piksel değeri değişebilir, ancak rol aynı kalır. h1 her zaman en büyük başlıktır. body her zaman temel metindir. caption her zaman en küçük okunabilir metindir.

Bu, bir ölçeği bir elektronik tablo yerine bir sistem haline getiren şeydir. Bir tasarımcı "bu gövdedir" der ve bir mühendis text-body'yi gönderir. Ölçek bir sonraki çeyrekte değişirse, body hala gövde anlamına gelir ve her bileşen yeni değeri otomatik olarak alır. Kimsenin kod tabanındaki her 16'yı bulup 17'ye değiştirmesi gerekmez.

Material Design 3, ölçeğini rolüne göre adlandırarak sunar: display, headline, title, label, body, her birinin içinde boyut varyantları (büyük, orta, küçük) bulunur. Apple'un HIG'si Büyük Başlık, Başlık 1, Başlık 2, Başlık 3, Başlık, Gövde, Açıklama, Alt Başlık, Dipnot, Alt Yazı 1, Alt Yazı 2'yi gönderir. Tailwind, rol adlandırması yerine tişört boyutlandırması olan text-xs'den text-9xl'ye kadar metin boyutlandırması gönderir ve Tailwind'in varsayılanlarının Material'ınkinden tartışmalı olarak daha zayıf olduğu tek yer burasıdır. Tailwind'i benimseyen çoğu ekip, sonunda tişört sınıflarının üzerine rol adlandırılmış takma adlar ekler.

Ölçeği tasarım belirteçlerine çevirin

Belirteçler, ölçeği bir tasarımcının elektronik tablosundan ekibin sözleşmesine dönüştürür.

Tasarım belirteçleri, tasarım kararlarını temsil eden adlandırılmış değerlerdir. Bir yazı tipi ölçeği için üç katmana ihtiyacınız vardır:

1. Ham belirteçler. Gerçek boyut değerleri. font-size-100, font-size-200, vb. veya font-size-body, font-size-h1 gibi adlandırılmış olanlar. Bunlar gerçeğin kaynağıdır.

2. Semantik belirteçler. Niyet ifade eden takma adlar. text-heading-page, text-body-default, text-caption. Semantik belirteçler ham belirteçlere işaret eder. Bileşenler semantik belirteçleri kullanır, asla doğrudan ham belirteçleri kullanmaz.

3. Bileşen belirteçleri. Belirli bileşenler içindeki bağlamalar. card-title-size, text-heading-card'e işaret eder, o da font-size-200'a işaret eder. Bileşen belirteçleri, sistemi bozmadan bileşen başına geçersiz kılma imkanı sağlar.

16 tabanlı, 1,25 oranlı bir ölçek için minimal bir JSON belirteç dosyası:

{
  "font-size": {
    "raw": {
      "100": { "value": "0.625rem" },
      "200": { "value": "0.8125rem" },
      "300": { "value": "1rem" },
      "400": { "value": "1.25rem" },
      "500": { "value": "1.5625rem" },
      "600": { "value": "1.9375rem" },
      "700": { "value": "2.4375rem" },
      "800": { "value": "3.0625rem" },
      "900": { "value": "3.8125rem" }
    },
    "semantic": {
      "caption":  { "value": "{font-size.raw.100}" },
      "small":    { "value": "{font-size.raw.200}" },
      "body":     { "value": "{font-size.raw.300}" },
      "lead":     { "value": "{font-size.raw.400}" },
      "h4":       { "value": "{font-size.raw.500}" },
      "h3":       { "value": "{font-size.raw.600}" },
      "h2":       { "value": "{font-size.raw.700}" },
      "h1":       { "value": "{font-size.raw.800}" },
      "display":  { "value": "{font-size.raw.900}" }
    }
  }
}

Bu yapı taşınabilir. Stil Sözlüğü, Tokens Studio, Specify, Supernova, hepsi bu formatı okur ve Figma değişkenleri, CSS değişkenleri, Tailwind yapılandırması, iOS Swift sabitleri, Android XML, platformların ihtiyaç duyduğu her şeyi üretir. Belirteçler kaynaktır. Geri kalan her şey oluşturulur.

Ölçeği Figma değişkenlerine gönderin

Figma değişkenleri, tasarım ekibi için ölçeğin bulunduğu yerdir ve anlamsal takma adlara sahip tek bir tipografi koleksiyonu olarak yapılandırılmıştır.

Tipografi adında bir Değişkenler koleksiyonu oluşturun. İçine, her ham boyut için bir sayı değişkeni ekleyin: size/100'dan size/900'e kadar, rem eşdeğeri piksel değerleriyle (10, 13, 16, 20, 25, 31, 39, 49, 61). Ardından ikinci bir takma ad katmanı ekleyin: text/caption, text/small, text/body, text/lead, text/h4, text/h3, text/h2, text/h1, text/display. Her takma ad bir ham boyut değişkenine işaret eder.

Ardından, her rol için bir tane olmak üzere metin stilleri oluşturun. Heading/H1, boyut için text/h1'yi, yazı tipi ailesi için başlık yazı tipinizi, kalınlık için başlık ağırlığınızı ve satır aralığı için başlık satır yüksekliği oranınızı kullanır. Body/Default, gövde yazı tipinizin normal kalınlığı olan text/body'ü kullanır. Her rol için tekrarlayın.

Buradaki disiplin, tasarımcıların arayüzleri yazı tipi boyutlarını denetleyiciye yazarak değil, metin stilleri kullanarak oluşturmalarıdır. Bir ekip bu disiplini benimsediğinde, ölçek kendi kendini uygular hale gelir. Özel bir boyut belirleyen herkes, kalıbı görünür bir şekilde bozmak zorundadır ve bu görünürlük, yönetimin temelini oluşturur.

Birden fazla yoğunluk modunu destekliyorsanız, bunu bir Modlar kurulumuyla eşleştirin. "Kompakt" bir mod, daha yoğun bir deneyim için 1.125 oranını kullanmak üzere ham boyut değişkenlerini geçersiz kılabilir. "Rahat" bir mod 1.25 kullanabilir. Takma adlar aynı kalır. Bileşenler değişmez. Ölçek sadece onların altında kayar. Sistem size bunu sağlıyor.

Ölçeği Tailwind CSS'ye Entegre Etme

Tailwind yapılandırması, mühendislik ekibi için ölçeğin bulunduğu yerdir ve Figma değişken yapısını tam olarak yansıtmalıdır.

Tailwind'in varsayılan fontSize değerini, tailwind.config.js içindeki ölçeğinizle değiştirin:

module.exports = {
  theme: {
    fontSize: {
      'caption':  ['0.625rem',  { lineHeight: '1rem' }],
      'small':    ['0.8125rem', { lineHeight: '1.25rem' }],
      'body':     ['1rem',      { lineHeight: '1.5rem' }],
      'lead':     ['1.25rem',   { lineHeight: '1.75rem' }],
      'h4':       ['1.5625rem', { lineHeight: '2rem' }],
      'h3':       ['1.9375rem', { lineHeight: '2.375rem' }],
      'h2':       ['2.4375rem', { lineHeight: '2.875rem' }],
      'h1':       ['3.0625rem', { lineHeight: '3.5rem' }],
      'display':  ['3.8125rem', { lineHeight: '4.25rem' }],
    },
  },
}

Artık işaretlemedeki text-h1, Figma içindeki Heading/H1 ile aynı anlama geliyor. Sınıf adı sözleşmedir. Mühendisler boyutları değil, rolleri seçer ve rol, derleme zamanında doğru piksel değerine çözümlenir.

Buradaki satır yükseklikleri keyfi değildir. Desen şöyledir: küçük boyutlar için dar gövde satır yüksekliği, gövde ve giriş için daha gevşek satır aralığı, başlıklar için tekrar dar satır aralığı. Genel bir kural, gövde satır yüksekliğinin 1,5, başlık satır yüksekliğinin 1,1 ila 1,2 arasında olması ve satır aralığı ile h4 boyutları etrafında 1,3 ila 1,4 arasında bir geçiş olmasıdır. Bunu başka bir ölçek (satır aralığı ölçeği) veya adım başına değerler olarak ifade edebilirsiniz, ancak boyut ve satır aralığı arasındaki ilişki göz kararı değil, bilinçli olmalıdır.

Tailwind'in varsayılan sınıflarını ölçeğinizle birlikte (eski kod veya üçüncü taraf bileşenler için) kullanılabilir halde tutmak istiyorsanız, fontSize'u doğrudan değiştirmek yerine extend'u kullanın. Ancak uzun vadeli hedef iki değil, tek bir ölçek. Aynı üründe iki tip ölçeği, sadece bir tip ölçeği ve bir sürü kaza anlamına gelir.

Ölçeği, yazı tipi seçimleri için gerçek bir yazı tipi eşleştirme kılavuzu ve ölçeği bağlam içine yerleştiren bir tasarım sistemi çerçevesiyle eşleştirin. Ölçek, tipografi sisteminin bir parçasıdır, yazı tipi seçimi ve rol eşlemesi diğer parçalarıdır. Çalışır durumda bir ölçek, gerçek token'lar ve Figma + Tailwind'in ilk günden itibaren doğru şekilde kurulmasına mı ihtiyacınız var? Brainy'ı işe alın. Token'lar, Figma değişkenleri ve Tailwind yapılandırması tek bir teslimat olarak bir araya getirilmiş, BrandBrainy ve UXBrainy aracılığıyla eksiksiz tip sistemleri gönderiyoruz.

Bir ölçeği canlı tutan yönetim kuralları

Her ölü tip ölçeği aynı şekilde, istisnai olarak öldü.

Üç kural, bir ölçeği herhangi bir araçtan daha uzun süre canlı tutacaktır:

Birinci kural: her yeni bileşen boyutları değil, rolleri seçer. Bir kart oluşturan tasarımcı, gövde için Gövde, başlık için H3, zaman damgası için Başlık seçer. Denetleyiciye font-size: 18px yazmazlar. Rol mevcut değilse, tek seferlik bir geçersiz kılma değil, sistem aracılığıyla yeni bir rol önerirler.

İkinci Kural: İstisnalara isim ve tarih verilir. Pazarlama ekibinin kampanya sayfasındaki ana başlık için 72 piksellik bir başlığa ihtiyacı varsa ve ekran boyutu 61 piksel ise, istisnaya isim verilir (hero-marketing-q3-launch) ve tarih atılır. Kampanya yayınlandıktan sonra, istisna ya ölçeğe dahil edilir (yeniden kullanılabilirse) ya da silinir (tek seferlik ise). Anonim geçersiz kılma yok.

Üçüncü Kural: Ölçek yıllık değil, üç ayda bir gözden geçirilir. Üç aylık süre, sapmalar henüz küçükken yakalanacak kadar kısadır. Yıllık süre ise her ekibin eksiklikleri gidermek için bir proje oluşturması ve geri almanın bir proje olması için yeterince uzundur. Üç aylık inceleme on beş dakikadır. Yıllık inceleme ise yeniden tasarım demektir.

Tipografi ölçeğini kaybeden ekipler her zaman sonrasında aynı hikayeyi anlatırlar. Birinin bir düğme için 17 piksel boyutuna, bir başkasının bir banner için 21 piksel boyutuna ihtiyacı vardı; altı ay sonra kod tabanında kırk yedi farklı yazı tipi boyutu var ve kimse hangisinin gerçek olduğunu söyleyemiyor. Ölçek kayboldu. Geriye kalan ise bir yazı tipi boyutu mezarlığı.

Bunu önlemek için ölçeği bir elektronik tablo değil, bir sözleşme olarak ele almalısınız. Sözleşme, araçlar (Figma stilleri, Tailwind sınıfları, lint kuralları) ve inceleme ile uygulanır. Sözleşme, üç aylık incelemede yeniden müzakere edilir. Sözleşmenin dışında kalan her şey bir hatadır.

SSS

Modüler yazı tipi ölçeği nedir?

Modüler yazı tipi ölçeği, bir üründeki her yazı tipi boyutunun tek bir temel boyuta tek bir oran uygulanarak oluşturulduğu bir sistemdir. Genellikle web için 16 piksel olan bir taban seçin, genellikle 1,125 ile 1,618 arasında bir oran seçin ve adımları oluşturmak için tabanı oranla tekrar tekrar çarpın veya bölün. Sonuç, her boyutun diğer her boyutla matematiksel olarak ilişkili olduğu bir ölçek olur; bu da tipografiye, keyfi piksel seçimlerinin sağlayamayacağı bir iç tutarlılık hissi verir.

Tipografi ölçeğim için hangi oranı kullanmalıyım?

Ürününüzün ihtiyaç duyduğu yoğunluk için oranı seçin. Başlıkların verilerden dikkati dağıtmaması gereken gösterge panoları ve yönetim araçları gibi yoğun veri ürünleri için 1,125 veya 1,2 kullanın. Çoğu B2B ürününün bulunduğu standart SaaS pazarlama sayfaları, içerik siteleri ve ürün sayfaları için 1,25 veya 1,333 kullanın. Başlıkların başlık gibi görünmesi gereken editoryal, dergi veya ekran odaklı ürünler için 1,414 veya 1,618 kullanın. En yaygın hata, ürüne uygun olduğu için değil, etkileyici göründüğü için bir oran seçmektir.

Bir yazı tipi ölçeği kaç boyuta sahip olmalıdır?

Çoğu üretime hazır ölçek yedi ila dokuz boyuta sahiptir. Başlık, küçük, gövde, giriş, h4, h3, h2, h1 ve başlık, neredeyse her gerçek ürün yüzeyini kapsar. Yedi boyutun altına inmek, tasarımcıların tek seferlik geçersiz kılmalarla dolduracağı boşluklar bırakır. On boyutun üzerine çıkmak, ölçeği bazı boyutların asla kullanılmadığı ve sistemin bakımının zorlaştığı noktaya kadar inceltir. Yedi ila dokuz ideal aralıktır ve rol adları, piksel değerini değil, her boyutun ne için olduğunu açıklamalıdır.

Yazı tipi ölçeği değerleri için rem mi yoksa px mi kullanmalıyım?

Web için rem kullanın. Tarayıcı kök yazı tipi boyutu varsayılan olarak 16 pikseldir, ancak kullanıcı bunu erişilebilirlik ayarları ve tarayıcı tercihleri ​​aracılığıyla değiştirebilir ve rem tabanlı bir ölçek bu tercihleri ​​otomatik olarak dikkate alır. Piksel tabanlı ölçekler bunları yok sayar. Tailwind, Material Design ve çoğu modern tasarım sistemi bu nedenle rem kullanır. Mobil platformlar için platformu takip edin: iOS puan kullanır ve dinamik tip desteği sunar, Android ise ölçekten bağımsız pikseller (sp) kullanır. Prensip aynıdır, mutlak birimler yerine platformun göreceli birimini kullanın.

Modüler tip ölçeği ile tasarım belirteçleri arasındaki fark nedir?

Modüler tip ölçeği matematiktir, tasarım belirteçleri ise matematiğin nasıl gönderildiğini gösterir. Ölçek değerleri tanımlar (10, 13, 16, 20, 25, 31, 39, 49, 61). Belirteçler, tasarım sisteminin geri kalanının bu değerlere sabit kodlama yapmadan referans vermesini sağlayan adlandırılmış katmandır. Belirteçler olmadan bir ölçek olabilir, ancak ölçek gerçek bir kod tabanında çalışmaz. Ölçek olmadan belirteçler olabilir, ancak değerler keyfi olur. Tam sistem, ham, anlamsal ve bileşen katmanlarıyla belirteçler olarak ifade edilen ölçek olup, aynı kaynak üzerinden Figma'a ve koda gönderilir.

Çoğu Tip Ölçeğinin Kaçırdığı Kalıp

Bir tip ölçeği, yazı tipi boyutlarının bir listesi değil, metnin ürününüzde nasıl bir hiyerarşi kazandığına dair bir sözleşmedir.

Bunu doğru yapan ekipler bir oran seçip durmazlar. Bir oran seçerler, ölçeği oluştururlar, token olarak gönderirler, Figma ve Tailwind'e entegre ederler ve ardından bunu üç aylık bir inceleme ve caydırıcı bir kural aracılığıyla uygularlar. Teslim edilecek şey ölçek değil, disiplindir. Teslim edilecek şey, disiplini mümkün kılan şeydir.

Bunu yanlış yapan ekipler ölçeği bir moodboard gibi ele alırlar. Pinterest'teki bir mockup'tan güzel oranlar seçerler, statik bir spesifikasyon belgesi gönderirler ve altı ay sonra mühendislik ekibinin bunu asla benimsemediğini keşfederler çünkü spesifikasyon belgesi yürütülebilir kod değildi. Ya da ölçeği Figma'e gönderirler ve Tailwind'e asla göndermezler ve tasarım dosyaları ve üretim uygulaması birbirinden uzaklaşarak farklı yazı tiplerinde iki farklı ürün haline gelir. Ya da her ikisine de ürün gönderirler ama asla yönetmezler ve bir yıl içinde istisnalar kurallardan daha fazla olur.

Kısayol, ölçeği ilk günden itibaren bir sözleşme olarak ele almaktır. Matematik adımları belirler. Tokenlar adımları gönderilebilir hale getirir. Figma değişkenleri ve Tailwind yapılandırması, adımları tasarım-mühendislik hattının her iki tarafında da kullanılabilir hale getirir. Yönetişim, lansmandan sonra adımları canlı tutar. Sistemin her parçası tek bir iş yapar ve bunlardan herhangi biri eksikse sistem başarısız olur.

Çalışan modüler bir ölçek, gerçek tokenlar, gerçek Figma değişkenleri, gerçek Tailwind yapılandırması ve lansmandan sonra ölçeği bir arada tutacak bir yönetişim planı istiyorsanız, Brainy'ı işe alın'ü tercih edin. BrandBrainy ve UXBrainy aracılığıyla, tip ölçekleri ilk günden itibaren belirteçler olarak tasarlanmış, tipografi sistemi marka renk paleti'ya bağlı ve ekip ürünü piyasaya sürdükten sonra sistemin canlı kalmasını sağlayan kurallarla birlikte eksiksiz tasarım sistemleri gönderiyoruz.