Tipografi Sistemi Tasarımı: Ölçeklenebilir Yazı Tipi Nasıl Oluşturulur

Bir font seçmek, bir tipografi sistemi tasarlamak değildir. Birlikte güzel görünen iki font seçmek de hala bir tipografi sistemi tasarlamak değildir. Bir tipografi sistemi, ürününüzdeki, markanızdaki veya arayüzünüzdeki her metin parçasının görüneceği her bağlamda nasıl davrandığını belirleyen kurallar bütünüdür.

Çoğu tasarımcı bu adımı atlar. Bir başlık fontu ve bir gövde fontu seçer, boyutları göz kararı ayarlar ve işi bitmiş sayar. Sonra altı ay sonra, pazarlama sitesi bir ölçek kullanır, uygulama başka bir ölçek kullanır, sunum destesi üçüncü bir ölçek kullanır ve logo değişmemiş olsa bile markanın neden tutarsız hissettirdiğini kimse açıklayamaz.

Bu tutarsızlık bir yazı tipi sistemi sorunudur. Ve düzeltilebilir.

Bir Tipografi Sistemi Aslında Neler İçerir

Gerçek bir tipografi sistemi beş şeyi tanımlar:

1. Bir yazı tipi ölçeği. Metin boyutlarınız arasındaki matematiksel ilişki.
2. Font eşleştirmeleri. Hangi yazı tiplerinin hangi rolleri oynadığı ve neden.
3. Kalınlık ve stil kuralları. Ne zaman kalın, italik, orta kalınlık kullanılacağı ve her kalınlığın neyi ifade ettiği.
4. Boşluk standartları. Satır yüksekliği, harf aralığı ve paragraf aralığı her boyut için.
5. Duyarlı davranış. Yukarıdaki her öğenin ekran boyutlarına göre nasıl adapte olduğu.

Eğer "yazı tipi sisteminizde" bunlardan herhangi biri eksikse, bir sisteminiz değil, font seçimleriniz var demektir.

Yazı Tipi Ölçeği Temeldir

Bir yazı tipi ölçeği, tutarlı bir matematiksel orandan türetilmiş bir font boyutları kümesidir. Boyutları hisse göre seçmek yerine (burada 16 piksel, orada 24 piksel, belki ana başlık için 36 piksel), bir taban boyutu ve bir oran seçersiniz ve diğer tüm boyutlar bundan türetilir.

İşe yarayan yaygın oranlar:

| Oran | Adı | Hissiyat | En İyisi | |---| | 1.125 | Büyük İkili | Sıkı, yoğun | Yoğun veri panoları, küçük ekranlar | | 1.200 | Küçük Üçlü | Dengeli, sakin | Editoryal, dokümantasyon | | 1.250 | Büyük Üçlü | Net hiyerarşi | Pazarlama siteleri, portföyler | | 1.333 | Mükemmel Dörtlü | Güçlü kontrast | Açılış sayfaları, başlıklar | | 1.618 | Altın Oran | Dramatik | Baskı, poster tasarımı, ana bölümler |

16 piksel tabanla başlayın (tarayıcı varsayılanı, erişilebilir, okunabilir) ve başlıklar için yukarı doğru çarpın, alt yazılar ve etiketler için aşağı doğru bölün. 16 pikselden Büyük Üçlü ölçek size şunları verir: 10 piksel, 12.8 piksel, 16 piksel, 20 piksel, 25 piksel, 31.25 piksel, 39 piksel. Temiz değerlere yuvarlayın ve keyfi yerine kasıtlı hissettiren bir ölçeğe sahip olursunuz.

Font Eşleştirme Stratejidir

İnternet "en iyi font eşleştirmeleri" listeleriyle dolu. Çoğu, tasarım tavsiyesi kılığına girmiş dekorasyon tavsiyesidir. Gerçek font eşleştirme stratejiktir.

Gerçekten işe yarayan kurallar:

Yapıda kontrast, oranda uyum. Geometrik bir sans-serif'i hümanist bir serif ile eşleştirin. Yapısal kontrast görsel ilgi yaratır. Paylaşılan x-yüksekliği ve oran, onların bir araya aitmiş gibi hissetmelerini sağlar. Inter + Merriweather. DM Sans + Lora. Satoshi + Source Serif.

Her rol için tek ses. Başlık yazı tipiniz kişiliği taşır. Gövde yazı tipiniz içeriği taşır. UI yazı tipiniz işlevi taşır. Bir fontu üçünü de yapmaya çalışmak, jenerik veya zorlama hissettiren bir sistemle sonuçlanmanıza neden olur.

İki font neredeyse her zaman yeterlidir. Yönetilebilir kalması gereken herhangi bir sistem için üç, maksimumdur. Her ek yazı tipi, yapmanız gereken eşleştirme kararlarının, kalınlık kararlarının ve duyarlı kararların sayısını katlar. Dört fonta ihtiyacınız olduğunu düşünüyorsanız, muhtemelen iki fontu daha iyi kullanmanız gerekiyordur.

Eşleştirmeyi bir örnekte değil, bağlam içinde test edin. Bir yazı tipi örneği posterinde güzel görünen bir eşleştirme, bir kart bileşeninin veya bir gezinme çubuğunun içinde dağılabilir. Taahhüt etmeden önce gerçek düzende test edin.

Kalınlık ve Stil Kuralları

Kalınlık hiyerarşidir. Kalın, önemli demektir. Orta kalınlık, destekleyici demektir. Normal, gövde demektir. İnce, dekoratif veya ikincil demektir. Bu çağrışımlar, insanların okuma biçimine yerleşmiştir.

Hata, kalınlığı tutarsız kullanmaktır. Eğer pazarlama sitesinde H2'niz yarı kalın (semibold) ama uygulamada kalınsa, font aynı olsa bile marka farklı hissettirir. Bir yazı tipi sistemi bunu sabitler:

• H1: Kalın (700). Her zaman. Bu sizin en yüksek sesinizdir.
• H2: Yarı kalın (600) veya Kalın (700). Birini seçin, her yerde kullanın.
• H3: Orta (500). H2 ile rekabet etmeden fark edilmek için yeterli kontrast.
• Gövde: Normal (400). Okunabilir, nötr, sürtünmesiz.
• Alt yazılar ve etiketler: Daha küçük boyutlarda Normal (400) veya Orta (500).

İtalik'in tek bir görevi vardır: gövde metni içinde vurgu. İtalik'i dekoratif amaçlarla kullanmak (alıntılar, bölüm etiketleri) anlamını seyreltir ve gerçek vurguyu görünmez kılar.

Boşluklar Sistemlerin Bozulduğu Yerdir

Satır yüksekliği, harf aralığı ve paragraf aralığı, çoğu "yazı tipi sisteminin" sessizce dağıldığı yerlerdir. Font boyutları ürünler arasında eşleşir, kalınlıklar eşleşir, ancak boşluklar tutarsız olduğu için metin farklı hissettirir.

Satır yüksekliği kuralları:

Başlıklar daha sıkı satır yüksekliğine (1.1 ila 1.3) ihtiyaç duyar çünkü büyük metin, gövde metni oranlarında çok fazla dikey boşluk yaratır. Gövde metni, rahat okuma için daha gevşek satır yüksekliğine (1.5 ila 1.8) ihtiyaç duyar. Yaygın hata, her şeye 1.5 uygulamaktır, bu da başlıkların yüzmesine ve gövde metninin yanlış boyutta sıkışık hissetmesine neden olur.

Harf aralığı kuralları:

Büyük metin (başlıklar, ekran) hafif negatif harf aralığından (-0.01em ila -0.02em) faydalanır. Büyük boyutlardaki optik boşluk, amaçlanandan daha geniş hissettiren boşluklar yaratır. Küçük metin (alt yazılar, etiketler, büyük harfler) hafif pozitif harf aralığından (+0.02em ila +0.05em) faydalanır çünkü küçük boyutlardaki sıkı izleme okunabilirliği azaltır.

Paragraf aralığı:

Temel biriminizin tutarlı bir çarpanını kullanın. Eğer temeliniz 4 piksel ızgaralı 16 piksel ise, paragraf aralığı keyfi bir değer yerine 16 piksel veya 24 piksel olmalıdır. Bu, her sayfada dikey ritmi tutarlı tutar.

Duyarlı Davranış

Tek bir kesme noktasında çalışan bir yazı tipi sistemi, bir sistem değildir. O bir ekran görüntüsüdür.

Akışkan tipografi, CSS clamp() kullanarak font boyutlarını kesme noktaları arasında sorunsuz bir şekilde ölçekler. Bir kesme noktasında 16 pikselden 14 piksele atlamak yerine, boyut enterpolasyon yapar. Bu, sert kesme noktası değişikliklerinden kaynaklanan düzen bozukluğunu ortadan kaldırır.

font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem);

Mobilde ölçek sıkıştırma. Masaüstü ölçek oranınız (örneğin 1.250), küçük bir ekranda çok fazla kontrast yaratır. Masaüstünde 39 piksel H1 işe yarar. 375 piksel bir telefonda 39 piksel H1 işe yaramaz. Çözüm: taban boyutunu aynı tutarken mobil cihazlarda oranı sıkıştırın (1.125 veya 1.150'ye düşürün). Hiyerarşi kalır, boyutlar adapte olur.

Minimum okunabilir boyutlar. Mobilde gövde metni için asla 16 pikselin altına inmeyin. Herhangi bir metin için asla 12 pikselin altına inmeyin. Erişilebilirlik isteğe bağlı değildir ve küçük ekranlardaki küçük metinler gerçek kullanıcıları başarısızlığa uğratır.

Yaygın Yazı Tipi Sistemi Hataları

Font büfesi. Beş yazı tipi, hiçbir gerekçe yok. Her sayfa farklı bir marka gibi hissettiriyor.

Yetim kalınlık. İnce (100) veya Siyah (900) kalınlığı sadece bir dekoratif öğe için kullanmak ve başka hiçbir şey için kullanmamak. Sistem değeri katmadan görsel gürültü ekler.

Boşluk tahmini. Bileşenler arasında değişen satır yükseklikleri ve harf aralıkları, çünkü kimse kuralları tanımlamadı.

Sadece masaüstü ölçeği. 1440 piksel bir makette harika görünüyor. Daha küçük herhangi bir şeyde dağılıyor çünkü kimse duyarlı davranışı test etmedi.

Eksik token'lar. Bir Figma dosyasında tanımlanmış ancak tasarım token'larına veya CSS özel özelliklerine çevrilmemiş bir yazı tipi sistemi. Sistem teoride var ama kodda yok, bu yüzden mühendisler her sprint'te onu yeniden icat ediyor.

Sıkça Sorulan Sorular

Tasarımda tipografi sistemi nedir?

Bir tipografi sistemi, bir marka veya ürün genelinde font seçimi, boyutlandırma, kalınlık, boşluk ve duyarlı davranışı yöneten eksiksiz kurallar bütünüdür. Her metin parçasının nasıl ölçeklendiğini ve tutarlılığı nasıl koruduğunu tanımlamak için font seçmenin ötesine geçer.

Bir tasarım sisteminde kaç font olmalı?

İki standarttır. Çoğu sistem için üç maksimumdur. Bir ekran veya başlık yazı tipi ve bir gövde yazı tipi, tasarım ihtiyaçlarının büyük çoğunluğunu karşılar. Daha fazlasını eklemek, eşleştirme, kalınlık ve duyarlı kararlarda katlanarak karmaşıklık yaratır.

En iyi yazı tipi ölçeği oranı nedir?

Tek bir en iyi oran yoktur. Büyük Üçlü (1.250) pazarlama ve editoryal için iyi çalışır. Küçük Üçlü (1.200) yoğun arayüzlere uygundur. Mükemmel Dörtlü (1.333) güçlü başlık kontrastı yaratır. İçerik yoğunluğunuza ve hiyerarşi ihtiyaçlarınıza uygun oranı seçin.

Fontu Seçmeden Önce Sistemi Kurun

Font, ilk değil, son karardır. Ölçeğinizi, boşluk kurallarınızı, kalınlık hiyerarşinizi ve duyarlı davranışınızı tanımlayın. Ardından bu kısıtlamalara uyan yazı tipini seçin. Harika bir sistem içindeki vasat bir font, sistemi olmayan harika bir fonttan her zaman daha iyi performans gösterecektir.