Bu Tip Tasarımımı Yağlandırıyor mu?

Hiçbir şey uymayan tipografi gibi bir tasarımı mahvedemez. Çok büyük (veya çok küçük) olsun, yanlış tip ölçekleme önemli bir sorundur.

Düşündüğünüzden daha fazla tasarım için bir sorun. Çok sık bir tür tarayıcıyı bir tarayıcıda güzelce oluşturduğu bir web sitesini ziyaret edersiniz, sadece bir telefondan daha sonra tekrar ziyaret etmek ve okumayı zor bulmak için. Bu her zaman olur.

Sorun, tür her cihaz için gerçekten ölçeklendirilmemiş olmasıdır. Projeler için bir tipografik ölçeği düşündüğünüzde tamamen önlenebilir bir problemdir.

Tipografik Ölçeği nedir?

Bir görsel tipografik ölçek, bir projede bir diğerine göre tip elemanlarının boyutlarını, uzayını ve oranlarını kapsar. Bu, ana gövde metin stilinden başlıklar, alt başlıklara, altyazılara ve diğer metin öğelerine kadar her şeyi içerir.

Ölçek, metin öğelerinin birbiriyle ilişki içindeki boyutunu ve yerleşimini belirlemeye yardımcı olur. Web tasarımı için, özellikle görsel tip ölçeği, CSS'nizdeki etiketlere karşılık gelir (örneğin, h1, h2, h3, p vb.).

Tip ölçeği, tasarımda uyum ve ritim yaratmanıza yardımcı olur. Aynı zamanda stilistik sorunlardan uzak kalmanızı sağlar çünkü metin elemanları CSS elemanları ile örtüşür, böylece tasarımın her bölümü aynı elementleri ve tutarlılığı kullanır.

Ölçek, vücut metninin büyüklüğüne dayanmalıdır. (Her zaman bunun için bir yazı karakteri ve boyut ayarlayın). Sonra bu ana tipografinin etrafındaki ölçeği oluşturun. Nereden başlayacağınızdan emin değil misiniz? Google’da katı tavsiye :

1. 16 CSS pikseli bir taban yazı tipi boyutu kullanın. Kullanılan yazı tipinin özelliklerine göre boyutu ayarlayın.
2. Tipografik ölçeği tanımlamak için taban boyutuna göre boyutlar kullanın.
3. Metin, karakterler arasında dikey boşluk gerektirir; Genel öneri, tarayıcının varsayılan satır yüksekliğini 1,2 em kullanmasıdır.
4. Kullanılan fontların sayısını ve tipografik ölçeği sınırlayın.

Uyum ve ritim yaratın

Tip ölçeği, kullanıcıların kopyada ilerlemesine yardımcı olmaktan daha fazlasını yapar, metin akışı için uyum ve ritim oluşturur. Bu herhangi bir cihazda önemlidir.

Nereden başlıyorsun?

UX Matters, minimumda en iyi araştırmalardan bazılarına sahiptir. cihaza göre metin boyutları . Bunların minimum boyutlar olduğunu ve gövde metni boyutlarının artmaya devam ettiğini (satır aralığı gibi), daha büyük nokta boyutlarını dikkate almanız gerektiğini unutmayın. Steven Hoober, önerilen minimum değerlerden en az yüzde 40 daha büyük bir başlangıç ​​yapmanızı önerir. Ayrıca, gelişmiş içerik stilleri minimum yüzde 80'e kadar çıkabilir, ancak son derece büyük tipte de dikkatli olmalısınız.

Gövde metni boyutu ayarlandıktan sonra, destekleyici metin öğelerinin boyutunu nasıl belirleyebileceğinizi belirleyebilirsiniz. Bunun için güzel bir sanat var ve göz testi genellikle başlamak için iyi bir yer.

Çok büyük bir başlık gibi neredeyse hiçbir şey yoktur. Söyleyeceğin şeyi söyle ve uzayda kelimeleri ölçeklendir. Metin, tam olarak aynı boyutta olsa bile, iki satırlık bir başlık tek satırdan daha büyük olacaktır.

Başlıklar ve diğer büyük test öğeleri için ölçeklemeyi düşünmenin en kolay yolu, gövde metnine göre yüzde cinsinden çalışıyor. Her tasarımcı farklı bir başlangıç ​​noktasına sahip olsa da, gövde metninden yüzde 250 daha büyük olan başlık için iyi bir balo salonu; H2 için yüzde 150, h3 için yüzde 75 ve blok alıntılar gibi öğeler için yüzde 50. (Bu bir kural değil, sadece bir başlangıç ​​noktasıdır.)

Bu nedenle, ayarlanan boyutlardan ziyade yüzdeler önemlidir: Vücut tipinin boyutunu ayarladıktan sonra, yüzdeler ekran boyutuna bakılmaksızın boyutları ayarlar. Her tip eleman vücut tipine göredir.

Karakter ve boşluk yönergeleri

Ekrana yazarken tasarımcıların da aradıkları diğer bazı kurallar vardır. Boşluk söz konusu olduğunda, okunabilirliği sağlamak için başparmak kurallarından biri satır başına karakterlere bakmak olmuştur.

• Masaüstü ve büyük cihazlar: Satır başına 60 ila 75 karakter
• Telefonlar ve küçük cihazlar: Hat başına 35 ila 40 karakter

Daha küçük ekranlarda okunabilirliğin daha az karaktere (daha büyük metin) sahip olmasına bağlı olduğunu unutmayın.

Aynı fikir, boşluklar için de geçerlidir. Kullanıcıların içeriği okumasını ve taramasını kolaylaştırmak için ekran boyutu sınırlı olduğunda metin satırları arasında daha fazla alana ihtiyacınız vardır. Masaüstü tipografisinden daha küçük cihazlara yüzde 25 daha fazla satır aralığı eklemeyi düşünün.

Ek boyut ve boşluk, kullanıcıların daha küçük cihazlarda okumaya çalışırken hissedebilecekleri sıkı ya da sıkışık hissi hafifletmeye yardımcı olur. Tuval küçük olduğu için, kullanıcıların akışını sağlamak için okuyucu akışı ve okunabilirlik hayati önem taşır.

Başlamak için ipuçları

Tipografik ölçek oluşturmanın ve metnin tasarımınızın şişman görünmemesini sağlamanın birçok yolu vardır. Bunu nasıl yapacağınız, tasarımın yanı sıra kod ve geliştirme ile konfor düzeyinize bağlıdır.

En iyi seçenek, medya sorguları ile duyarlı bir tasarım kullanmaktır. Bu, metin özellikleri üzerinde en üst düzeyde kontrol sağlayacak tasarımcı geliştirici seçeneğidir. (Daha fazlası için yukarıdaki Google önerilerine geri dönün.)

Başka bir yol, farklı versiyonlar tasarlamaktır. Bu oldukça eski bir kavram olsa da, web siteleri için mobil URL'leri ve masaüstü URL'lerini kullanan bazı yerler var. Çoğu durumda önerilmez, ancak tasarımın önemli ölçüde farklı olduğu veya kullanıcıların farklı şeyler yaşadığı bazı web siteleri için bu bir seçenek olabilir.

Kolay seçenek, web siteniz için bir tema ile başlamaktır. Sadece tamamen duyarlı bir seçenek tercih ettiğinizden emin olun. Yüksek kaliteli yanıt veren bir tema kullandığınızda, tahminlerin çoğu sizin için çıkarılır. Gerçekten düşünmen gereken tek şey, vücut metinleri. Mobil tip boyutların standartlarınızı karşıladığından emin olmak için her şeyi kontrol ettiğinizden emin olun.

Tip ölçeği oluşturmak için 3 araç

Görsel tipografi ölçeğinin tam etkisini görmenize yardımcı olacak bir dizi araç bulunmaktadır. İşte en iyi ve en kullanıcı dostu seçeneklerden birkaçı.

• Tip Ölçeği : Metni girin ve ekranda boyut, ölçek ve yazı tipi gibi seçeneklerle oynayın; CSS'yi not edin veya kodu doğrudan araçtan düzenleyin;
• Modüler Ölçek : Ölçek, tür için boyutları belirlemenize yardımcı olacak bir kural gibi çalışır; sonra sonuçları bir Sass veya JS eklentisi olarak indirin veya ekranda görün;
• Altın Oran Tipografi Hesaplama : Araç, altın oranını kullanarak satır başına boyut, çizgi yüksekliği, genişlik ve karakterleri optimize eder

Sonuç

Doğru tipografik ölçek tasarımınızı trim ve svelte görünümlü tutacaktır. Kullanıcıların anlamadığı ancak genel okunabilirliğe ve kullanılabilirliğe katkıda bulunduğu ek uyumdur.

Tasarım “sadece doğru görünmüyorsa” ölçeğin kapalı olması muhtemeldir. Yanlış boyutta olan tip, kesin bir noktaya gelmek zor olabilir, ancak genellikle bir tasarımın dengesi bozulduğunda bakılması gereken bir yer olabilir. Bir şeye yerleşmeden önce ölçek için birkaç farklı seçenekle oynayın ve şu anki trendin geçmişte olduğundan biraz daha büyük olduğunu unutmayın.

• ← Comic Sans'ın Ardındaki Adamla Tanış
• WeTransfer Yeni Marka Kimliği ve Kullanıcı Arayıcısını Açıkladı →