Arayüz yazı tipinden ne beklenir #
Bir marka için seçilen başlık yazı tipi ile bir uygulamanın form alanlarında, tablolarında ve menülerinde kullanılan yazı tipi farklı işler görür. Birincisi karakter ve ton taşır. İkincisi saatlerce okunur, küçük boyutlarda kullanılır ve her türlü veriyle karşılaşır. Arayüz için seçim yaparken şu ölçütlere bakıyoruz:
- Yazı tipi küçük boyutta da okunmalı. Yüksek x-yüksekliği ve açık harf formları, form etiketleri ve açıklama metinleri gibi küçük metinlerde fark yaratır.
- Birbirine benzeyen karakterler ayrışmalı. Büyük I, küçük l ve 1 rakamı ile büyük O ve 0 rakamı, kod, şifre ve ürün kodu gibi alanlarda karışmamalı.
- Tablo rakamları bulunmalı. Eşit genişlikli rakamlar, fiyat ve veri tablolarında sayıların alt alta hizalanmasını sağlar.
- Ağırlık aralığı geniş olmalı, mümkünse değişken sürüm sunulmalı. Tek dosyada birçok ağırlık sunan değişken yazı tipleri hiyerarşi kurmayı ve performansı kolaylaştırır.
- Türkçe tam desteklenmeli. ğ, ı, İ ve ş harflerinin doğru çizilmiş olması ve aksanların satır aralığıyla çakışmaması gerekir.
Türkçe için bir detay daha var. CSS ile büyük harfe çevrilen metinlerde tarayıcının i harfini İ olarak yazabilmesi için sayfada ya da ilgili öğede dilin Türkçe olarak tanımlanması gerekir. Aksi halde büyük harfli başlıklarda noktasız I görürsünüz.
Inter ve IBM Plex #
Inter, Rasmus Andersson'un tasarladığı ve ayrıntılı arayüzlerden tabelalara kadar geniş bir kullanım alanı için hazırlanmış bir aile. Resmi sayfasına göre 147 dili kapsayan 2.000'den fazla glif içeriyor, 100 ile 900 arasında ağırlıklar sunuyor ve metin ile başlık için ayrı optik boyutlara sahip. Metin boyutundaki çizimlerde okunabilirliği artırmak için yüksek bir x-yüksekliği kullanılıyor. Tablo rakamları gibi birçok OpenType özelliği de mevcut. Google Fonts üzerinden SIL Open Font License ile dağıtılıyor.
IBM Plex, IBM'in kurumsal yazı tipi olarak geliştirdiği ve açık kaynak olarak yayımladığı büyük bir aile. Sans, Serif, Mono ve Sans Condensed gibi kardeş aileleri sayesinde arayüz metni, uzun okuma ve kod gösterimi için ortak bir dil kurmak mümkün. Plex Sans, genişletilmiş Latin alfabesinin yanında Arapça, Kiril, Yunanca ve İbranice gibi yazı sistemlerini de destekliyor. Google Fonts'ta da OFL lisansıyla yer alıyor.
İki aile arasında seçim genelde tona göre yapılıyor. Inter daha nötr ve arka planda kalan bir karakter taşırken, Plex biraz daha mekanik ve kişilikli duruyor. Veri yoğun ürünlerde ve geliştirici araçlarında Plex Mono ile birlikte kullanılan Plex Sans tutarlı bir bütün oluşturuyor.
Source Sans 3, Roboto Flex, Rubik ve Noto Sans #
- Source Sans 3, Adobe için Paul D. Hunt tarafından tasarlandı ve Adobe'nin açık kaynak Source ailesinin parçası. GitHub deposunda kullanıcı arayüzü ortamları için tasarlanmış bir sans serif olarak tanımlanıyor. Sakin, okunaklı ve uzun metinde yormayan bir seçenek.
- Roboto Flex, Google Fonts için Font Bureau, David Berlow ve ekibinin geliştirdiği değişken bir aile. Ağırlık, genişlik ve optik boyutun yanında ince ayar için birçok parametrik eksen sunuyor. Android ve Material Design ekosistemiyle çalışan ekipler için doğal bir tercih.
- Rubik, Hubert & Fischer'dan Philipp Hubert ve Sebastian Fischer'ın tasarladığı, köşeleri hafifçe yuvarlatılmış bir sans serif. Daha samimi bir ton isteyen tüketici uygulamalarında ve oyunlaştırılmış arayüzlerde iyi çalışıyor.
- Noto Sans, Google'ın çok geniş dil kapsamı hedefleyen Noto projesinin parçası. Birçok dilde yayın yapan ürünlerde yedek yazı tipi olarak da işe yarıyor.
Listedeki bütün aileler Google Fonts deposunda OFL klasöründe yer alıyor ve Türkçe harfleri kapsayan Latin Extended alt kümesini içeriyor. Yine de seçimden önce ürününüzde kullanacağınız gerçek metinlerle, özellikle ğ, ş ve İ içeren başlık ve düğme etiketleriyle bir deneme sayfası hazırlamanızı öneriyoruz.
Lisansı okumak #
SIL Open Font License, yazı tipleri için hazırlanmış, yaygın kullanılan açık kaynak bir lisans. Güncel sürümü 2007 tarihli 1.1. Lisansın resmi sitesine göre OFL ile sunulan yazı tiplerini kitaplarda, afişlerde, logolarda ve web sitelerinde kullanabilir, belirli koşullarla uygulama ve yazılımlara gömebilir, değiştirip yeniden dağıtabilirsiniz. Değiştirilmiş bir sürümde, yazı tipinin ayrılmış bir adı varsa ad değişikliği gerekebilir.
Ticari yazı tipleri farklı işler. Birkaç yıl önce popüler olan Euclid, Brandon Grotesque, Graphik, GT America ve Akkurat gibi aileler bağımsız dökümhanelerin ticari ürünleri. Bu ailelerde masaüstü, web, mobil uygulama ve yayın kullanımı genellikle ayrı lisanslanıyor ve koşullar dökümhaneye göre değişiyor. Tasarımcının bilgisayarında yüklü olan bir yazı tipinin sitede ya da uygulamada kullanılabileceğini varsaymamak gerekiyor.
Marka tarafında ticari bir yazı tipi, arayüz tarafında ise açık lisanslı bir aile kullanmak sık başvurulan ve dengeli bir çözüm. Marka karakteri başlıklarda ve pazarlama sayfalarında korunurken, ürün içindeki yoğun metin ve veri açık lisanslı ailede kalıyor.
Web ve uygulamada performans #
- Yazı tiplerini WOFF2 formatında ve mümkünse kendi sunucunuzdan sunun.
- Birden fazla ağırlık kullanıyorsanız değişken sürümü tercih edin. Tek dosya birçok statik dosyanın yerini alabilir.
- Kullanılan aile ve ağırlık sayısını sınırlayın. Çoğu arayüz iki ya da üç ağırlıkla rahatça çalışır.
- Dosyayı alt kümelere ayırırken Türkçe harflerin bulunduğu Latin Extended aralığını dahil edin. Yalnızca temel Latin aralığıyla yayınlanan bir sitede ğ, ı, İ ve ş yedek yazı tipiyle görünür.
- Yazı tipi yüklenirken metnin görünür kalması için font-display ayarını kullanın ve yedek yazı tipinin ölçülerini ana yazı tipine yakın tutun.
Bazı ürünlerde en iyi seçim, işletim sisteminin kendi yazı tipi olabilir. Sistem yazı tipi hiçbir dosya indirmeden açılır ve kullanıcıya tanıdık gelir. Karşılığında platformlar arasında birebir aynı görünüm elde edemezsiniz.
Okunabilirlik ve tip ölçeği #
Aileyi seçtikten sonra onu tutarlı bir tip ölçeğiyle kullanmak gerekiyor. Başlık, alt başlık, gövde metni, etiket ve açıklama metni için boyut, satır yüksekliği ve ağırlık değerlerini bir kez tanımlayıp tasarım sisteminde değişken olarak saklamak, ekranlar çoğaldıkça tutarlılığı korur.
Erişilebilirlik tarafında WCAG 2.2'nin metin aralığı kriteri iyi bir kontrol noktası. Kritere göre kullanıcı satır yüksekliğini yazı boyutunun en az 1,5 katına, paragraf sonrası boşluğu 2 katına, harf aralığını 0,12 katına ve kelime aralığını 0,16 katına çıkardığında içerik kaybolmamalı ve arayüz bozulmamalı. Sabit yükseklikli kutular ve taşan metinler bu testte ilk sorun çıkaran yerler.
Pars Design olarak bir ürünün tipografisini kurarken önce gerçek içerikle, yani uzun isimler, büyük sayılar ve Türkçe karakterler içeren ekranlarla deneme yapıyoruz. Aile ve ölçek kararları bu denemelerden sonra tasarım sistemine işleniyor.
Kaynaklar #
- Inter font family, rsms.me; Inter'in dil kapsamı, ağırlıkları, optik boyutları ve OpenType özellikleri
- IBM Plex, IBM GitHub; Plex ailesinin kardeş aileleri ve dil desteği
- SIL Open Font License; OFL 1.1 lisansının kullanım, gömme ve değiştirme koşulları
- Understanding Success Criterion 1.4.12: Text Spacing, W3C; Metin aralığı için erişilebilirlik değerleri
