Duyarlı Tipografi için Basit Bir Kılavuz
Duyarlı tasarımdan bahseden makalelerin büyük çoğunluğu iki ana alana odaklanır: akışkan, esnek bir ızgara ve akışkan, esnek görüntüler. Birçoğu hakkında konuşmak yok tipografi.
Ve yine de, web sitelerinin çoğunluğu için metin, içerik, en önemli unsurdur.
Görüntülerin veya videoların birincil içerik olduğu siteler için yanıt veren tür biraz daha az önemlidir, ancak yine de göz ardı edilmemelidir.
İyi haber, duyarlı tipografinin elde edilmesi özellikle zor olmadığıdır. Türümüzün ekran boyutundaki değişikliklere nasıl karşılık vermesi gerektiğini düşünmek için biraz zaman ayırmalıyız ve sonra bu değişiklikleri uygularız.
Duyarlı tipin prensipleri
Etkili duyarlı tipografi yaratmanın iki temel ilkesi vardır. Birincisi resizable tipidir. Bu, yalnızca ekran boyutuna göre yeniden boyutlandırılmayan, aynı zamanda kullanıcı tarafından da yeniden boyutlandırılabilen tür anlamına gelir.
İkincisi okunabilirliği koruyan optimize edilmiş hat uzunluklarıdır. Bu, bazı ekranlar için, içerik alanını daha küçük tutmak ve çizgi uzunlukları daha kısa tutmak, içeriğin teorik olarak daha geniş bir alana yayılmasına rağmen, daha anlamlı hale gelir.
Rems kullanarak yeniden boyutlandırılabilir tip
Çoğu tasarımcı, türlerini boyutlandırmak için piksel veya em kullanır. Kullanıcıların tarayıcılarında türlerini yeniden boyutlandırmaları için Ems daha iyi bir seçenektir. Fakat ems, ana öğeye görelidir, yani pikselleri kullanmaktan daha karmaşıktırlar, bu da yalnızca daha fazla boyut ve ilişkinin izlendiği ilişkilerin olduğu duyarlı tasarımlarda birleştirilir.
Rems ems için daha iyi bir alternatif sunuyor. Bir anahtar farklılık dışında neredeyse aynı şekilde çalışırlar: rem birimleri html öğe, ayrı ebeveyn öğeleri yerine. Bu, türünüzün düzgün boyutlandırılmasını çok daha kolay hale getirir.
Rem üniteleri şimdi, 11.6 ve IE9 sürümlerinden Opera dahil olmak üzere tüm büyük modern tarayıcılarda desteklenmektedir. Önceki tarayıcılara yönelik geri dönüşler eklemek isteyebilirsiniz, ancak şimdi bunları kullanmak için gerekli olan destekleri yeterince destekleyin.
Boyutlandırma türü için rem birimleri kullanacağınız için, sıfırlama işlemini uygulamanıza uyguladığınızdan emin olun. html eleman ve sizin değil body öğesi. Yani şöyle görünmeli:
html { font-size:100%; }
Şimdi rem birimleriniz, cihazın varsayılan yazı tipi boyutuna uygulanacaktır.
Ardından, her bir ekran boyutu için yazı tipi boyutunu belirtmeniz gerekir. En iyi görünen şeyleri görmek için çeşitli cihazlarda gerçek yazı tipi boyutlarını denemenizi öneririz. Genel olarak seçtiğiniz tasarımın yanı sıra seçtiğiniz yazı tiplerine de bağlıdır.
Büyük olasılıkla farklı ekran boyutlarına göre birden fazla yazı tipi boyutu belirtmek istersiniz. Bu, yapılacak oldukça basit bir işlemdir. Örnek olarak, CSS’niz şöyle bir şeye benzeyebilir:
@media (max-width: 640px) { body {font-size:1.2rem;} } @media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }
Bu makale için basitleştirilmiş bir kod verilmiştir, ancak size bir başlangıç noktası verir. En küçük ekranlarda, biraz daha büyük yazı tipi boyutunun belirtildiğini fark edebilirsiniz. Bunun nedeni, daha büyük yazı tipi boyutlarının küçük ekranlarda okunması daha kolaydır.
Tabii ki, sizin gibi şeyler için ek özellikler yapmak isteyeceksiniz h1 elemanlar ve benzeri. Gibi bir araç kullanmanızı tavsiye ederim Web Yazı Tipi Örneği türünüzün aslında nasıl görüneceğini görmek için.
Optimum hat uzunluklarının korunması
Yeniden boyutlandırılabilir tür oldukça basit bir kavram olsa da, birden fazla cihaz arasında doğru çizgi uzunluklarını korumak biraz daha zor olur. En uygun hat uzunluğunun okunabilirlik açısından ne olduğu konusunda biraz tartışma olmuştur. Baymard Enstitüsü Mutabakat, hat başına 50 ila 75 karakter arasında bir yerde görünüyor.
Ayrıca içeriğiniz için sabit genişlikli bir kapsayıcı kullanmanız önerilir, ancak bu, duyarlı bir tasarımın amacını ortadan kaldırır, bu yüzden optimize edilmiş hat uzunlukları ile yanıt vermeyi sürdürmek istiyorsak bazı şeylere biraz farklı yaklaşmamız gerekir.
Öncelikle, tasarlayacağınız farklı ekran boyutlarına bakın ve bir satırda yaklaşık 50 karakter almak için kullanmanız gereken boyut yazı tipini belirleyin. Çok küçük ekranlarda, okunabilir yazı tipi boyutunu korumak için satır başına 50 karakterin altına düşmeniz gerekebilir, ancak 50 hedef olmalıdır. Bu bize yazı büyüklüğümüz için iyi bir başlangıç noktası verir.
Metin içeriği alanları için maksimum genişlikleri (veya kırılma noktaları) da ayarlamalıyız. Belirli bir ekran boyutu için kullandığınız türün boyutuna bakın ve satır başına yaklaşık 75 karaktere sahip olduğunuzda içerik kabının genişliğini belirleyin. Tek boşluklu bir yazı tipi kullanmıyorsanız, bu tam olarak geçerli olmaz, ancak oldukça kolay bir ortalama ile gelebilmeniz gerekir. Bu bizim maksimum konteyner genişliğimiz olur.
Belirli bir cihaz için varsayılan yazı tipi boyutunun 16px olduğunu ve yazı tipi boyutunun 20px olmasını istediğinizi varsayalım (bu örnekte Droid Serif gibi bir serif yazı tipi kullandığımızı varsayalım). Bu, türün 1.25rem olacağını belirtirsiniz. Bu boyutta, yaklaşık 675 piksel genişliğinde bir konteyner genişliği isteyeceksiniz. Bu bize ortalama 60'larda bir karakter sayısı verir, bu da hedef genişliğimizde geçerlidir.
Kapsayıcı genişliğini belirtmek için, sadece şu kodu kullanın:
@media (min-width: 950px) { .container {width:675px;} }
Her ekran boyutu için ya da sadece belirli olanlar için bu maksimum çizgi genişliklerini ayarlayabilirsiniz. Daha küçük ekranlarda, kabın genişliğini dışarıda bırakmak ve türün ekranın tüm genişliğine yayılmasını isteyebilirsiniz.
Artık çok daha büyük ekranlarda, içeriğinizi birden fazla sütuna ayırmak isteyebilirsiniz. Örneğin, manzara görünümünde bir iPad ile çalıştığınızı varsayalım. Ekran genişliğiniz 2048 pikseldir. Ekranı doldurmak için çizgilerinizi zorlamak, okumayı zorlaştırır, ancak içeriğinizi ortalar ve çizginizin uzunluğunu korumak, manzara modunda içeriği görüntülemenin amacını azaltır.
Bunun yerine, türünüzü iki sütun halinde (veya yazı tipinizin boyutuna bağlı olarak üçünü) ayarlayın. CSS3'ün çoklu sütun belirtimi Tüm düzeninizi değiştirmeye gerek kalmadan metninizi birden çok sütuna bölmeyi çok kolaylaştırır. Bunu medya sorguları ile birleştirin ve artık hem yüksek düzeyde okunabilir bir yazı tipi hem de yüksek düzeyde okunabilir bir çizgi uzunluğunu koruyarak daha büyük ekranlar için iki veya üç sütuna bölünen bir içerik düzenine sahip olursunuz.
Yine, bunu yapmak için kod oldukça basit:
@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } }
Artık 1140 pikselden daha geniş ekranlarda, içeriğinizin iki sütuna bölünmesiyle satır uzunluklarınızı daha okunabilir hale getireceksiniz.
Alternatif yazı tipleri kullanma
Duyarlı tipografi hakkında konuşurken genellikle gözden kaçan bir şey, farklı yazı tiplerinin farklı boyutlarda iyi çalışmayabileceği fikridir. Bu özellikle yazı tipi yazı tipleri için geçerlidir.
Bu, bu yazı tiplerini duyarlı tasarımlarınızda kullanmaktan kaçınmanız gerektiği anlamına mı geliyor? Tabii ki değil. Bunun yerine, büyük veya küçük düzenlerinizde çeşitli öğeler için farklı yazı tipleri belirtin.
Örneğin, masaüstü bilgisayarlar için bir tasarıma sahip bir yazı tipi kullanmak isteyebilirsiniz. League Script başlıklarınız için. Ancak iPhone gibi daha küçük bir ekranda, içeriği o kadar büyük tutacağınızı ya da okunması çok zor olacak.
Burada yapabileceğimiz daha büyük ekranlar için (iPad, masaüstü, vb.) League Script'i kullanırken, daha küçük ekranlar için (iPhone veya diğer akıllı telefonlar gibi) vücut fontunun daha büyük bir versiyonuna geçiyor.
Bunu yapmak için, şöyle bir şey belirtmeniz yeterlidir:
@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px) { h1 {font-family:"Droid Serif", serif;} }
Tabi ki bu sadece sizin başlıklarınızdan daha fazlası için yapılabilir.
Sonuç
Duyarlı tasarım büyük ölçüde görüntülere ve genel düzenlere odaklanırken, tipografi de her iki şey kadar önemlidir. En iyi yanı, duyarlı bir tasarım için tipografinizi uyarlamanın ve optimize etmenin özellikle zor olmamasıdır.
Tasarımınızın diğer unsurlarına yerleştirdiğiniz aynı zamanı ve çabayı koymanız çok önemlidir. Metin içeriğinizin okunabilirliğini korumak, ziyaretçileriniz için en uygun kullanıcı deneyimini oluşturmak için hayati bir bileşendir.
Duyarlı ızgaralar ve görüntüler yaparken tasarımlarınızda duyarlı tipografiye çok önem veriyor musunuz? Neden ya da neden olmasın?