Arayüz Tasarımı: Tipografi

Metinler tasarımınızın %80'inden fazlasını temsil ediyor. Tipografiyi keşfetmeye başlayın ve fontlarınızın okunabilir olduğundan emin olun.

Can Demirgüreş
TurkishKit
4 min readAug 19, 2019

--

Renkler ve şekiller kadar önemli olan, tasarımın vazgeçilmez parçası Tipografi, Apple platformlarında eşsiz bir düzen ile karşımıza çıkmaktadır. Tipografi, yani yazı biçimi, uygulamanın havasını tamamen değiştirebileceği gibi kullanıcı deneyimi açısından da oldukça önemlidir.

iOS Sistem Fontu

Apple iOS 9 sürümünden bu yana San Fransisco (SF) fontunu kullanıyor. Apple’ın daha önce tercih ettiği, SF fontuna oldukça benzeyen font ise: Helvetica Neue. Bu iki fontu birbirinden ayırmanın en iyi yolu noktalı olan karakterlere bakmak. SF fontunda noktalar yuvarlak, Helvetica fontunda ise karedir.

SF Pro Display ve Helvetica Neue

SF yazı tipi Apple Tasarım Prensiplerinin temellerini oluşturan okunabilirlik, sadelik ve tutarlılık üçlüsünü barındırıyor ve bu nedenle Apple uzun yıllardır bu yazı tipinden vazgeçmiyor. Bu fontu yalnızca uygulama geliştirirken değil, üstüne çalıştığınız proje ve sunumlarınızda da aşağıdaki linkten indirerek kullanabilirsiniz.

https://developer.apple.com/fonts/

SF Font Ailesi

San Fransisco font ailesi, iOS, macOS, ve tvOS platformlarında kullanılan SF Pro ve watchOS sistem fontu olan SF Compact olarak ikiye ayrılır. Bu fontlar da kendi içerisinde Display ve Text olarak ikiye ayrılır. Tabii ki Xcode’da yazdığınız mükemmel kodların fontu da bu aileye ait: SF Mono!

San Fransisco Font Ailesi

Apple, 19 punto veya daha küçük olan metinlerde SF Pro Text, 20 punto veya daha büyük metinlerde ise SF Pro Display kullanmanızı öneriyor.

Neden San Fransisco?

San Fransisco birçok yönden diğer fontlardan ayrılıyor. Ve her zamanki gibi şeytan detaylarda gizli. Bu fontun göze neden güzel geldiğini bir örnek ile görelim. Birçok font ailesinde iki nokta(:) taban çizgisinin hemen üstünde yer alır. SF fontunun orantısal olarak da güzel olması bu noktada belirginleşiyor. Çünkü yere yakın olmaktansa, iki nokta metin içerisinde dikey olarak ortalanmış bulunuyor.

İki nokta SF fontunda ortalanıyor.

Önemli bilgileri vurgulayın.

Font kalınlığı uygulamanızdaki önem hiyerarşisini belirtmenin en etkili yollarından birisidir. Bu nedenle uygulamanızdaki önemli bilgileri vurgulamak için yazı tipi ağırlığını, boyutunu ve rengini kullanın.

Tutarlı olmaya özen gösterin.

Uygulamanızda farklı fontlar kullanmak, uygulamanızı bir bütün olarak göstermek yerine onu karmaşık gösterir. Bir yazı tipi ve yalnızca birkaç yazı kalınlığı ve boyutu kullanmaya dikkat edin.

Mümkün olduğunca hazır metin stillerini kullanın.

iOS Hazır Metin Stilleri

Dynamic Type gibi özelliklerden faydalanmak, uygulamanızın farklı cihazlara adapte olabilmesini sağlamak için hazır metin stillerinden faydalanın.

Özel yazı tiplerinin okunurluluğundan emin olun.

Uygulama geliştirirken hoşunuza giden dilediğiniz bir fontu kullanabilirsiniz. Ancak uygulamanızın marka kimliği yaratmak veya eşsiz bir oyun deneyimi sunmak gibi bir amacı yoksa sistem fontu kullanmaktan vazgeçmeyin.

Özel yazı tipleri için erişilebilirlik özelliklerini sağlayın.

SF gibi sistem fontları, koyu metin ve büyük yazı tipi gibi erişilebilirlik özelliklerine otomatik olarak uyum sağlar. Eğer kendi fontunuzu kullanmayı tercih ettiyseniz, bu fontu erişebilirlik özelliklerine uyumlu hale getirin.

Daha Fazlası?

Bu yazımızda Apple Human Interface Guidelines da yer alan tipografi bölümüne göz attık, San Fransisco font ailesini tanıdık ve başarılı bir iOS uygulaması için gerekli olan noktalara değindik. Eğer tipografi konusunda daha fazla bilgi edinmek istiyorsanız, tipografiyi derinlemesine anlatacağımız yazımız için beklemede kalabilirsiniz! O zamana kadar “Helvetica” adlı tipografi belgeselini izleyebilirsiniz.

https://www.imdb.com/title/tt0847817/

Yaratıcı tasarımlar!

Ve unutmayın. Fontlar duygu yüklüdür. Dilerseniz şıklığı temsil eder, dilerseniz kendinizden emin bir şekilde hissettiğiniz duyguyu 😃

Eğer sizin de yukarıdaki belgeselde hoşunuza giden sözler olursa yorumlara yazabilirsiniz!

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz!

Twitter | Instagram | Facebook

--

--